/* Comp Blueprint — Annual Income Planner.
   CeCe's standalone mockup, scoped under .comp-tool so its page-level selectors
   (body/header/footer/table/input) don't collide with IC's global styles. The
   page background/grid lives on .comp-tool instead of body; <header>/<footer>
   from the mockup become .ct-header/.ct-foot to avoid clashing with the IC
   site nav and footer. Design values unchanged from the mockup. */

.comp-tool{
  --bg-deep:#0F1B24;
  --grid-line:#1D3A4D;
  --surface:#16262F;
  --surface-2:#1C2E38;
  --copper:#C77B3B;
  --copper-bright:#E39355;
  --teal:#4FB6A8;
  --amber:#E8B34A;
  --danger:#D9634A;
  --text-primary:#EAF2F5;
  --text-muted:#7C95A3;
  --text-faint:#6E8A9B;
  --border:#25404F;

  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/40px 40px,
    var(--bg-deep);
  background-blend-mode: screen, screen, normal;
  color:var(--text-primary);
  font-family:'Space Grotesk', sans-serif;
  padding:28px 20px 60px;
}
.comp-tool *{box-sizing:border-box;}
.comp-tool .ct-wrap{max-width:1180px;margin:0 auto;}

/* header */
.comp-tool .ct-header{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px; border-bottom:1px solid var(--border); padding-bottom:20px;}
.comp-tool .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:0 0 6px;}
.comp-tool h1{font-family:'Archivo', sans-serif; font-weight:800; font-size:30px; margin:0; letter-spacing:-.01em; color:var(--text-primary);}
.comp-tool h1 span{color:var(--copper-bright);}
.comp-tool .sub{color:var(--text-muted); font-size:13.5px; margin-top:6px; max-width:520px; line-height:1.5;}

.comp-tool .goal-box{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; min-width:230px;}
.comp-tool .goal-box label{display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;}
.comp-tool .goal-row{display:flex; gap:10px;}
.comp-tool .field{position:relative; flex:1;}
.comp-tool .field .prefix{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-family:'IBM Plex Mono',monospace; font-size:14px;}
.comp-tool .field .suffix{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-family:'IBM Plex Mono',monospace; font-size:12px;}
.comp-tool input[type=number], .comp-tool select{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  color:var(--text-primary); font-family:'IBM Plex Mono', monospace; font-size:14px;
  padding:9px 10px 9px 22px; outline:none; transition:border-color .15s;
}
.comp-tool select{padding-left:10px; appearance:none; cursor:pointer;}
.comp-tool input[type=number]:focus, .comp-tool select:focus{border-color:var(--copper-bright);}
.comp-tool input[type=number]::-webkit-outer-spin-button,
.comp-tool input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* section titles */
.comp-tool .sect-title{display:flex; align-items:center; gap:10px; margin:34px 0 14px;}
.comp-tool .sect-title .num{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--bg-deep); background:var(--teal); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;}
.comp-tool .sect-title h2{font-family:'Archivo',sans-serif; font-size:15px; font-weight:700; letter-spacing:.01em; margin:0; color:var(--text-primary);}
.comp-tool .sect-title .line{flex:1; height:1px; background:var(--border);}

/* assumptions grid */
.comp-tool .assume-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px;}
.comp-tool .assume-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px 14px;}
.comp-tool .assume-card label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; line-height:1.4;}
.comp-tool .assume-card .implied{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); margin-top:8px;}
.comp-tool .assume-card .implied b{color:var(--teal); font-weight:600;}

