:root {
  color-scheme: light;
  /* surfaces */
  --paper: #f4f6f4;  --card: #ffffff;
  --ink: #1a2529;    --muted: #5d6d70;  --line: #dde3df;
  /* brand */
  --accent: #17604f; --accent-ink: #ffffff; --accent-soft: #e2efe9;
  /* status family */
  --quote: #8a6410;  --quote-bg: #f3ecd7;
  --work:  #14607e;  --work-bg:  #e0eef5;
  --done:  #1a7a48;  --done-bg:  #e0f1e6;
  --lost:  #a33a2c;  --lost-bg:  #f7e4e0;
  /* type scale */
  --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .9rem;
  --fs-md: 1rem;   --fs-lg: 1.15rem; --fs-xl: 1.45rem;
  /* spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  /* radii + elevation */
  --r-sm: 6px; --r-md: 10px; --r-full: 999px;
  --shadow: 0 1px 2px rgb(16 36 30 / .06), 0 2px 8px rgb(16 36 30 / .05);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #141a1c; --card: #20292c;
    --ink: #e4e9e7; --muted: #93a3a2; --line: #2c383a;
    --accent: #56b697; --accent-ink: #04231a; --accent-soft: #1e3229;
    --quote: #d9b34c; --quote-bg: #332d14;
    --work:  #64b6d4; --work-bg:  #14303a;
    --done:  #5ec98f; --done-bg:  #143526;
    --lost:  #d98376; --lost-bg:  #3a201d;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
button { font: inherit; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}
@media (prefers-color-scheme: dark) { body { -webkit-font-smoothing: antialiased; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
button[disabled] { opacity: .55; cursor: default; }

main { max-width: 1180px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) 3rem; }
footer { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-6); color: var(--muted); font-size: var(--fs-xs); }

/* ---- header chrome ---- */
.top {
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: .55rem var(--sp-4); position: sticky; top: 0; z-index: 5;
  box-shadow: var(--shadow);
}
.brand { font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.brand .mark {
  width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--accent);
  color: var(--accent-ink); font-size: .85rem; font-weight: 700;
  display: grid; place-items: center;
}
.brand span.b { color: var(--accent); }
.top nav { display: flex; gap: .15rem; flex: 1; }
.top nav a {
  color: var(--muted); text-decoration: none; padding: .3rem .7rem; border-radius: var(--r-sm);
  font-weight: 500;
}
.top nav a.on, .top nav a:hover { color: var(--accent); background: var(--accent-soft); }
.sync {
  display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs);
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--done); }
.sync.warn { color: var(--quote); background: var(--quote-bg); padding: .15rem .6rem; border-radius: var(--r-full); }
.sync.warn .dot { background: var(--quote); }
.sync.bad { color: var(--lost); background: var(--lost-bg); padding: .15rem .6rem; border-radius: var(--r-full); }
.sync.bad .dot { background: var(--lost); }
.signout { color: var(--muted); font-size: var(--fs-xs); text-decoration: none; }
.signout:hover { color: var(--accent); }

/* ---- page furniture ---- */
.bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
h1 { font-size: var(--fs-xl); margin: 0; letter-spacing: -.02em; font-weight: 650; line-height: 1.2; }
h2 { font-size: var(--fs-lg); margin: 0 0 .4rem; letter-spacing: -.01em; }
h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.2rem 0 .5rem; font-weight: 600; }
.crumbs, .muted { color: var(--muted); font-size: var(--fs-sm); }
.crumbs a { color: var(--muted); }
.n { color: var(--muted); font-weight: 400; font-size: .85em; font-variant-numeric: tabular-nums; }
.push { margin-left: auto; }

