/* Leak Check — layout only.
   The look comes from the branded+Flow design system, linked live from
   https://design.brandedandflow.com/brand-truth.css. This file places things:
   grids, columns, order and breakpoints, kept from the package's layout.
   Every colour, size, weight, space and corner below is a system token. */

*{box-sizing:border-box}
[hidden]{display:none!important}
button{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-s);top:var(--space-s);z-index:20;background:var(--panel-white);color:var(--ink-1);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-card)}

/* The dark pieces sit on the light page: point the word and line tokens at
   their on-dark values inside them, the way the system does for its own dark card. */
.sidebar,.bf-card.is-dark,#toast{--fg1:var(--on-dark-1);--fg2:var(--on-dark-2);--fg3:var(--on-dark-3);--fg4:var(--on-dark-3);--note:var(--on-dark-3);--teal-bright:var(--teal-4);--accent-bright:var(--teal-4);--hairline:var(--hairline-on-dark)}

/* ---- the frame: side rail + main ---- */
.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--ground);color:var(--on-dark-2);padding:var(--space-m) var(--space-s);display:flex;flex-direction:column;gap:var(--space-l);position:sticky;top:0;height:100vh}
.brand{display:grid;gap:var(--space-s)}
.wordmark{display:block;width:170px;max-width:100%;height:auto}
.nav{display:grid;gap:var(--space-xs)}
.nav button{text-align:left;background:none;border:0;border-left:2px solid transparent;color:var(--on-dark-3);padding:var(--space-xs) var(--space-s);font-family:var(--font-sans);font-size:var(--fs-small);font-weight:var(--fw-body)}
.nav button.active{border-left-color:var(--teal-3);color:var(--on-dark-1)}
.nav button:focus-visible{outline:2px solid var(--teal-4);outline-offset:2px}
.nav b{margin-right:var(--space-xs);font-family:var(--font-mono);font-weight:var(--fw-label);font-size:var(--fs-small)}
.count{margin-left:var(--space-xs);font-family:var(--font-mono);font-size:var(--fs-small);color:var(--on-dark-1)}
.sidebottom{margin-top:auto;border-top:1px solid var(--hairline-on-dark);padding-top:var(--space-m);color:var(--on-dark-3);font-size:var(--fs-small);line-height:var(--lh-long)}
.sidebottom .bf-status-dot{color:var(--on-dark-2)}

.main{padding:0 var(--space-side) var(--space-l);max-width:1600px;width:100%;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);flex-wrap:wrap;padding:var(--space-s) 0;border-bottom:1px solid var(--hairline-on-light)}
.crumb{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-small)}
.crumb-label{font-family:var(--font-mono);font-weight:var(--fw-label);font-size:var(--fs-small);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--teal-bright)}
.toolbar{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap}

/* ---- the clients panel (where the package had its connection bar) ---- */
.connection-panel{margin-top:var(--space-m)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-m)}
.panel-head p{margin:var(--space-xs) 0}
.inline-form{display:flex;align-items:flex-end;gap:var(--space-s);flex-wrap:wrap}
.inline-form label{display:grid;gap:var(--space-xs);font-size:var(--fs-small)}
.inline-form input{min-width:220px}
.add-client{margin:var(--space-m) 0 var(--space-s)}
.new-link{display:flex;align-items:center;gap:var(--space-s);flex-wrap:wrap;margin-bottom:var(--space-s)}
.new-link code{font-family:var(--font-mono);font-size:var(--fs-small);word-break:break-all}
.rowactions{display:flex;gap:var(--space-xs);flex-wrap:wrap;justify-content:flex-end}

/* ---- page heads ---- */
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-m);padding:var(--space-l) 0 var(--space-m)}
.intro h1{margin:var(--space-s) 0}
.intro h1 em{font-style:normal;font-weight:var(--weight-strong)}
.intro p{max-width:62ch;margin:0;color:var(--fg2)}