/* table */
.comp-tool .table-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface);}
.comp-tool table{border-collapse:collapse; width:100%; min-width:920px; font-family:'IBM Plex Mono', monospace; font-size:12.5px;}
.comp-tool thead th{
  text-align:right; padding:11px 10px; color:var(--text-muted); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); white-space:nowrap;
}
.comp-tool thead th:first-child, .comp-tool tbody td:first-child{text-align:left; position:sticky; left:0; background:var(--surface); z-index:1;}
.comp-tool tbody td{padding:8px 10px; text-align:right; border-bottom:1px solid var(--grid-line); white-space:nowrap;}
.comp-tool tbody tr.future td{color:var(--text-faint);}
.comp-tool tbody tr.current{background:rgba(232,179,74,.07);}
.comp-tool tbody tr.current td:first-child{color:var(--amber); font-weight:600;}
.comp-tool tbody td:first-child{font-family:'Archivo',sans-serif; font-weight:600; color:var(--text-primary); font-size:12.5px;}
.comp-tool tbody input[type=number]{width:64px; text-align:right; padding:5px 6px; font-size:12.5px;}
.comp-tool td.copper{color:var(--copper-bright);}
.comp-tool td.teal{color:var(--teal);}
.comp-tool td.strong{color:var(--text-primary); font-weight:600;}
.comp-tool tfoot td{padding:11px 10px; text-align:right; border-top:2px solid var(--border); font-weight:700; color:var(--text-primary); background:var(--surface-2);}
.comp-tool tfoot td:first-child{text-align:left; position:sticky; left:0; background:var(--surface-2); font-family:'Archivo',sans-serif;}

/* summary cards */
.comp-tool .grid-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:16px;}
.comp-tool .card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; position:relative; overflow:hidden;}
.comp-tool .card .tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; display:block;}
.comp-tool .card .val{font-family:'Archivo',sans-serif; font-size:26px; font-weight:800; line-height:1;}
.comp-tool .card .note{font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.4;}
.comp-tool .card.copper .val{color:var(--copper-bright);}
.comp-tool .card.teal .val{color:var(--teal);}
.comp-tool .card.amber .val{color:var(--amber);}
.comp-tool .card.net{background:linear-gradient(135deg, var(--surface) 0%, #182430 100%); border-color:var(--copper);}
.comp-tool .card.net .val{color:var(--text-primary);}

/* countdown — digital display signature element */
.comp-tool .countdown-card{grid-column:span 1; display:flex; flex-direction:column; align-items:flex-start;}
.comp-tool .digit-row{display:flex; gap:4px; margin-top:2px;}
.comp-tool .digit{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:34px; line-height:1;
  background:#081117; border:1px solid var(--border); border-radius:6px; padding:8px 6px 6px;
  min-width:30px; text-align:center; color:var(--amber); text-shadow:0 0 12px rgba(232,179,74,.55);
}
.comp-tool .digit.zero{color:var(--teal); text-shadow:0 0 12px rgba(79,182,168,.55);}

/* progress trace */
.comp-tool .trace-wrap{margin-top:22px;}
.comp-tool .trace-label{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted); margin-bottom:7px;}
.comp-tool .trace-track{height:10px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; position:relative;}
.comp-tool .trace-fill{height:100%; background:linear-gradient(90deg, var(--copper) 0%, var(--teal) 100%); border-radius:6px; transition:width .3s ease;}

.comp-tool .ct-foot{margin-top:30px; font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; line-height:1.6; border-top:1px solid var(--border); padding-top:14px;}

/* ── Ported sections (pipeline / best-practices / quarterly), CeCe's palette ── */

/* text inputs match the number/select styling */
.comp-tool input[type=text]{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  color:var(--text-primary); font-family:'IBM Plex Mono', monospace; font-size:14px;
  padding:9px 10px; outline:none; transition:border-color .15s;
}
.comp-tool input[type=text]:focus{border-color:var(--copper-bright);}
/* dollar inputs inside a .field carry a $ prefix — give it room, matching the number inputs */
.comp-tool .field input[type=text]{padding-left:22px;}
.comp-tool tbody input[type=text]{width:72px; text-align:right; padding:5px 6px; font-size:12.5px;}

.comp-tool .sect-desc{color:var(--text-muted); font-size:12.5px; margin:-4px 0 14px; line-height:1.55; max-width:720px;}

/* best-practices accordions */
.comp-tool details.practice{background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:10px; overflow:hidden;}
.comp-tool details.practice summary{cursor:pointer; padding:13px 16px; font-family:'Archivo',sans-serif; font-weight:600; font-size:13.5px; color:var(--text-primary); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.comp-tool details.practice summary::-webkit-details-marker{display:none;}
.comp-tool details.practice summary::after{content:'+'; color:var(--copper-bright); font-family:'IBM Plex Mono',monospace; font-size:18px; line-height:1;}
.comp-tool details.practice[open] summary::after{content:'\2013';}
.comp-tool details.practice .practice-body{padding:0 16px 14px;}
.comp-tool details.practice .practice-body ul{margin:0; padding-left:18px; color:var(--text-muted); font-size:12.5px; line-height:1.65;}
.comp-tool details.practice .practice-body li{margin-bottom:7px;}

/* quarterly check-in */
.comp-tool .q-card h4{font-family:'Archivo',sans-serif; margin:0 0 10px; font-size:14px; color:var(--amber);}
.comp-tool .q-card label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:10px 0 5px;}
.comp-tool .qa-list{margin-top:16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 18px;}
.comp-tool .qa-list p{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); margin:0 0 8px;}
.comp-tool .qa-list ul{margin:0; padding-left:18px; color:var(--text-muted); font-size:12.5px; line-height:1.65;}
.comp-tool .qa-list li{margin-bottom:6px;}