/* ---- buttons ---- */
.btn {
  display: inline-block; border: 1px solid transparent; background: var(--accent);
  color: var(--accent-ink); border-radius: var(--r-sm); padding: .45rem .9rem;
  font-weight: 600; font-size: var(--fs-base); cursor: pointer; text-decoration: none;
  align-self: flex-start;
}
.btn:hover { background: color-mix(in srgb, var(--accent), #000 12%); }
.btn:active { transform: translateY(1px); }
.btn .muted { color: var(--accent-ink); opacity: .65; font-size: inherit; }
.btn.secondary { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn.secondary:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.linkbtn { border: 0; background: none; color: var(--lost); cursor: pointer; font-size: var(--fs-xs); padding: 0 .3rem; }
.inline-form { display: inline; margin: 0; }

/* ---- board ---- */
.datenav { display: flex; align-items: center; gap: .6rem; }
.datenav a { text-decoration: none; color: var(--accent); font-size: 1.05rem; padding: 0 .35rem; }
.datenav .today, .datenav input[type="date"] {
  font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .2rem .5rem; background: var(--card); color: var(--ink); font-family: inherit;
}
.datenav strong { font-variant-numeric: tabular-nums; }
.chip {
  margin-left: auto; font-size: var(--fs-sm); text-decoration: none; color: var(--work);
  background: var(--work-bg); padding: .25rem .8rem; border-radius: var(--r-full); font-weight: 600;
}
.board { display: flex; gap: var(--sp-3); overflow-x: auto; align-items: flex-start; padding-bottom: var(--sp-4); }
.col {
  min-width: 240px; max-width: 260px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2);
  box-shadow: var(--shadow);
}
.col.free { opacity: .75; border-style: dashed; box-shadow: none; }
.colfree { color: var(--muted); font-size: var(--fs-sm); padding: .3rem .3rem 1rem; margin: 0; }
.colhead { font-weight: 600; font-size: var(--fs-sm); padding: .2rem .3rem .5rem; display: flex; align-items: center; gap: .45rem; }
.dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
}
@media (prefers-color-scheme: dark) { .dot { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); } }
.bcard {
  display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: .45rem .6rem; margin-bottom: .45rem; background: var(--paper);
}
.bcard:hover { border-color: var(--accent); }
.bcard.quote { border-left-color: var(--quote); }
.bcard.work { border-left-color: var(--work); }
.bcard.done { border-left-color: var(--done); opacity: .72; }
.bcard.lost { border-left-color: var(--lost); opacity: .72; }
.btime { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.btime.anytime { color: var(--muted); font-weight: 500; font-family: inherit; }
.bstate {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-full);
  padding: 0 .5rem; margin-left: .3rem;
}
.bstate.live { color: var(--work); background: var(--work-bg); }
.bstate.done { color: var(--done); background: var(--done-bg); }
.bclient { font-weight: 600; font-size: var(--fs-sm); display: flex; gap: .4rem; align-items: center; }
.baddr { font-size: var(--fs-xs); color: var(--muted); }
.bdesc { font-size: var(--fs-sm); }
.empty { color: var(--muted); padding: 2rem 0; }

/* ---- search / tabs ---- */
.search { display: flex; gap: .5rem; flex: 1; max-width: 480px; }
.search input {
  flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r-sm); padding: .45rem .8rem; font-size: var(--fs-base);
}
.tabs { display: flex; gap: .3rem; margin-bottom: .8rem; flex-wrap: wrap; }
.tab {
  text-decoration: none; color: var(--muted); font-size: var(--fs-sm); font-weight: 600;
  padding: .25rem .8rem; border-radius: var(--r-full); border: 1px solid var(--line);
  background: none; cursor: pointer;
}
.tab:hover:not(.on) { color: var(--accent); border-color: var(--accent); }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- tables ---- */
table.list {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  font-size: var(--fs-base); box-shadow: var(--shadow);
}
table.list th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: .5rem .8rem; border-bottom: 1px solid var(--line);
}
table.list td { padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
table.list tbody tr { position: relative; }
table.list tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.rowlink { color: inherit; text-decoration: none; font-weight: 600; }
.rowlink::after { content: ""; position: absolute; inset: 0; }
.r { text-align: right; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .85em; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.desc { color: var(--muted); max-width: 0; width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.nowrap { white-space: nowrap; }

/* ---- pills ---- */
.pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  padding: .1rem .55rem; border-radius: var(--r-full); white-space: nowrap;
}
.pill.quote { color: var(--quote); background: var(--quote-bg); }
.pill.work { color: var(--work); background: var(--work-bg); }
.pill.done { color: var(--done); background: var(--done-bg); }
.pill.lost { color: var(--lost); background: var(--lost-bg); }
.pill.other { color: var(--muted); background: var(--paper); border: 1px solid var(--line); }
.pill.ops {
  color: var(--accent); background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---- panels / detail ---- */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (max-width: 800px) { .cols2 { grid-template-columns: 1fr; } }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) 1.2rem; box-shadow: var(--shadow);
}
.panel.narrow { max-width: 560px; }
.panel dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: .8rem 0 0; font-size: var(--fs-sm); }
.panel dt { color: var(--muted); }
.panel dd { margin: 0; font-variant-numeric: tabular-nums; }
.addr { white-space: pre-line; color: var(--muted); font-size: var(--fs-sm); margin: .2rem 0 .6rem; }
.desc-full { white-space: pre-line; }
.contact { margin: .2rem 0; font-size: var(--fs-base); }
.sched { margin: .25rem 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.notes { max-height: 380px; overflow-y: auto; }
.note { border-left: 2px solid var(--line); padding: .2rem 0 .2rem .7rem; margin: .5rem 0; font-size: var(--fs-sm); white-space: pre-line; }
.note time { display: block; font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono); }
table.mini { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
table.mini td { padding: .25rem 0; border-bottom: 1px solid var(--line); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--paper); }

