/* lintel — trades skin. Warm orange brand (AA on white), slate ink, clean + mobile-first. */
:root{
  --ink:#1a2230; --muted:#5c6878; --line:#e2e8f0; --brand:#c2410c; --brand-d:#9a3412;
  --paper:#fff; --soft:#f5f7fa; --bad:#c53030; --good:#2f855a; --warn:#b45309; --info:#1f6feb;
}
*{ box-sizing:border-box; }
body{ font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); margin:0; background:var(--soft); }
a{ color:var(--brand); }
.wrap{ max-width:1040px; margin:0 auto; padding:24px 18px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.center{ text-align:center; }
h1{ font-size:26px; margin:0 0 6px; line-height:1.25; } h2{ font-size:18px; margin:0 0 10px; }
label{ display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input,select,textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
button{ font:inherit; font-weight:600; padding:10px 16px; border-radius:8px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; }
button:hover{ background:var(--brand-d); border-color:var(--brand-d); }
button.ghost{ background:#fff; color:var(--brand); } button.ghost:hover{ background:#fff5f0; }
button.danger{ background:#fff; color:var(--bad); border-color:var(--bad); }
button.sm{ padding:6px 10px; font-size:13px; }
.muted{ color:var(--muted); font-size:13px; }
.pill{ font-size:12px; padding:2px 9px; border-radius:999px; background:var(--soft); border:1px solid var(--line); white-space:nowrap; }
.item{ border-top:1px solid var(--line); padding:12px 0; }
.err{ color:var(--bad); font-size:14px; } .ok{ color:var(--good); }

/* Landing hero */
.hero{ background:linear-gradient(160deg,#1a2230,#2d3748); color:#fff; }
.hero .wrap{ padding:54px 18px 40px; }
.hero h1{ font-size:34px; color:#fff; max-width:760px; }
.hero .lede{ font-size:18px; color:#cbd5e1; max-width:640px; }
.hero .muted{ color:#94a3b8; margin-top:10px; }
.kicker{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fdba74; margin-bottom:10px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 18px; }

/* App top nav */
.topbar{ background:var(--ink); border-bottom:3px solid var(--brand); }
.topbar .wrap{ padding:10px 18px; }
.topbar .brand{ font-weight:800; color:#fff; font-size:17px; }
.topbar a{ color:#cbd5e1; text-decoration:none; font-size:14px; font-weight:600; padding:6px 2px; border-bottom:2px solid transparent; }
.topbar a:hover{ color:#fff; }
.topbar a.active{ color:#fff; border-bottom-color:var(--brand); }
.navlinks{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.topbar .muted{ color:#94a3b8; }

/* KPI strip */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.kpi{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.kpi .n{ font-size:26px; font-weight:800; } .kpi .l{ font-size:13px; color:var(--muted); }
.kpi.alert .n{ color:var(--bad); }

/* Tables */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
td{ padding:10px; border-bottom:1px solid var(--line); }
tr.clickable{ cursor:pointer; } tr.clickable:hover{ background:var(--soft); }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Status pills (shared vocabulary across modules) */
.st{ font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; border:1px solid transparent; }
.st-new,.st-draft,.st-scheduled{ background:#eef2f7; color:#475569; border-color:#dbe3ec; }
.st-contacted,.st-sent{ background:#e6f0fe; color:#1d4ed8; border-color:#c7dbfb; }
.st-quoted,.st-in_progress,.st-part_paid,.st-expiring{ background:#fff4e6; color:#b45309; border-color:#fed7aa; }
.st-won,.st-accepted,.st-complete,.st-paid,.st-valid{ background:#e7f6ec; color:#2f855a; border-color:#c2e8cf; }
.st-lost,.st-declined,.st-cancelled,.st-void,.st-overdue,.st-expired,.st-on_hold{ background:#fdecec; color:#c53030; border-color:#f6cccc; }

/* Modal / drawer */
.modal-bg{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:flex-start; justify-content:center; padding:24px 14px; overflow:auto; z-index:100; }
.modal-bg.open{ display:flex; }
.modal{ background:#fff; border-radius:14px; width:100%; max-width:680px; padding:22px; }

/* Calendar */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cal .dow{ background:var(--soft); font-size:11px; text-transform:uppercase; color:var(--muted); padding:6px 4px; text-align:center; font-weight:700; }
.cal .day{ background:#fff; min-height:94px; padding:4px 5px; }
.cal .day.other{ background:#fafbfc; }
.cal .day.other .dnum{ color:#b6bec9; }
.cal .day.today{ outline:2px solid var(--brand); outline-offset:-2px; }
.cal .dnum{ font-weight:700; font-size:12px; color:var(--muted); }
.cal .jb{ display:block; margin-top:3px; padding:2px 6px; border-radius:5px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid transparent; }
.portal-band{ background:linear-gradient(160deg,#1a2230,#2d3748); color:#fff; }
.portal-band .wrap{ padding:28px 18px; }
@media (max-width:560px){ .cal .day{ min-height:60px; } .cal .jb{ font-size:10px; padding:1px 3px; } }

@media (max-width:820px){ .grid3,.kpis{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .spread{ flex-direction:column; align-items:stretch; } .grid3,.kpis{ grid-template-columns:1fr; } .hero h1{ font-size:27px; } }