/* Mobile: the goal box (target income / tax) fills the width instead of
   floating at its 230px minimum — anchors the header visually on phones. */
@media (max-width: 768px) {
  .comp-tool .goal-box { width: 100%; }
}

/* Mobile: the sticky first column must stay narrow. Long lead-source names
   ("Strategic Partners (GCs, Builders)") are nowrap by default, so the pinned
   column ate ~90% of a phone screen and left a sliver for the scrollable data.
   Cap it and let labels wrap — context stays pinned, data gets the room back. */
@media (max-width: 768px) {
  .comp-tool thead th:first-child,
  .comp-tool tbody td:first-child,
  .comp-tool tfoot td:first-child {
    white-space: normal;
    max-width: 130px;
    min-width: 104px;
    line-height: 1.3;
  }
}

/* ── Per-deal gross → net breakout (cards 2–4), added 2026-09-15 ── */
.comp-tool .assume-split{display:flex; gap:10px; align-items:flex-start;}
.comp-tool .assume-split .assume-col{flex:1; min-width:0;}
.comp-tool .assume-split .assume-pct{flex:0 0 74px;}
.comp-tool .mini-label{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0 0 4px;}
.comp-tool .mini-label--net{margin-top:8px; color:var(--teal);}
/* Net is computed, not typed: darker inset field, teal figure to read as profit. */
.comp-tool .field--net input{background:var(--surface); color:var(--teal); font-weight:600; cursor:default;}
.comp-tool .field--net input:focus{border-color:var(--border);}
.comp-tool .field--net .prefix{color:var(--teal);}

