/* =========================================================================
   Catt Johnson — Net Sheet Calculator
   Real estate, redefined. // Gig Harbor WA // Neighborhood Experts
   Brand: pure black + clinical white, chartreuse as controlled detonation.
   ========================================================================= */

@font-face {
  font-family: "Glacial Indifference";
  src: url("fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --cj-black:#000; --cj-moss:#3b4033; --cj-white:#fff; --cj-stone:#ddd6d6;
  --cj-chartreuse:#d0e649; --cj-graphite:#1a1a1a; --cj-charcoal:#2a2a2a;
  --cj-iron:#555; --cj-ash:#8a8a8a; --cj-fog:#c4c4c4; --cj-bone:#efebeb; --cj-paper:#f7f5f3;
  --accent:var(--cj-chartreuse); --accent-press:#b8cc3a;
  --rule-hairline:rgba(0,0,0,0.08); --rule-soft:rgba(0,0,0,0.16); --rule-strong:rgba(0,0,0,0.85);

  --ff-display:"Glacial Indifference",Futura,"Helvetica Neue",Arial,sans-serif;
  --ff-cta:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --ff-num:"Glacial Indifference",Futura,"Avenir Next","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Raleway","Glacial Indifference",Futura,"Helvetica Neue",Arial,sans-serif;

  --maxw:1160px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--ff-body); color:var(--cj-black); background:var(--cj-white);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a { color:inherit; }

.disp { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.22em; font-weight:400; }
.cta  { font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; line-height:1; }
.eyebrow { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.18em; font-size:12px; color:var(--cj-ash); }
.num  { font-family:var(--ff-num); font-variant-numeric:tabular-nums; letter-spacing:0.02em; }

/* ---- Header ------------------------------------------------------------ */
.hdr {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:20px clamp(20px,5vw,48px); border-bottom:1px solid var(--cj-black);
}
.hdr .mark { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.22em; font-size:17px; }
.hdr .brand { display:flex; align-items:center; text-decoration:none; }
.hdr .brand:hover { opacity:0.7; }
.hdr .logo-img { height:52px; width:auto; display:block; }
.hdr .dot { width:8px; height:8px; border-radius:999px; background:var(--accent); }
.hdr .spacer { flex:1; }
.hdr .where { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.18em; font-size:11px; color:var(--cj-ash); }

/* ---- Hero -------------------------------------------------------------- */
.hero { background:linear-gradient(180deg, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0.82) 55%, rgba(13,13,13,0.92) 100%), url("assets/hero.jpg"); background-size:cover; background-position:center 30%; color:var(--cj-white); }
.hero .hdr { border-bottom:1px solid rgba(255,255,255,0.14); }
.hero .hdr .eyebrow, .hero .hdr .where { color:rgba(255,255,255,0.62); }
.hero-body { max-width:var(--maxw); margin:0 auto; padding:clamp(28px,5vw,44px) clamp(20px,5vw,48px) clamp(48px,7vw,84px); }
.hero .toggle { border-color:var(--cj-white); margin-bottom:36px; }
.hero .toggle button { background:transparent; color:var(--cj-white); }
.hero .toggle button + button { border-left-color:var(--cj-white); }
.hero .toggle button[aria-pressed="true"] { background:var(--accent); color:var(--cj-black); }
.hero .toggle button:not([aria-pressed="true"]):hover { background:rgba(255,255,255,0.12); }
.hero .title { color:var(--cj-white); margin-bottom:16px; }
.hero .lede { color:rgba(255,255,255,0.74); margin-bottom:0; max-width:56ch; }

/* ---- Shell ------------------------------------------------------------- */
main { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,56px) clamp(20px,5vw,48px) 40px; }