.chart { display: flex; gap: 6px; align-items: flex-end; height: 180px; }
.vbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.vbar .fill { background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.vbar span { font-size: .6rem; color: var(--muted); font-family: var(--mono); margin-top: .3rem; }

.pager { display: flex; gap: 1rem; padding: .8rem 0; align-items: center; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.pager a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* ---- forms ---- */
.editform { display: flex; flex-direction: column; gap: .7rem; margin: .6rem 0 1rem; }
.editform label { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.editform input, .editform select, .editform textarea {
  font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .7rem;
  text-transform: none; letter-spacing: normal;
}
.editform .row2 { display: flex; gap: .7rem; }
.editform .row2 label { flex: 1; }
.formerr {
  color: var(--lost); background: var(--lost-bg); border-radius: var(--r-sm);
  padding: .5rem .8rem; font-size: var(--fs-sm); margin: 0 0 .6rem;
}
.code {
  font-family: var(--mono); font-size: 1.6rem; letter-spacing: .12em;
  background: var(--accent-soft); color: var(--accent); border-radius: var(--r-md);
  padding: .6rem 1rem; display: inline-block;
}

.login { max-width: 320px; margin: 15vh auto; text-align: center; }
.login .mark {
  width: 48px; height: 48px; border-radius: var(--r-md); background: var(--accent);
  color: var(--accent-ink); font-size: 1.6rem; font-weight: 700;
  display: grid; place-items: center; margin: 0 auto .8rem;
}
.login .sub { color: var(--muted); font-size: var(--fs-sm); margin: .2rem 0 0; }
.login form { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.login input {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r-sm); padding: .55rem .8rem; font-size: var(--fs-base);
}
.login .btn { align-self: stretch; }

/* ---- money ---- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 800px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .2rem;
}
.tile.bad { border-color: color-mix(in srgb, var(--lost) 40%, var(--line)); }
.tile.bad .tval { color: var(--lost); }
.tile.muted-tile { background: none; box-shadow: none; }
.tval { font-size: 1.4rem; font-weight: 650; letter-spacing: -.02em; }
.tlab { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tsub { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
table.money th, table.money td { font-variant-numeric: tabular-nums; }
table.mini.money td { padding: .3rem .2rem; }
.lineform .row2 { flex-wrap: wrap; }
.lineform label { font-size: var(--fs-xs); }

.invoice { max-width: 720px; }
.inv-head { display: flex; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.co-name { font-size: var(--fs-lg); font-weight: 700; }
.inv-meta { text-align: right; }
.inv-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .05em; color: var(--accent); }
.inv-meta dl { display: grid; grid-template-columns: auto auto; gap: .1rem .8rem; justify-content: end; margin-top: .4rem; font-size: var(--fs-sm); }
.inv-meta dt { color: var(--muted); text-align: right; }
.inv-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.inv-to { margin-bottom: var(--sp-4); font-size: var(--fs-base); }
.inv-totals { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.inv-totals dl { display: grid; grid-template-columns: auto auto; gap: .2rem 1.5rem; min-width: 240px; font-size: var(--fs-base); }
.inv-totals dt { color: var(--muted); }
.inv-totals dd { margin: 0; text-align: right; }
.inv-totals .grand { font-weight: 700; font-size: var(--fs-md); border-top: 1px solid var(--line); padding-top: .3rem; color: var(--ink); }
.inv-note { margin-top: var(--sp-4); }
.inv-bank { margin-top: var(--sp-4); font-size: var(--fs-sm); background: var(--paper); border-radius: var(--r-sm); padding: .7rem .9rem; }
.inv-footer { margin-top: var(--sp-4); font-size: var(--fs-xs); border-top: 1px solid var(--line); padding-top: .6rem; }

/* ---- print: job pages become job sheets ---- */
@media print {
  .top, footer, .search, .tabs, .pager, .editform, .mactions, form, .chip, .datenav, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  main { max-width: none; padding: 0; }
  .panel, .col { box-shadow: none; border: none; break-inside: avoid; padding: 0; }
  .invoice { max-width: none; }
  table.list, table.list th, table.list td { border-color: #999; }
  table.list { box-shadow: none; }
  .notes { max-height: none; overflow: visible; }
  .pill { border: 1px solid #000; color: #000 !important; background: none !important; }
  .inv-title, .co-name { color: #000; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  a { color: #000; text-decoration: none; }
}