/* ---- cards ---- */
.app .bf-card{padding:var(--space-m)}
.bf-card h3+p,.bf-card p+h3{margin-top:var(--space-s)}
.small{font-size:var(--fs-small);line-height:var(--lh-long);color:var(--note)}
.is-missing{color:var(--note)}
.num{font-variant-numeric:tabular-nums;text-align:right}

/* overview: dark lead block, two columns */
.app .hero{display:grid;grid-template-columns:1.25fr 1fr;padding:0;overflow:hidden;margin-bottom:var(--space-m)}
.hero-main{padding:var(--space-m)}
.hero-side{display:flex;flex-direction:column;justify-content:center;gap:var(--space-xs);border-left:1px solid var(--hairline-on-dark);margin:var(--space-m) 0;padding:0 var(--space-m)}
.hero p{font-size:var(--fs-small);line-height:var(--lh-long);color:var(--on-dark-3);max-width:52ch}
/* the one number on the page: brushed gold, thin, tabular */
.big{font-size:var(--fs-h1);font-weight:var(--weight-heading);line-height:var(--lh-heading);font-variant-numeric:tabular-nums;margin:var(--space-s) 0;background:var(--metal-gold);background-blend-mode:var(--metal-gold-blend);-webkit-background-clip:text;background-clip:text;color:transparent}
.cashbar{display:flex;height:13px;overflow:hidden;border-radius:var(--radius-pill);background:var(--hairline-on-dark);margin:var(--space-s) 0}
.cashbar span{width:0;background:var(--metal-teal);background-blend-mode:var(--metal-teal-blend)}
.hero-side strong{font-size:var(--fs-h3);font-weight:var(--weight-heading);color:var(--on-dark-1)}

/* overview: three money cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);margin:var(--space-m) 0 var(--space-l)}
.metric{font-size:var(--fs-h3);font-weight:var(--weight-heading);line-height:var(--lh-heading);font-variant-numeric:tabular-nums;margin:var(--space-s) 0 var(--space-xs)}
.metric.is-missing{font-size:var(--fs-body);font-weight:var(--fw-body)}

/* overview: checkpoints + next move */
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);margin:var(--space-l) 0 var(--space-s)}
.bf-card .sectionhead{margin-top:0}
.gridtwo{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--space-m)}
.leak{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:var(--space-s);padding:var(--space-s) 0;border-bottom:1px solid var(--hairline-on-light)}
.leak:last-child{border-bottom:0}
.icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hairline-on-light);border-radius:var(--radius-card);font-family:var(--font-mono);font-size:var(--fs-small)}
.leak h3{font-size:var(--fs-body);margin:0 0 var(--space-xs)}
.leak .amount{text-align:right;font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.mini{display:block;margin-top:var(--space-xs);font-size:var(--fs-small);color:var(--note)}
.next .number{font-size:var(--fs-h2);font-weight:var(--weight-heading);color:var(--on-dark-3)}
.next h2{font-size:var(--fs-h3);margin:var(--space-s) 0}
.next p{line-height:var(--lh-long)}
.next .bf-btn{margin-top:var(--space-s)}
.app .bf-msgs{margin:var(--space-m) 0}

/* run your check: the 30-day fields, vendor payments, the project table */
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);margin-top:var(--space-s)}
.fields label{display:grid;gap:var(--space-xs);align-content:start;font-size:var(--fs-small)}
.fields input{width:100%}
.vendorcard{margin-top:var(--space-m)}
.vendorcard .sectionhead{margin-top:0}
.tablewrap{position:relative;overflow-x:auto;margin:var(--space-s) 0}
.projects{min-width:1000px}
.vendors{min-width:560px}
.bf-table td input{width:100%;min-width:90px}
.bf-table td:first-child{min-width:180px}
.celltag{display:inline-block;margin-top:var(--space-xs)}
.bf-table th small{display:block;margin-top:var(--space-xs);font-family:var(--font-sans);text-transform:none;letter-spacing:normal;color:var(--note)}
.remove{min-width:0}
.import-label{position:relative;overflow:hidden}
.import-label input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.import-label[aria-disabled="true"]{pointer-events:none;color:var(--note)}

