/* The signed-in shell.
 *
 * Same tokens, fonts and rules as the public site, because a customer who paid
 * should not feel like they crossed into a different company. What changes is
 * density: the public pages are read once and persuade, these are opened
 * repeatedly and report. So: tighter spacing, more tabular figures, status
 * carried in form as well as in words.
 *
 * The two hubs deliberately do NOT look alike beyond this shell. A house is one
 * meter and one number; a business is several meters, a bid round and a ledger.
 * Making them symmetrical would be a lie about the work. */

@font-face{font-family:Archivo;src:url('../fonts/archivo-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}/* ── the bar, with the account switcher that keeps the two apart ───────── */

.switcher{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1.5px solid var(--rule2);background:var(--canvas);padding:6px 13px;
  color:var(--ink2);font-size:14px}
.acct .dot{width:8px;height:8px;border-radius:50%;background:var(--rule2);flex:none}
.acct.on{border-color:var(--ink);color:var(--ink);background:var(--panel);font-weight:600}
.acct.res.on .dot{background:var(--flare)}
.acct.com.on .dot{background:var(--trail)}
.acct:hover{border-color:var(--ink)}
.who{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3)}

/* ── the band that tells you which product you are inside ──────────────── */
.band{border-bottom:1px solid var(--rule)}
.band.res{background:var(--flarebg)}
.band.com{background:var(--trailbg)}
.band .wrap{padding-top:22px;padding-bottom:20px}
.kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin:0 0 8px}
.band.res .kind{color:var(--flare-ink)}
.band.com .kind{color:var(--trail)}
.subline{margin:9px 0 0;color:var(--ink2);font-size:15.5px}

main{padding:24px 0 44px;display:flex;flex-direction:column;gap:22px}
section{background:var(--panel);border:1px solid var(--rule);padding:22px 24px}/* ── numbers ───────────────────────────────────────────────────────────── */

.v.bad{color:var(--flare-ink)}
.v.good{color:var(--good)}/* status carried in shape, not only in words */
/* ── tables ────────────────────────────────────────────────────────────── */

td:last-child,th:last-child{padding-right:0}
tr:last-child td{border-bottom:none}
.num{text-align:right;white-space:nowrap}
tr.pick td{background:var(--trailbg)}
.strong{font-weight:600}

/* ── findings, the shared spine of both reports ────────────────────────── */
.find{border:1px solid var(--rule);padding:17px 19px;margin-bottom:11px;background:var(--canvas)}
.find:last-child{margin-bottom:0}
.find .top{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  flex-wrap:wrap;margin-bottom:6px}
.find h3{margin:0;font-size:17.5px}
.find .amt{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;
  white-space:nowrap;color:var(--flare-ink)}
.find .amt.none{color:var(--ink3);font-size:14px;font-family:var(--body);font-weight:400}
.find p{font-size:14.5px;color:var(--ink2);margin:0 0 7px}
.find .fix{font-size:14.5px;color:var(--ink);margin:0}
.find .fix b{font-weight:600}

/* ── alerts ────────────────────────────────────────────────────────────── */
.alert{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border:1px solid var(--rule);
  margin-bottom:10px;background:var(--canvas)}
.alert:last-child{margin-bottom:0}
.alert.new{border-color:var(--flare);background:var(--flarebg)}
.alert .body{flex:1 1 auto;min-width:0}
.alert h3{font-size:16.5px;margin:0 0 3px}
.alert p{margin:0;font-size:14px;color:var(--ink2)}
.alert .amt{font-family:var(--display);font-weight:800;font-size:17px;white-space:nowrap;
  color:var(--flare-ink)}

/* ── the ledger ────────────────────────────────────────────────────────── */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);
  align-items:baseline;font-size:14.5px}
.ledger li:last-child{border-bottom:none}
.ledger .when{font-family:var(--mono);font-size:11.5px;color:var(--ink3);flex:0 0 88px}
.ledger .what{flex:1 1 auto}
.ledger .amt{font-weight:600;color:var(--good);white-space:nowrap}

.cta{display:inline-block;background:var(--flare-btn);color:#fff;text-decoration:none;
  font-weight:600;padding:11px 20px;border:1px solid var(--flare-btn);font-size:15px}
.cta:hover{background:var(--flare-ink)}
.ghost{display:inline-block;background:none;color:var(--ink);text-decoration:none;font-weight:600;
  padding:11px 20px;border:1.5px solid var(--ink);font-size:15px}
.ghost:hover{background:var(--ink);color:var(--canvas)}
footer p{max-width:80ch;margin:0 0 6px}

.demo{background:var(--ink);color:var(--canvas);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:9px 20px}

@media (max-width:720px){
  section{padding:18px 16px}
  .scroll{margin:0 -16px;padding:0 16px}
  .band .wrap{padding-top:18px;padding-bottom:16px}
  .switcher{width:100%}
  .acct{flex:1 1 auto;justify-content:center}
  .ledger li{flex-wrap:wrap}
  .ledger .when{flex:1 1 100%}
}/* ── the form kit ──────────────────────────────────────────────────────────
   One kit, shared. It lived inside settings.html and again inside bids.html
   with different sizes, so a page added later (the report writer) inherited
   nothing and rendered as raw browser controls. Anything that takes input on
   any Scout screen styles itself from here and nowhere else.

   16px on the control is not a taste decision: below that, iOS Safari zooms the
   whole page when a field takes focus. */

input,select,textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
  padding:10px 12px;border:1.5px solid var(--rule2);background:#fff;color:var(--ink);
  border-radius:3px}
input[type=checkbox]{width:17px;height:17px;padding:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 16px}
.saved{font-size:13.5px;color:var(--good);margin-left:10px}
.failed{font-size:13.5px;color:var(--flare-ink);margin-left:10px}
@media (max-width:700px){ .grid2{grid-template-columns:1fr} }