/* ============================================================================
   Construction OS — shared design system ("the drafting set")
   One token sheet + one component kit for every screen. Pages add only their
   own layout on top. Identity: graphite iron + drafting amber; Saira for
   structure, Inter for prose, IBM Plex Mono for anything that is money or ID.
   ========================================================================== */

:root{
  /* iron (dark ground) */
  --iron-950:#101317; --iron-900:#14181d; --iron-800:#1a1f26; --iron-750:#20262e;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15);
  --chalk:#edf1f6; --steel:#8f99a8; --steel-dim:#5f6875;
  --amber:#ffb000; --amber-deep:#d98b00; --amber-ink:#1a1206;
  --level:#46c28e; --flag:#ef5e52; --info:#58a8e8;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 16px 34px -22px rgba(0,0,0,.75);
  --r:10px; --r-sm:8px;
  /* aliases kept for older markup */
  --graphite:var(--iron-950); --graphite-2:var(--iron-900); --slate:var(--iron-800);
  --concrete:var(--steel); --concrete-dim:var(--steel-dim);
}
body[data-theme="light"]{
  --iron-950:#eceded; --iron-900:#f4f5f4; --iron-800:#ffffff; --iron-750:#f2f3f4;
  --line:rgba(21,28,38,.11); --line-strong:rgba(21,28,38,.2);
  --chalk:#151b23; --steel:#57626f; --steel-dim:#8a93a0;
  --amber:#c97e00; --amber-deep:#a56500; --amber-ink:#241500;
  --level:#178a55; --flag:#d83a2e; --info:#256fae;
  --shadow:0 1px 2px rgba(21,28,38,.06),0 16px 30px -24px rgba(21,28,38,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--iron-950); color:var(--chalk);
  font-family:"Inter",system-ui,sans-serif; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
::selection{background:rgba(255,176,0,.28)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ---- type utilities ---- */
.eyebrow{font-family:"Saira";text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:11px;color:var(--steel)}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.tiny{font-size:11px;color:var(--steel-dim)}
.qid{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--steel-dim);letter-spacing:.02em;white-space:nowrap}
.err{color:var(--flag);font-size:11.5px}
.pos{color:var(--level)}.neg{color:var(--flag)}
.n-zero{color:var(--steel-dim)}
small.cents{font-size:.72em;opacity:.62;letter-spacing:0}

/* ---- panels: every card in the set ---- */
.panel{background:var(--iron-800);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden}
.panel>.head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.panel>.head h2{font-family:"Saira";text-transform:uppercase;letter-spacing:.11em;font-size:12.5px;font-weight:600;margin:0}
.panel>.head .title{display:flex;align-items:center;gap:9px}
.panel>.head .count{font-family:"IBM Plex Mono";font-size:11px;color:var(--steel-dim);border:1px solid var(--line);padding:1px 8px;border-radius:20px;font-variant-numeric:tabular-nums}
.panel .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- the levelline: sheet divider (drawing sets are numbered sheets) ---- */
.levelline{display:flex;align-items:center;gap:12px;margin:30px 2px 14px}
.levelline .sheet{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.08em;color:var(--amber);border:1px solid rgba(255,176,0,.4);border-radius:4px;padding:2px 7px;white-space:nowrap}
.levelline .txt{font-family:"Saira";text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--steel);white-space:nowrap;font-weight:600}
.levelline .ln{flex:1;height:1px;background:var(--line);position:relative}
.levelline .ln::after{content:"";position:absolute;left:0;top:-3px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--amber)}
.levelline .note{font-size:11.5px;color:var(--steel-dim);white-space:nowrap}
@media(max-width:700px){.levelline .note{display:none}}

/* ---- buttons ---- */
.btn{font-family:"Saira";text-transform:uppercase;letter-spacing:.07em;font-size:12px;font-weight:600;border-radius:var(--r-sm);padding:9px 16px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .13s,border-color .13s,color .13s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--amber);color:var(--amber-ink)}
.btn.primary:hover{background:var(--amber-deep)}
.btn.ghost{background:transparent;color:var(--steel);border-color:var(--line-strong)}
.btn.ghost:hover{color:var(--chalk);border-color:var(--steel-dim)}
.btn.status{background:rgba(70,194,142,.09);color:var(--level);border-color:rgba(70,194,142,.32);cursor:default}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.mini{margin-top:0;padding:6px 11px;font-size:11px;width:auto}

