/* BinoTech shell — small, clean, phone-friendly. No framework. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #1c2733;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #b45309;      /* construction amber, from the M-1 mock-up */
  --accent-ink: #ffffff;
  --danger: #b91c1c;
  --success: #15803d;
  --warning: #a16207;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 18px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 14px; }
.nav a { color: var(--ink); padding: 4px 2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.whoami { color: var(--muted); font-size: 14px; text-decoration: none; }
.whoami:hover { color: var(--ink); text-decoration: underline; }

/* Language switcher */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang-btn {
  border: 0; background: var(--surface); color: var(--muted);
  padding: 5px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn.active { background: var(--accent); color: var(--accent-ink); }

/* Layout */
.page { max-width: 1080px; margin: 0 auto; padding: 20px 16px 40px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 19px; margin: 0 0 12px; }
.footer { max-width: 1080px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: 13px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat { text-align: center; }
.stat-number { font-size: 28px; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); margin-top: 20px; }
.empty { color: var(--muted); }

/* Tables */
.table-wrap { padding: 0; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.changes { margin: 6px 0 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-width: 420px; }
details summary { cursor: pointer; color: var(--accent); }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 9px 10px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.help { color: var(--muted); font-size: 13px; margin-top: 3px; }
.errorlist { color: var(--danger); font-size: 13px; margin: 4px 0 0; padding-left: 18px; }
.form-card { max-width: 460px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; }

/* Buttons */
.btn {
  display: inline-block; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink);
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-quiet { background: transparent; }
.btn-block { width: 100%; }
.inline-form { display: inline; }

/* Messages */
.messages { margin-bottom: 16px; }
.message { border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); background: var(--surface); }
.message-error { border-color: var(--danger); color: var(--danger); }
.message-success { border-color: var(--success); color: var(--success); }
.message-warning { border-color: var(--warning); color: var(--warning); }

/* Sign-in */
.auth-card { max-width: 380px; margin: 8vh auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.auth-brand { text-align: center; color: var(--accent); margin: 0 0 4px; font-size: 26px; }
.auth-card h2 { text-align: center; color: var(--muted); font-weight: 500; }
.auth-card-wide { max-width: 480px; }
.auth-foot { text-align: center; margin-top: 14px; }
.setup-steps { padding-left: 20px; margin: 8px 0 14px; }
.setup-steps li { margin: 0 0 10px; }
.qr { margin: 10px 0 6px; }
.qr svg { display: block; max-width: 220px; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.secret { font-size: 15px; letter-spacing: 1px; user-select: all; }
.pilot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.pilot-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); border-left-width: 4px; }
.pilot-tile.ok { border-left-color: #2f8f4e; }
.pilot-tile.bad { border-left-color: #c0392b; }
.pilot-label { color: var(--muted); font-size: 14px; }
.pilot-value { font-size: 28px; font-weight: 700; margin: 4px 0; }
.pilot-unit { font-size: 15px; font-weight: 500; color: var(--muted); }
.pilot-sub { color: var(--muted); font-size: 13px; }
@media (max-width: 720px) { .pilot-grid { grid-template-columns: 1fr; } }
.opening-card { max-width: 560px; }
.opening-table { width: 100%; margin: 6px 0 14px; border-collapse: collapse; }
.opening-table th, .opening-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.opening-table td.num, .opening-table th.num { text-align: right; width: 110px; }
.opening-table input.pct { width: 90px; text-align: right; }
.opening-table tr.has-error td { background: #fff4f1; }
.two-factor-card { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.two-factor-card h2 { margin-top: 0; }
.two-factor-card p { margin: 4px 0; }

@media (max-width: 560px) {
  .topbar-inner { gap: 10px; }
  .nav { order: 3; width: 100%; }
}

/* ===== M1: projects and stages ============================================ */

.nav a.here { color: var(--accent); font-weight: 600; }
.demo-banner {
  background: #fef3c7; color: #78350f; border-bottom: 1px solid #fcd34d;
  text-align: center; font-size: 13px; padding: 6px 16px;
}
.back { display: inline-block; margin-bottom: 4px; font-size: 14px; }
.page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta { color: var(--muted); font-size: 14px; margin-top: 4px; }
.meta b { color: var(--ink); font-weight: 600; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-small { padding: 6px 10px; font-size: 14px; }
.btn-danger { color: var(--danger); border-color: #fecaca; background: var(--surface); }
.section { margin-top: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.section-head h2 { margin: 0; }
.note { color: var(--muted); font-size: 13px; margin: 8px 2px 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.num { text-align: right; }

/* Status chips */
.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.6; white-space: nowrap; background: #eef2f6; color: #475467; vertical-align: middle;
}
.chip-active, .chip-new { background: #dcfce7; color: #166534; }
.chip-planning, .chip-changed { background: #fef3c7; color: #92400e; }
.chip-paused { background: #e0e7ff; color: #3730a3; }
.chip-completed, .chip-unchanged { background: #eef2f6; color: #475467; }
.chip-wrong, .chip-off { background: #fee2e2; color: #991b1b; }
.chip-builtin { background: #e0f2fe; color: #075985; }

/* Tiles: the four numbers on top of a project page */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tile-label { color: var(--muted); font-size: 13px; }
.tile-value { font-size: 26px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tile-value small { font-size: 14px; font-weight: 500; color: var(--muted); }
.tile-sub { color: var(--muted); font-size: 13px; }
.tile-value.bad { color: var(--danger); }

/* Notices: what is still missing from a plan */
.notices { margin-top: 14px; display: grid; gap: 8px; }
.notice {
  border: 1px solid #fcd34d; background: #fffbeb; color: #78350f;
  border-radius: 8px; padding: 9px 14px; font-size: 14px;
}
.notice-bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.notice-info { border-color: var(--line); background: var(--surface); color: var(--ink); }

/* Plan bar */
.bar { position: relative; height: 8px; border-radius: 999px; background: #e9edf2; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: #94a3b8; border-radius: 999px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .bar { flex: 1; min-width: 60px; }
.bar-row .bar-num { font-variant-numeric: tabular-nums; font-size: 14px; min-width: 3.2em; text-align: right; }

/* Project cards on the home page */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pcard { display: block; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pcard:hover { text-decoration: none; border-color: #cbd5e1; box-shadow: 0 1px 6px rgba(15, 23, 42, .06); }
.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pcard-name { font-weight: 700; font-size: 17px; line-height: 1.3; }
.pcard-sub { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }
.pcard-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; margin-top: 10px; flex-wrap: wrap; }
.pcard-foot b { color: var(--ink); }
.pcard-flag { color: #92400e; font-size: 13px; margin-top: 8px; }

/* Tables: totals row, clickable rows */
tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
td.stage-name-cell { min-width: 220px; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: #fafbfc; }
.sub { color: var(--muted); font-size: 13px; font-weight: 400; }
.sub.missing { color: #b45309; }
tr.is-off td { color: var(--muted); }
td.project-cell { min-width: 230px; }
.narrow-only { display: none; }
.missing { color: #b45309; }

/* Forms: two columns on wide screens */
.form-wide { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
textarea {
  width: 100%; padding: 9px 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[type=file] { font-size: 15px; }
input.money { text-align: right; font-variant-numeric: tabular-nums; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.check input { margin-top: 4px; width: 16px; height: 16px; }

/* Stage table editor */
.page-wide { max-width: 1240px; }
.grid-wrap { padding: 0; overflow-x: auto; }
table.grid { font-size: 15px; }
table.grid th, table.grid td { padding: 6px 8px; vertical-align: top; }
table.grid input[type=text] { padding: 7px 8px; font-size: 15px; min-width: 0; }
table.grid td.c-order { width: 108px; white-space: nowrap; }
table.grid input.order { width: 44px; text-align: center; padding-left: 4px; padding-right: 4px; }
table.grid td.c-name { min-width: 260px; }
table.grid td.c-date { width: 128px; }
table.grid td.c-date input { min-width: 112px; }
table.grid td.c-budget { width: 190px; }
table.grid td.c-budget input { min-width: 150px; }
table.grid td.c-del { width: 74px; text-align: center; vertical-align: middle; }
table.grid tr.is-deleted td { background: #fef2f2; }
table.grid tr.is-deleted input[type=text] { text-decoration: line-through; color: var(--muted); }
table.grid tr.is-new td { background: #fafdf7; }
table.grid .errorlist { margin-top: 3px; padding-left: 0; list-style: none; }
.move { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 24px; height: 28px; cursor: pointer; color: var(--muted); padding: 0; font-size: 12px; }
.move:hover { color: var(--ink); border-color: #cbd5e1; }
.no-js .move, .no-js .js-only { display: none; }
.grid-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); }
.grid-totals { font-size: 14px; color: var(--muted); }
.grid-totals b { color: var(--ink); font-variant-numeric: tabular-nums; }
.grid-totals .over { color: var(--danger); }
.savebar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 14px; padding: 10px 14px;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Excel import preview */
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.steps li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.steps li.here { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.was { color: var(--muted); text-decoration: line-through; }
.change { font-size: 13px; }
.change .lbl { color: var(--muted); }
tr.is-wrong td { background: #fef2f2; }
.rowerr { color: var(--danger); font-size: 13px; }

/* Template list */
details.tpl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
details.tpl > summary { padding: 12px 16px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; }
details.tpl > summary::-webkit-details-marker { display: none; }
details.tpl > summary::before { content: "▸"; color: var(--muted); }
details.tpl[open] > summary::before { content: "▾"; }
details.tpl .tpl-name { font-weight: 600; }
details.tpl .tpl-body { border-top: 1px solid var(--line); }
.spacer { flex: 1; }

/* Audit log in plain words */
.audit-lines { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.audit-lines li { margin: 0 0 2px; }
.audit-lines .lbl { color: var(--muted); }
.kind { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 720px) {
  .savebar { position: static; }  /* a sticky bar would cover the rows on a phone */
  .wide-only { display: none; }
  .narrow-only { display: block; }
  td.stage-name-cell { min-width: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile-value { font-size: 22px; }
  .nav { flex-wrap: wrap; row-gap: 2px; }
}

/* ===== M2: daily reports ================================================== */

.warn-text { color: var(--danger); }
.count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; }

/* Fact against plan: the fill is the fact, the tick is the plan */
.bar-fact { overflow: visible; height: 9px; }
.bar-fact .bar-fill { background: var(--accent); }
.bar-plan { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .6; border-radius: 2px; }
.bar-labels { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.bar-labels b { color: var(--ink); }
.list-bar { min-width: 150px; }

/* Project cards: the report of the day */
.pcard { padding: 0; display: flex; flex-direction: column; }
/* The spare height of a card (cards in a row are equally tall) goes above its last line, so the day stays under the bar. */
.pcard-link { display: block; color: var(--ink); padding: 14px 16px 10px; }
.pcard-link:hover { text-decoration: none; }
.pcard-bad { border-color: #fecaca; }
.pcard-day { font-size: 14px; padding: 2px 16px 10px; }
.pcard-day a { color: var(--ink); }
.pcard-day a.warn-text { color: var(--danger); }
.pcard-day a:hover { text-decoration: none; }
.pcard-day a:hover b { text-decoration: underline; }
.pcard-day-label { color: var(--muted); font-size: 13px; }
.pcard-day-row { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.pcard-report { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.pcard-report.bad, .report-cell.bad { color: var(--danger); }
.pcard .pcard-foot { padding: 6px 16px 12px; margin-top: auto; }
.report-cell { font-size: 13px; color: var(--muted); min-width: 170px; }

/* Project page: the reporting line under the tiles */
.report-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.report-status.bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
td.fact { font-weight: 600; }
td.fact.done { color: var(--success); }

/* One day's report */
.rcard { margin-bottom: 10px; }
.rcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.rcard-date { font-weight: 700; font-size: 17px; }
.rcard-workers, .rcard-nowork, .rcard-notes { margin: 6px 0; }
.rcard-nowork { color: #92400e; }
.rcard-notes { border-left: 3px solid var(--line); padding-left: 10px; color: var(--ink); }
table.rcard-stages { font-size: 15px; margin: 4px 0 6px; }
table.rcard-stages td { padding: 6px 0; }
table.rcard-stages td.num { padding-left: 14px; width: 1%; }
.rcard-foot { display: flex; gap: 4px 16px; flex-wrap: wrap; margin-top: 10px; }

/* Problems */
.issue-list { display: grid; gap: 0; padding-top: 2px; padding-bottom: 2px; }
.rcard .issue-list { margin: 8px 0 4px; }
.issue { display: flex; align-items: flex-start; gap: 6px 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); }
.issue:last-child { border-bottom: 0; }
.issue-text { flex: 1 1 220px; min-width: 0; }
.issue.is-resolved .issue-text { color: var(--muted); }
.chip-sev-info { background: #e0f2fe; color: #075985; }
.chip-sev-warning { background: #fef3c7; color: #92400e; }
.chip-sev-critical { background: #fee2e2; color: #991b1b; }
.issue.is-resolved .chip { background: #eef2f6; color: #475467; }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-top: 10px; }
.photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e9edf2; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tag, .photo-date { position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: #fff; background: rgba(10, 20, 30, .6); padding: 1px 7px; border-radius: 999px; }
.photo-date { left: auto; right: 5px; bottom: auto; top: 5px; background: rgba(146, 64, 14, .85); }

/* Telegram link page */
.copy-row { display: flex; gap: 8px; margin: 10px 0; }
.copy-row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; }

@media (max-width: 720px) {
  .rcard-head { flex-direction: column; gap: 2px; }
}

/* M2 review: a pasted link or a long name must not stretch a phone page. */
.issue-text, .rcard-notes, .rcard-nowork, table.rcard-stages td, .pcard-day, .pcard-sub { overflow-wrap: anywhere; }
.issue-list { grid-template-columns: minmax(0, 1fr); }

/* ===== M3: purchases and cash ============================================= */

.nav a.nav-alert { color: var(--danger); font-weight: 600; }
.subnav { display: flex; gap: 4px 18px; flex-wrap: wrap; margin: -4px 0 14px; border-bottom: 1px solid var(--line); }
.subnav a { color: var(--muted); padding: 6px 2px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { text-decoration: none; color: var(--ink); }
.subnav a.here { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

/* The purchases list: tabs by state, one project */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; }
.tabs a:hover { text-decoration: none; border-color: #cbd5e1; }
.tabs a.here { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tab-count { color: var(--muted); font-weight: 400; }
.filter-project { display: flex; gap: 6px; }
.filter-project select { width: auto; max-width: 260px; padding: 6px 8px; font-size: 14px; }
td.purchase-cell { min-width: 220px; overflow-wrap: anywhere; }

/* A purchase's state, a supplier's standing */
.chip-p-pending { background: #fef3c7; color: #92400e; }
.chip-p-approved { background: #e0f2fe; color: #075985; }
.chip-p-paid { background: #dcfce7; color: #166534; }
.chip-p-rejected { background: #fee2e2; color: #991b1b; }
.chip-p-cancelled { background: #eef2f6; color: #475467; }
.chip-t-trusted, .chip-t-approved { background: #dcfce7; color: #166534; }
.chip-t-probation { background: #fef3c7; color: #92400e; }
.chip-t-untrusted, .chip-t-blacklisted { background: #fee2e2; color: #991b1b; }

/* One purchase: its facts, its receipt, the answer */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.big { font-size: 18px; }
.card h3 { font-size: 15px; margin: 16px 0 0; }
.receipts { grid-template-columns: repeat(auto-fill, minmax(120px, 160px)); }
.acard { margin-bottom: 12px; }
.acard .facts { margin-top: 4px; }
.decide { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px; }
details.reject > summary { list-style: none; }
details.reject > summary::-webkit-details-marker { display: none; }
.reject-form { display: grid; gap: 8px; margin-top: 10px; min-width: 240px; max-width: 420px; }
.reject-form label { font-size: 14px; font-weight: 600; }
.card-pad { padding: 4px 16px 16px; }
details.undo > summary { font-size: 14px; }
details.undo form { margin-top: 6px; }

/* Money on the project page and the home cards */
.tiles-money { margin-top: 12px; }
.tile-value.good { color: var(--success); }
td.over, .sub.over { color: var(--danger); font-weight: 600; }
.pcard-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; padding: 10px 16px; border-top: 1px dashed var(--line); color: var(--ink); font-size: 14px; }
.pcard-money > a { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.pcard-money > a:hover { text-decoration: none; }
.pcard-money > a:hover b { text-decoration: underline; }
.pcard-money .lbl { color: var(--muted); font-size: 12px; }
.pcard-money b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-line { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; }

/* Settings: the limits in words, the rates */
.rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.rate-row { display: flex; gap: 6px 24px; flex-wrap: wrap; }
tr.is-current td { background: #fafdf7; }

@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 8px; }
  .filter-project, .filter-project select { width: 100%; max-width: none; }
  span.narrow-only { display: inline; }
  td.purchase-cell { min-width: 0; }
  td.purchase-cell .chip { margin-left: 4px; }
}

/* ===== M4: dashboard and digest =========================================== */

/* What needs attention: red lines first, then amber ones; each opens what is behind it */
.attention { margin-bottom: 22px; }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.flag { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warning); border-radius: 8px; font-size: 15px; }
.flag:hover { text-decoration: none; border-color: #cbd5e1; border-left-color: var(--warning); }
.flag-bad { border-left-color: var(--danger); }
.flag-bad:hover { border-left-color: var(--danger); }
.flag-mark { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--warning); font-size: 12px; font-weight: 700; line-height: 14px; text-align: center; color: #fff; }
.flag-bad .flag-mark { background: var(--danger); border-color: var(--danger); }
.flag-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.flag-go { flex: none; color: var(--muted); font-size: 18px; line-height: 1.2; }
.all-clear { margin: 0 0 22px; padding: 9px 14px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; border-radius: 8px; font-size: 15px; }
.cards-title { margin-top: 0; }

/* Days ahead of the plan or behind it */
.chip-timing-bad { background: #fee2e2; color: #991b1b; }
.chip-timing-good { background: #dcfce7; color: #166534; }
.chip-timing-even { background: #eef2f6; color: #475467; }
.sub.timing-bad { color: var(--danger); font-weight: 600; }
.sub.timing-good { color: var(--success); font-weight: 600; }

/* The project page: the tile's colour for days ahead or behind, a fact far behind its plan */
.tile-value.even { color: var(--ink); }
td.fact.behind { color: var(--danger); }

/* The planned-vs-actual curve. The lines are drawn in a box that stretches
   with the page; the numbers around them are ordinary text placed by
   percentages, so they keep their size on a phone. */
.curve { margin: 0; }
.curve-grid { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 230px auto; column-gap: 8px; padding: 22px 6px 0 0; }
.curve-y { position: relative; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.curve-y span { position: absolute; right: 0; transform: translateY(-50%); }
.curve-plot { position: relative; touch-action: pan-y; cursor: crosshair; border-radius: 2px; }
.curve-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.curve-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curve-lines line, .curve-lines polyline { vector-effect: non-scaling-stroke; }
.curve-gridlines line { stroke: var(--line); stroke-width: 1; }
.curve-gridlines .curve-month { stroke: #f1f4f8; }
.curve-gridlines .curve-base { stroke: #cbd5e1; }
.curve-today-line { stroke: var(--ink); stroke-width: 1; opacity: .4; }
.curve-area { fill: var(--accent); opacity: .1; }
.curve-plan { fill: none; stroke: #64748b; stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; stroke-linecap: round; }
.curve-fact { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curve-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.curve-dot-plan { background: #64748b; }
.curve-dot-fact { background: var(--accent); }
.curve-value { position: absolute; font-size: 13px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); transform: translate(9px, 6px); pointer-events: none; text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface); }
.curve-value.is-above { transform: translate(9px, calc(-100% - 6px)); }
.curve-value.is-left { transform: translate(calc(-100% - 9px), 6px); }
.curve-value.is-left.is-above { transform: translate(calc(-100% - 9px), calc(-100% - 6px)); }
.curve-value.is-level { transform: translate(9px, -50%); }
.curve-value.is-level.is-left { transform: translate(calc(-100% - 9px), -50%); }
.curve-value-fact { color: var(--ink); font-weight: 700; }
.curve-today { position: absolute; top: -20px; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.curve-today.at-left { transform: translateX(-15%); }
.curve-today.at-right { transform: translateX(-85%); }
.curve-x { grid-column: 2; position: relative; height: 36px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.curve-x span { position: absolute; top: 6px; transform: translateX(-50%); text-align: center; line-height: 1.25; }
.curve-x small { display: block; font-size: 11px; }
.curve-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.curve-key { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent); }
.key-plan { border-top: 2px dashed #64748b; }
.curve-now { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.curve-now .timing-bad { color: var(--danger); font-weight: 600; }
.curve-now .timing-good { color: var(--success); font-weight: 600; }
.curve-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ink); opacity: .55; pointer-events: none; }
.curve-tip { position: absolute; top: 6px; z-index: 2; transform: translateX(10px); min-width: 108px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.35; pointer-events: none; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(15, 23, 42, .18); }
.curve-tip.is-left { transform: translateX(calc(-100% - 10px)); }
.curve-tip-date { opacity: .8; font-size: 12px; margin-bottom: 2px; }
.curve-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.curve-tip-row b { min-width: 2.6em; }
.curve-tip-row span { opacity: .85; }
.curve-tip .key { width: 14px; border-top-color: #f5b97a; }
.curve-tip .key-plan { border-top-color: #cbd5e1; }
details.curve-table { margin-top: 10px; font-size: 14px; }
details.curve-table table { margin-top: 8px; max-width: 420px; font-size: 14px; }
details.curve-table th, details.curve-table td { padding: 5px 10px; }

@media (max-width: 720px) {
  .curve-grid { grid-template-rows: 190px auto; grid-template-columns: 26px minmax(0, 1fr); }
  .curve-now { margin-left: 0; flex-basis: 100%; }
}

/* The photo feed: a day's photos, a stage's alone */
.photo-stages { margin-bottom: 14px; }
.photo-day { margin-bottom: 10px; }
.photo-day h2 { font-size: 17px; margin: 0; }

/* Settings: the reminder and the digest */
input.clock { max-width: 110px; font-variant-numeric: tabular-nums; }
.day-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.day-checks .check { font-weight: 400; margin: 0; align-items: center; }
.day-checks .check input { margin-top: 0; }
.notices + .table-wrap { margin-top: 10px; }
@media (max-width: 720px) {
  th.reader-name { width: 46%; }  /* the role and the Telegram status stand under the name */
  th.reader-days { white-space: normal; }  /* two words in two lines: the three columns fit the screen */
}

/* The newest day's photos on the project page: a row to swipe on a phone */
@media (max-width: 720px) {
  .photos-strip { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .photos-strip .photo { flex: 0 0 132px; scroll-snap-align: start; }
}