/* Cribbed from the overhead module (which cribbed from debts), plus what this module adds at the end.
   Every module serves its own /static, so a shared stylesheet would mean N
   copies of one file — the platform nav's styling lives in the shared base
   template for exactly that reason, and module styling stays here. */
:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1c2128; --muted: #6b7280;
  --line: #e2e5ea; --accent: #a97b1f; --accent-ink: #fff;
  --good: #1f9d55; --warn: #b45309; --bad: #b3261e;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  background: #241f14; color: #fff; }
.brand { font-weight: 800; letter-spacing: 1px; color: #fff; font-size: 18px; }
.tagline { color: #a99a74; font-size: 12px; }
.mainnav { margin-left: auto; display: flex; gap: 16px; }
.mainnav a { color: #ddd0af; }
.signout { display: flex; gap: 10px; align-items: center; margin-left: 16px; }
.signout .whoami { color: #a99a74; font-size: 13px; }
.signout button { background: transparent; border: 1px solid #4a4230; color: #ddd0af;
  padding: 4px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }

.wrap { max-width: none; margin: 24px auto; padding: 0 20px; }   /* the window, not a column: owner instruction 2026-09-11 */
h1 { margin: 0 0 4px; } h2 { margin-top: 0; } h3 { margin: 0 0 6px; font-size: 14px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; }
.warn { color: var(--warn); font-size: 12px; }
.crumb { margin: 0 0 8px; color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
/* Every figure in this module is money or a date; tabular numerals keep the
   columns aligned so two balances can be compared by eye. */
.num { font-variant-numeric: tabular-nums; }
.viewonly { border-left: 3px solid var(--line); padding-left: 10px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin: 16px 0; }
.card.nopad { padding: 0; overflow: hidden; }
.card.nopad > summary { padding: 14px 18px; }
.cardhead { padding: 14px 18px 0; }
.cardhint { margin: -6px 0 8px; font-size: 12px; }
.login-card { max-width: 380px; margin: 60px auto; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.grid label, form label, .card label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted); }
label.check, label.inline { flex-direction: row; align-items: center; gap: 6px; }
.card label + label { margin-top: 10px; }
input, select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; color: var(--ink); background: #fff; }

button, .btn { display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: none; padding: 9px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.btn:hover { text-decoration: none; opacity: .92; }
.btn.ghost, .btn.ghost:hover, button.ghost { background: transparent; color: var(--muted);
  border: 1px solid var(--line); }
button.sm, .btn.sm { padding: 4px 10px; font-size: 12px; }
button.danger, .btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
button.ghost.danger { background: transparent; color: var(--bad); border: 1px solid var(--line); }
form.inline { display: inline; }

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; min-width: 130px; display: flex; flex-direction: column; }
.stat .num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: 13px; }

.tbl { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl th { background: #fafbfc; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); }
.tbl th.right, .tbl td.right { text-align: right; }
.tbl.compact th, .tbl.compact td { padding: 6px 10px; font-size: 13px; }
.tbl.flush { border: none; border-radius: 0; }
.tbl tr:last-child td { border-bottom: none; }
/* Projected months are the same table as the actual ones, shaded rather than
   separated: the whole value of the view is reading across the boundary. */
.tbl tr.projected td { background: #faf7f0; color: var(--muted); }
.tbl tr.editing td { background: #fbfaf7; }
td.drift { color: var(--warn); font-weight: 600; }

.titlebar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pricebox { text-align: right; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; }
.pricebox .num { font-size: 22px; font-weight: 700; color: var(--accent); }
.pricebox.big .num { font-size: 28px; }
.pricebox .lbl { color: var(--muted); font-size: 12px; }

.badge { display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
.statusflag { display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; }

/* the four entry forms, side by side until they no longer fit */
.entrygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; align-items: start; }
.entrygrid form { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.entrygrid button { margin-top: 10px; width: 100%; }
.computedhint { font-size: 13px; margin: 0 0 8px; color: var(--muted); }
.recheck { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.eventedit { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.eventedit input { max-width: 150px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: #eef2ff;
  border: 1px solid #d9dffb; }
.flash-warn { background: #fff5e6; border-color: #f0d5a8; color: #92600c; }
.flash-error { background: #fbecec; border-color: #f0bcbc; color: #8f1d16; }
.flash-info { background: #eef2ff; border-color: #d9dffb; color: #33417a; }

details.card.danger { border-color: #f0bcbc; }
details.card.danger summary { color: var(--bad); }
details summary { cursor: pointer; font-weight: 600; }

@media (max-width: 720px) {
  .titlebar { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
}

/* ---- expenses: the month grid and the trend grid ---- */
.monthnav { display: flex; gap: 8px; margin: 0 0 14px; }
.status { display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; border-radius: 999px; padding: 1px 8px; }
.status-recorded  { color: var(--good); border: 1px solid var(--good); }
.status-pending   { color: var(--muted); border: 1px solid var(--line); }
.status-unrecorded{ color: var(--bad); border: 1px solid var(--bad); font-weight: 600; }
/* The unrecorded highlight is the thing this view exists for, so it is a row
   tint and not only a badge. */
.tbl tr.flag td { background: #fdf3f2; }
.tbl td.flag { background: #fdf3f2; }
.tbl tr.grouphead td { background: #faf7f0; font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.tbl tr.subtotal td { font-weight: 600; background: #fbfaf7; }
.tbl tr.total td { font-weight: 700; border-top: 2px solid var(--line);
  background: #faf7f0; }
.quick { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.quick input { max-width: 110px; padding: 4px 6px; font-size: 13px; }
.doublecount { background: #fff8e8; border: 1px solid #f0d5a8; color: #7a5310;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 12px 0; }
.grid .ghost { display: block; font-size: 11px; color: var(--muted); }
.scroller { overflow-x: auto; }
.wrap.wide { max-width: none; }

/* --- billing ------------------------------------------------------------ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.scroll { overflow-x: auto; }
.neg { color: var(--bad); } .pos { color: var(--good); }
.ghost { color: var(--muted); font-size: 12px; }
.badge.bad { color: var(--bad); border-color: var(--bad); }
.exceptions { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--bad); }
.tbl tr.void td { color: var(--muted); text-decoration: line-through; }
.tbl tr.payment td { background: #fbfaf7; font-size: 12px; }
.tbl tr.band td { background: #fff5e6; }
.tbl tr.totals td { font-weight: 600; background: #fafbfc; }
.lockrow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.linklike { color: var(--accent); cursor: pointer; font-size: 13px; display: inline; }
details.inline { display: inline-block; margin-left: 6px; }
details.inline form { margin-top: 6px; }
.hint.ok { color: var(--good); }
.projection td.src-actual { background: #eef7ee; }
.projection td.src-draft { background: #f3f7ee; }
.projection td.src-plan { background: #eef2ff; }
.projection td.src-release { background: #fff0d6; }
.projection td.src-unscheduled { background: #fbecec; }
.projection .badge { font-size: 9px; }
.bars td { padding: 3px 10px; }

/* --- forecast ------------------------------------------------------------ */
.ledger td.gap { background: repeating-linear-gradient(45deg, #fbecec, #fbecec 4px, #fff 4px, #fff 8px); color: var(--muted); }
.ledger tr.past td { background: #fafbfc; }
.ledger tr.now td { border-top: 2px solid var(--accent); }
.ledger td.projected { color: #4b5563; }
.ledger tr.bottom td { font-weight: 600; }
.ledger tr.cash td { background: #f3f7ee; }
.ledger td.warn { color: var(--bad); font-weight: 600; }
.why { cursor: help; border-bottom: 1px dotted var(--muted); }
.chart { width: 100%; height: 220px; display: block; }

/* ---- what the questions module adds ------------------------------------ */
.askbox textarea { width: 100%; min-height: 90px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.askbox .row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.answer { font-size: 16px; line-height: 1.6; }
.answer p { margin: 0 0 12px; }
.answer ul, .answer ol { margin: 0 0 12px 22px; }
.answer table { margin: 6px 0 14px; }
.answer code { background: #f1f2f4; padding: 1px 5px; border-radius: 4px; font-size: 90%; }
.question-text { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: #eef0f3; color: var(--muted); }
.status.pending { background: #fff4d6; color: #8a5a00; }
.status.answered { background: #e3f5ea; color: #1f6b3a; }
.status.failed { background: #fbe4e2; color: #8a1f17; }
.lookup { border-top: 1px solid var(--line); padding: 10px 0; }
.lookup pre { margin: 6px 0 0; padding: 8px 10px; background: #fafbfc; border: 1px solid var(--line);
  border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; }
.lookup .meta { color: var(--muted); font-size: 12px; }
.qlist td { vertical-align: top; }
.catalog { font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; background: #fafbfc;
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; }
.sourcelist { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sourcelist span { padding: 2px 8px; border-radius: 999px; background: #eef0f3; font-size: 12px; }
.sourcelist span.off { background: #fbe4e2; color: #8a1f17; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite;
  vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px;
  background: #eef0f3; color: var(--muted); }
.badge.bad { background: #fbe4e2; color: #8a1f17; }
.flash { padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.flash-error { background: #fbe4e2; color: #8a1f17; }
.flash-ok, .flash-info { background: #e3f5ea; color: #1f6b3a; }
.flash-warn { background: #fff4d6; color: #8a5a00; }

/* ---- what the daily module adds ------------------------------------- */
.roomblock { margin: 14px 0; }
.roomblock h3 { margin: 0 0 4px; font-size: 16px; }
.roomblock h4 { margin: 10px 0 4px; font-size: 14px; color: var(--muted); }
.steps { width: 100%; border-collapse: collapse; }
.steps td, .steps th { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.steps th { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; }
.steps tr.removed td { color: var(--muted); text-decoration: line-through; }
.steps tr.done td { color: #1f6b3a; }
.steps .note-in { width: 100%; padding: 4px 6px; font-size: 13px; }
.steps select { padding: 4px 6px; font-size: 13px; }
.links a { margin-right: 10px; font-size: 12px; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: #eef0f3; color: var(--muted); }
.pill.schedule { background: #e3f5ea; color: #1f6b3a; }
.pill.carried { background: #fff4d6; color: #8a5a00; }
.pill.added { background: #e8eefc; color: #2b4a9e; }
.notes .note { border-top: 1px solid var(--line); padding: 8px 0; }
.notes .note .meta { color: var(--muted); font-size: 12px; }
.gc .note { border-left: 3px solid var(--warn); padding-left: 10px; }
.state.draft { background: #fff4d6; color: #8a5a00; }
.state.planned { background: #e8eefc; color: #2b4a9e; }
.state.closed { background: #e3f5ea; color: #1f6b3a; }
.state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.small { font-size: 12px; }
textarea { width: 100%; min-height: 60px; padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: 8px; }
.inlineform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.report .lane { margin: 6px 0; }
.bar { height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }

/* ---- meetings: the directive forms want room for a sentence */
.eventedit input[name="text"], .eventedit input[name="effect"],
.eventedit input[name="evidence"], .eventedit input[name="check"] { max-width: none; min-width: 22rem; }
.eventedit textarea { min-width: 30rem; }
pre.source { white-space: pre-wrap; font-size: 12px; max-height: 40rem; overflow: auto;
  background: #fbfaf7; padding: 10px; border-radius: 6px; }
.stat .num.warn { color: var(--warn); }
.bulk { padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fbfaf7; }