/* ── Roadmap rebuild 2026-09-15: take-home in, deals out ── */
.comp-tool .goal-sub{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal); margin-top:6px; line-height:1.4;}
.comp-tool .sect-desc{color:var(--text-muted); font-size:13px; margin:-6px 0 14px; line-height:1.5; max-width:720px;}
.comp-tool .job-grid{grid-template-columns:repeat(auto-fit, minmax(300px,1fr));}
.comp-tool .job-row{display:flex; gap:8px; align-items:flex-start;}
.comp-tool .job-field{flex:1; min-width:0;}
.comp-tool .job-note{font-size:11.5px; color:var(--text-muted); margin-top:9px; line-height:1.45;}
.comp-tool .margin-pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:rgba(79,182,168,.14); color:var(--teal); border:1px solid rgba(79,182,168,.35);}
.comp-tool .margin-pill.neg{background:rgba(199,123,59,.16); color:var(--copper-bright); border-color:rgba(199,123,59,.4);}
.comp-tool .job-summary{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-top:12px;}
.comp-tool .job-summary > div{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;}
.comp-tool .job-summary .k{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); flex-basis:100%;}
.comp-tool .job-summary .v{font-family:'Archivo',sans-serif; font-size:22px; font-weight:800; color:var(--text-primary);}
.comp-tool .job-summary .v.teal{color:var(--teal);}
.comp-tool .job-summary .k2{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-muted);}
.comp-tool .job-summary .k2.teal{color:var(--teal);}
.comp-tool .answer-grid{grid-template-columns:minmax(260px,1.3fr) repeat(auto-fit, minmax(200px,1fr));}
.comp-tool .answer-card{border-color:var(--amber); background:linear-gradient(135deg, var(--surface) 0%, #1b2a2a 100%); display:flex; flex-direction:column; align-items:flex-start;}
.comp-tool .answer-card .digit{font-size:44px; min-width:38px; padding:10px 8px 8px;}
.comp-tool .how{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-muted); line-height:1.6; margin:12px 0 0; max-width:860px;}
@media (max-width: 640px){
  .comp-tool .job-row{flex-wrap:wrap;}
  .comp-tool .job-field{flex:1 1 calc(50% - 4px);}
  .comp-tool .job-field:last-child{flex-basis:100%;}
  .comp-tool .answer-grid{grid-template-columns:1fr;}
}

/* ── Instrument cluster (section 4), added 2026-09-15 ── */
.comp-tool .dash{display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.4fr) minmax(220px,1fr); gap:14px; margin-top:18px; align-items:stretch;}
.comp-tool .dial{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 14px 12px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.comp-tool .gauge{width:100%; max-width:230px; height:auto; display:block;}
.comp-tool .g-track{fill:none; stroke:var(--surface-2); stroke-width:14;}
.comp-tool .g-fill{fill:none; stroke:var(--teal); stroke-width:14; stroke-dasharray:0 260; transition:stroke-dasharray .35s ease;}
.comp-tool .g-band{fill:none; stroke-width:14;}
.comp-tool .g-green{stroke:rgba(79,182,168,.75);}
.comp-tool .g-amber{stroke:rgba(232,179,74,.85);}
.comp-tool .g-red{stroke:rgba(217,99,74,.85);}
.comp-tool .g-needle{stroke:var(--text-primary); stroke-width:3; stroke-linecap:round;}
.comp-tool #tankNeedle, .comp-tool #paceNeedle{transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.comp-tool .g-hub{fill:var(--text-primary); stroke:var(--bg-deep); stroke-width:2;}
.comp-tool .g-tick{stroke:var(--text-primary); stroke-width:2.5; stroke-linecap:round;}
.comp-tool .g-lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; fill:var(--text-muted); font-weight:600;}
.comp-tool .dial-val{font-family:'Archivo',sans-serif; font-size:30px; font-weight:800; line-height:1; margin-top:-6px; color:var(--text-primary);}
.comp-tool .dial-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-top:6px; line-height:1.4;}
.comp-tool .dial-note{font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.45;}
.comp-tool .verdict{background:linear-gradient(135deg, var(--surface) 0%, #182430 100%); border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; flex-direction:column; justify-content:center;}
.comp-tool .verdict-word{font-family:'Archivo',sans-serif; font-size:40px; font-weight:800; letter-spacing:.02em; line-height:1;}
.comp-tool .verdict-word.coast{color:var(--teal); text-shadow:0 0 18px rgba(79,182,168,.35);}
.comp-tool .verdict-word.plan{color:var(--amber); text-shadow:0 0 18px rgba(232,179,74,.35);}
.comp-tool .verdict-word.hustle{color:var(--danger); text-shadow:0 0 18px rgba(217,99,74,.4);}
.comp-tool .verdict-word.done{color:var(--teal);}
.comp-tool .verdict-line{font-size:13px; color:var(--text-primary); margin-top:10px; line-height:1.5;}
.comp-tool .paces{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px;}
.comp-tool .paces > div{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px;}
.comp-tool .paces .k{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px;}
.comp-tool .paces .v{font-family:'Archivo',sans-serif; font-size:20px; font-weight:800; color:var(--text-primary);}
.comp-tool .paces .u{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-muted); margin-left:3px;}
.comp-tool .forecast{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.5;}
.comp-tool .forecast b{color:var(--text-primary); font-weight:600;}
.comp-tool .forecast b.over{color:var(--teal);}
.comp-tool .forecast b.short{color:var(--danger);}
@media (max-width: 860px){ .comp-tool .dash{grid-template-columns:1fr 1fr;} .comp-tool .verdict{grid-column:1 / -1; order:-1;} }
@media (max-width: 560px){ .comp-tool .dash{grid-template-columns:1fr;} .comp-tool .verdict-word{font-size:34px;} .comp-tool .paces{gap:6px;} .comp-tool .paces .v{font-size:17px;} }