/* ---- pills: one shape for every status in the system ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.01em}
.pill .d{width:6px;height:6px;border-radius:50%}
.pill.synced,.pill.paid,.pill.won,.pill.invoiced,.pill.ok{color:var(--level);background:rgba(70,194,142,.11)}
.pill.synced .d,.pill.paid .d,.pill.won .d,.pill.invoiced .d,.pill.ok .d{background:var(--level)}
.pill.pending,.pill.partial,.pill.sent{color:var(--amber);background:rgba(255,176,0,.11)}
.pill.pending .d,.pill.partial .d,.pill.sent .d{background:var(--amber)}
.pill.error,.pill.risk{color:var(--flag);background:rgba(239,94,82,.12)}
.pill.error .d,.pill.risk .d{background:var(--flag)}
.pill.open{color:var(--info);background:rgba(88,168,232,.11)}.pill.open .d{background:var(--info)}
.pill.draft{color:var(--steel);background:rgba(143,153,168,.13)}.pill.draft .d{background:var(--steel)}
.pill.void,.pill.lost{color:var(--steel-dim);background:rgba(143,153,168,.09)}
.pill.void .d,.pill.lost .d{background:var(--steel-dim)}
.kind{font-family:"Saira";font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim);border:1px solid var(--line);border-radius:20px;padding:2px 8px;white-space:nowrap}

/* ---- tables: the ledger surface ---- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:"Saira";text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--steel-dim);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover{background:rgba(255,255,255,.025);box-shadow:inset 2px 0 0 rgba(255,176,0,.55)}
body[data-theme="light"] tbody tr:hover{background:rgba(21,28,38,.035)}
td.num,th.num{font-family:"IBM Plex Mono",monospace;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12.5px}
td.doc{color:var(--chalk);font-size:12.5px;white-space:nowrap}
td.empty,.emptycell{color:var(--steel-dim);padding:22px 16px !important;font-size:13px}
.detrow{background:var(--iron-900)}
.detrow td{padding:14px 18px}
.detrow:hover{box-shadow:none !important}

/* ---- forms ---- */
label{display:block;font-size:11px;letter-spacing:.05em;color:var(--steel);margin:10px 0 5px;text-transform:uppercase;font-family:"Saira";font-weight:500}
input,select,textarea{width:100%;background:var(--iron-950);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--chalk);font-family:"Inter";font-size:13.5px;padding:9px 11px;transition:border-color .12s}
body[data-theme="light"] input,body[data-theme="light"] select,body[data-theme="light"] textarea{background:var(--iron-800)}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber)}
input.mini{padding:6px 8px;font-size:12.5px;width:112px;text-align:right;border-color:var(--line-strong);margin-bottom:0;font-family:"IBM Plex Mono";font-variant-numeric:tabular-nums}
input.search{width:190px;padding:6px 10px;font-size:12.5px;border-color:var(--line-strong)}

/* collapsed create forms */
.newform{display:none;border-bottom:1px solid var(--line);padding:16px 18px;background:var(--iron-900)}
.newform.show{display:block;animation:formIn .18s ease-out}
@keyframes formIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.newform .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.newform label{margin-top:0}

/* ---- tabs + chips ---- */
.tabs{display:flex;gap:6px}
.tab{font-family:"Saira";text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;border:1px solid var(--line);background:transparent;color:var(--steel);border-radius:20px;padding:5px 13px;cursor:pointer;transition:all .12s}
.tab:hover{color:var(--chalk);border-color:var(--line-strong)}
.tab.on{color:var(--amber-ink);background:var(--amber);border-color:var(--amber)}
.chip{font-family:"Saira";text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600;border:1px solid var(--line-strong);border-radius:20px;padding:5px 12px;cursor:pointer;background:transparent;color:var(--steel);transition:all .12s}
.chip:hover{color:var(--chalk)}
.chip.ok{color:var(--level);border-color:rgba(70,194,142,.4)}
.chip.warn{color:var(--amber);border-color:rgba(255,176,0,.45)}