/* fix plan */
.fixcard{margin:var(--space-m) 0}
.fixhead{display:flex;justify-content:space-between;gap:var(--space-m)}
.jobline{margin-top:var(--space-xs)}
#handoffStatus{margin:var(--space-s) 0}
.fixcard h2{font-size:var(--fs-h3);margin:0 0 var(--space-xs)}
.steps{padding-left:var(--space-m);line-height:var(--lh-long)}
.fixmeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-s);margin:var(--space-m) 0}
.fixmeta label{display:grid;gap:var(--space-xs);font-size:var(--fs-small)}
.fixmeta input,.fixmeta select{width:100%}
details{border-top:1px solid var(--hairline-on-light);padding-top:var(--space-s)}
summary{cursor:pointer}
textarea{width:100%;min-height:170px;resize:vertical;line-height:var(--lh-long);margin-top:var(--space-s)}
.copyrow{margin-top:var(--space-s)}
.empty{text-align:center;padding:var(--space-l)}

/* how it works */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-s);margin:var(--space-m) 0}
.flow h3{margin:var(--space-s) 0 var(--space-xs);font-size:var(--fs-h3)}

.foot{display:flex;justify-content:space-between;gap:var(--space-m);margin-top:var(--space-l);padding-top:var(--space-m);border-top:1px solid var(--hairline-on-light);font-size:var(--fs-small);color:var(--note)}
#toast{position:fixed;bottom:var(--space-m);right:var(--space-m);z-index:10;display:none;background:var(--ground);color:var(--on-dark-1);padding:var(--space-s) var(--space-m);border-radius:var(--radius-card)}

/* the explainer */
.explainer-dialog{width:min(940px,94vw);max-height:92vh;overflow:auto;border:0;border-radius:var(--radius-card);padding:var(--space-m);background:var(--panel-white);color:var(--ink-1)}
.explainer-dialog::backdrop{background:var(--scrim)}
.explainer-dialog video{display:block;width:100%;height:auto;background:var(--ground);border-radius:var(--radius-card)}
.explainer-heading{justify-content:space-between}
.explainer-tools{margin:var(--space-s) 0}
.explainer-transcript{max-width:75ch}
.explainer-transcript p{line-height:var(--lh-long)}

@media(max-width:1050px){
 .app{grid-template-columns:190px minmax(0,1fr)}
 .gridtwo{grid-template-columns:1fr}
 .flow{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
 .app{display:block}
 .sidebar{position:static;height:auto;gap:var(--space-s)}
 .brand-label,.sidebottom{display:none}
 .nav{display:flex;overflow-x:auto}
 .nav button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent}
 .nav button.active{border-bottom-color:var(--teal-3)}
 .nav b{display:none}
 .intro,.panel-head,.fixhead,.foot{display:block}
 .intro .bf-btn{margin-top:var(--space-s)}
 .app .hero{grid-template-columns:1fr}
 .hero-side{border-left:0;border-top:1px solid var(--hairline-on-dark);margin:0;padding:var(--space-m)}
 .cards,.fields,.fixmeta{grid-template-columns:1fr}
 .leak{grid-template-columns:30px 1fr auto;gap:var(--space-xs)}
 .inline-form label{width:100%}
 .inline-form input{min-width:0;width:100%}
 .rowactions{justify-content:flex-start}
}
@media(max-width:420px){.flow{grid-template-columns:1fr}}
@media print{
 .sidebar,.toolbar,.connection-panel,textarea,details,#toast{display:none!important}
 .app{display:block}
 .main{padding:0}
 .bf-card{break-inside:avoid}
 body{background:var(--panel-white)}
}