.toggle { display:inline-flex; border:1px solid var(--cj-black); margin-bottom:40px; }
.toggle button {
  font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; font-size:17px;
  background:var(--cj-white); color:var(--cj-black); border:0; padding:14px 34px; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.toggle button + button { border-left:1px solid var(--cj-black); }
.toggle button[aria-pressed="true"] { background:var(--cj-black); color:var(--cj-white); }
.toggle button:not([aria-pressed="true"]):hover { background:var(--cj-paper); }

h1.title { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.22em;
  font-weight:400; font-size:clamp(38px,6vw,72px); line-height:1.04; margin:0 0 16px; }
.lede { font-size:16px; color:var(--cj-iron); max-width:60ch; margin:0 0 36px; }

/* ---- Rate sync strip --------------------------------------------------- */
.sync {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  border-top:1px solid var(--cj-black); border-bottom:1px solid var(--cj-black);
  padding:16px 0; margin-bottom:48px;
}
.sync .dot { width:8px; height:8px; border-radius:999px; background:var(--accent); flex:none; }
.sync .dot.stale { background:var(--cj-ash); }
.sync .label { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.16em; font-size:12px; }
.sync .stamp { font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:13px; color:var(--cj-ash); }
.sync .spacer { flex:1 1 30px; }
.sync button.resync {
  font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; font-size:15px;
  background:var(--cj-black); color:var(--cj-white); border:0; padding:11px 22px; cursor:pointer;
  transition:background .12s ease, color .12s ease; display:inline-flex; align-items:center; gap:10px;
}
.sync button.resync:hover { background:var(--accent); color:var(--cj-black); }
.sync button.resync[disabled] { opacity:.55; cursor:default; }
.sync button.resync .spin { width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:999px; display:none; animation:spin .6s linear infinite; }
.sync.syncing button.resync .spin { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.sync a.detail { font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; font-size:15px;
  color:var(--cj-black); text-decoration:none; cursor:pointer; border:0; background:none; padding:11px 2px; }
.sync a.detail:hover { opacity:.6; }

/* ---- Sources detail (collapsible) ------------------------------------- */
.sources { border:1px solid var(--cj-black); margin:-24px 0 48px; padding:0; overflow:hidden;
  max-height:0; border-width:0; transition:max-height .22s ease; }
.sources.open { max-height:420px; border-width:1px; padding:24px; }
.sources h3 { margin:0 0 16px; }
.src { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--rule-hairline); }
.src:last-child { border-bottom:0; }
.src .sdot { width:7px; height:7px; border-radius:999px; background:var(--accent); flex:none; align-self:center; }
.src .sname { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.12em; font-size:12px; }
.src .scovers { font-size:13px; color:var(--cj-iron); flex:1 1 200px; }
.src .sstamp { font-family:var(--ff-num); font-size:12px; color:var(--cj-ash); }

/* ---- Columns ----------------------------------------------------------- */
.cols { display:flex; flex-wrap:wrap; gap:clamp(32px,4vw,56px); align-items:flex-start; }
.inputs { flex:999 1 500px; min-width:0; }
.summary-col { flex:1 1 340px; min-width:0; position:sticky; top:24px; }

section.group { margin-bottom:40px; }
section.group > h2 { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.20em;
  font-weight:400; font-size:18px; margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--cj-black); }