/* ---- banner ---- */
.banner{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:20px;font-size:13px;flex-wrap:wrap}
.banner .bdot{width:9px;height:9px;border-radius:50%;flex:none}
.banner .txt{flex:1}.banner .txt b{font-weight:600}.banner .txt span{color:var(--steel)}
.banner.live{background:rgba(70,194,142,.07);border-color:rgba(70,194,142,.3)}
.banner.live .bdot{background:var(--level);box-shadow:0 0 0 3px rgba(70,194,142,.15)}
.banner.off{background:rgba(239,94,82,.07);border-color:rgba(239,94,82,.3)}.banner.off .bdot{background:var(--flag)}
.banner.demo{background:rgba(255,176,0,.06);border-color:rgba(255,176,0,.26)}.banner.demo .bdot{background:var(--amber)}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--iron-800);border:1px solid var(--line-strong);border-radius:9px;padding:11px 16px;font-size:13px;box-shadow:0 14px 40px -14px rgba(0,0,0,.85);display:none;max-width:90vw;z-index:60}
#toast.show{display:block;animation:toastIn .16s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
#toast.bad{border-color:rgba(239,94,82,.55)}
#toast.good{border-color:rgba(70,194,142,.55)}

/* ---- health cells / recon ---- */
.health{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 18px}
@media(max-width:680px){.health{grid-template-columns:1fr}}
.hcell{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.hcell .t{font-family:"Saira";text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--steel-dim);margin-bottom:8px}
.hcell .nums{display:flex;gap:14px;font-family:"IBM Plex Mono";font-size:13px;font-variant-numeric:tabular-nums}
.hcell .nums b{font-weight:600}
.n-synced{color:var(--level)}.n-pending{color:var(--amber)}.n-error{color:var(--flag)}
.recon{padding:0 18px 16px;font-family:"IBM Plex Mono";font-size:12px;color:var(--steel)}

/* ---- lines editor ---- */
.lines{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-top:6px;background:var(--iron-950)}
body[data-theme="light"] .lines{background:var(--iron-800)}
.lines table{margin:0}
.lines th{background:transparent}
.lines td{padding:5px 6px;border-bottom:1px solid var(--line)}
.lines tbody tr:hover{background:transparent;box-shadow:none}
.lines input{padding:6px 8px;font-size:12.5px;border-color:transparent;background:transparent}
.lines input:focus{border-color:var(--amber);background:var(--iron-950)}
.lines .rm{color:var(--steel-dim);cursor:pointer;font-size:15px;padding:0 6px;background:none;border:none}
.lines .rm:hover{color:var(--flag)}
.linetotal{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--steel);text-align:right;padding:8px 4px 0;font-variant-numeric:tabular-nums}

/* ---- pipeline strip ---- */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0}
@media(max-width:760px){.pipe{grid-template-columns:repeat(2,1fr)}.pcell{border-bottom:1px solid var(--line)}}
.pcell{border-right:1px solid var(--line);padding:14px 16px}
.pcell:last-child{border-right:none}
.pcell .t{font-family:"Saira";text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--steel-dim)}
.pcell .v{font-family:"IBM Plex Mono";font-size:19px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.pcell .s{font-size:11px;color:var(--steel-dim);font-family:"IBM Plex Mono";font-variant-numeric:tabular-nums}

/* ---- section nav (manage) ---- */
.secnav{position:sticky;top:0;z-index:30;display:flex;gap:6px;padding:10px 0;margin:0 0 6px;background:linear-gradient(180deg,var(--iron-950) 78%,transparent);overflow-x:auto;scrollbar-width:none}
.secnav::-webkit-scrollbar{display:none}
.secnav a{font-family:"Saira";text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;font-weight:600;color:var(--steel-dim);text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:5px 12px;white-space:nowrap;transition:all .12s}
.secnav a:hover{color:var(--amber);border-color:rgba(255,176,0,.4)}
.secnav a .s{font-family:"IBM Plex Mono";font-size:9.5px;color:var(--amber);margin-right:5px;letter-spacing:0}

/* ---- page load sequence (quiet, engineered) ---- */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;transform:translateY(6px);animation:rise .34s ease-out forwards}
  .rise:nth-child(2){animation-delay:.04s}.rise:nth-child(3){animation-delay:.08s}
  .rise:nth-child(4){animation-delay:.12s}.rise:nth-child(5){animation-delay:.16s}
  .rise:nth-child(6){animation-delay:.2s}.rise:nth-child(7){animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---- trust footer line ---- */
.trust{color:var(--steel-dim);font-size:12px;text-align:center;margin-top:36px}
.trust b{color:var(--steel)}