.frow { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.frow:last-child { margin-bottom:0; }
.field { flex:1 1 210px; min-width:0; }
.field > label, .field > .flabel {
  display:block; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.14em;
  font-size:11px; color:var(--cj-iron); margin-bottom:8px;
}
.ipt { display:flex; align-items:center; border:1px solid var(--rule-soft); background:var(--cj-white); height:54px; }
.ipt:focus-within { border-color:var(--cj-black); }
.ipt .pre, .ipt .suf { color:var(--cj-ash); font-size:16px; flex:none; }
.ipt .pre { padding-left:16px; } .ipt .suf { padding-right:16px; }
.ipt input { flex:1; min-width:0; border:0; outline:0; background:transparent; height:100%;
  padding:0 16px; font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:18px; color:var(--cj-black); }
.ipt input::-webkit-outer-spin-button, .ipt input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.ipt.pulled { background:var(--cj-paper); border:1px dashed rgba(0,0,0,0.28); justify-content:space-between; }
.ipt.pulled .val { padding-left:16px; font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:18px; }
.ipt.pulled .tag { padding-right:16px; font-family:var(--ff-display); letter-spacing:0.12em; font-size:10px; color:var(--cj-ash); }
.fhint { display:block; margin-top:8px; font-size:11px; color:var(--cj-ash); }

/* ---- Summary card ------------------------------------------------------ */
.summary { border:1px solid var(--cj-black); padding:34px 30px; background:var(--cj-white); }
.summary .cap { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.18em; font-size:12px; color:var(--cj-ash); }
.summary .big { font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:clamp(34px,6vw,56px);
  line-height:1; margin:14px 0 10px; white-space:nowrap; overflow:hidden; }
.summary .big.neg { color:#8a2b2b; }
.summary .bar { width:48px; height:3px; background:var(--accent); margin-bottom:26px; }
.brow { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--rule-hairline); }
.brow .k { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.10em; font-size:11px; color:var(--cj-iron); }
.brow .v { font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:16px; white-space:nowrap; }
.brow .k { min-width:0; }
.brow.total { border-bottom:0; border-top:1px solid var(--cj-black); margin-top:6px; padding-top:18px; }
.brow.total .k { color:var(--cj-black); letter-spacing:0.14em; font-size:13px; }
.brow.total .v { font-size:22px; }
.disclaimer { font-size:11px; line-height:1.6; color:var(--cj-ash); margin:18px 2px 0; }

/* ---- Footer ------------------------------------------------------------ */
footer { border-top:1px solid var(--cj-black); background:var(--cj-black); color:var(--cj-white);
  padding:clamp(40px,6vw,72px) clamp(20px,5vw,48px); margin-top:40px; }
footer .fin { max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-end; }
footer .fmark { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.22em; font-size:20px; }
footer .fsub { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.18em; font-size:11px; color:var(--cj-fog); margin-top:8px; }
footer .flogo { height:76px; width:auto; display:block; margin-bottom:4px; }
footer .flink { display:inline-block; margin-top:12px; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.16em; font-size:12px; color:var(--cj-fog); text-decoration:none; }
footer .flink:hover { color:var(--cj-white); }
footer .fspace { flex:1; }
footer a.fcta { font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; font-size:16px;
  color:var(--cj-black); background:var(--accent); text-decoration:none; padding:14px 28px; }
footer a.fcta:hover { background:var(--cj-white); }
footer .fnote { max-width:var(--maxw); margin:28px auto 0; font-size:11px; color:var(--cj-fog); line-height:1.7; }

.error { border:1px solid #8a2b2b; color:#8a2b2b; background:#fbf3f3; padding:14px 18px; font-size:13px; margin-bottom:24px; }

/* ---- deal bar ---------------------------------------------------------- */
.deal { display:flex; flex-wrap:wrap; gap:16px; padding:24px 28px; margin-bottom:40px; border:1px solid var(--cj-black); border-top:4px solid var(--accent); background:var(--cj-paper); }
.deal .field { flex:1 1 200px; }
.deal-head { flex-basis:100%; margin:0 0 2px; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.20em; font-weight:400; font-size:18px; }
.group.key { border:1px solid var(--cj-black); border-top:4px solid var(--accent); background:var(--cj-paper); padding:24px 28px; margin-bottom:40px; }
.group.key > h2 { border-bottom:1px solid var(--rule-soft); }
.ipt.sel { padding:0; position:relative; }
.ipt.sel::after { content:"\25be"; position:absolute; right:16px; color:var(--cj-ash); pointer-events:none; }
.ipt.sel select { flex:1; width:100%; border:0; outline:0; background:transparent; height:52px; padding:0 16px; font-family:var(--ff-num); font-size:17px; color:var(--cj-black); -webkit-appearance:none; appearance:none; cursor:pointer; }
.ipt input[type=date] { font-family:var(--ff-num); font-size:16px; color:var(--cj-black); }

/* ---- auto tag ---------------------------------------------------------- */
.flabel { display:flex; align-items:center; gap:8px; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.14em; font-size:11px; color:var(--cj-iron); margin-bottom:8px; }
.tag { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.12em; font-size:9px; color:var(--cj-ash); border:1px solid var(--rule-soft); padding:2px 6px; line-height:1.4; }
.tag.edited { color:var(--cj-black); border-color:var(--cj-black); background:var(--accent); }

/* ---- add-line + extras ------------------------------------------------- */
.addline { font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; font-size:14px; background:none; border:1px dashed var(--rule-soft); color:var(--cj-iron); padding:13px 18px; cursor:pointer; width:100%; }
.addline:hover { border-color:var(--cj-black); color:var(--cj-black); }
.extras { display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.xrow { display:flex; gap:12px; align-items:center; }
.xrow .x-label { flex:1 1 auto; min-width:0; border:1px solid var(--rule-soft); height:54px; padding:0 16px; font-family:var(--ff-body); font-size:15px; outline:0; background:var(--cj-white); }
.xrow .x-label:focus { border-color:var(--cj-black); }
.xrow .x-amtbox { flex:0 0 150px; }
.xrow .x-del { flex:none; width:44px; height:44px; border:1px solid var(--rule-soft); background:none; font-size:18px; cursor:pointer; color:var(--cj-iron); line-height:1; }
.xrow .x-del:hover { border-color:var(--cj-black); color:var(--cj-black); }

/* ---- print / email actions -------------------------------------------- */
.actions { display:flex; gap:12px; margin-top:16px; }
.act { flex:1; font-family:var(--ff-cta); text-transform:uppercase; letter-spacing:0.10em; font-size:16px; background:var(--cj-white); color:var(--cj-black); border:1px solid var(--cj-black); padding:14px 0; cursor:pointer; transition:background .12s ease, color .12s ease; }
.act:hover { background:var(--cj-black); color:var(--cj-white); }

/* ---- print sheet ------------------------------------------------------- */
#print-sheet { display:none; }
@media print {
  body { background:#fff; }
  body > header, body > main, body > footer { display:none !important; }
  #print-sheet { display:block !important; font-family:var(--ff-body); color:#000; padding:0 8px; }
  .ps-head { border-bottom:2px solid #000; padding-bottom:12px; margin-bottom:20px; }
  .ps-mark { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.22em; font-size:22px; }
  .ps-sub { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.16em; font-size:10px; color:#555; margin-top:6px; }
  .ps-title { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.18em; font-size:16px; margin:0 0 18px; }
  .ps-meta { width:100%; border-collapse:collapse; margin-bottom:22px; }
  .ps-meta td { padding:5px 0; font-size:12px; }
  .ps-meta td:first-child { font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.12em; font-size:10px; color:#555; width:42%; }
  .ps-rows { width:100%; border-collapse:collapse; }
  .ps-rows td { padding:11px 0; border-bottom:1px solid rgba(0,0,0,0.14); font-size:13px; }
  .ps-rows td.pv { text-align:right; font-family:var(--ff-num); font-variant-numeric:tabular-nums; }
  .ps-total td { border-top:2px solid #000; border-bottom:0; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:0.10em; font-size:15px; padding-top:14px; }
  .ps-disc { font-size:10px; color:#555; margin-top:24px; line-height:1.6; }
}

@media (max-width:760px) {
  .summary-col { position:static; }
  h1.title { letter-spacing:0.16em; }
}