/* ============================================================
   GATHERCIRCLE — SHARED TOOL STYLESHEET
   Served once at the domain root; every tool at /<tool-name> loads it from there.
   Edit here once; scripts/build-site.sh copies it into site/ on every deploy.

   OFFICIAL BRAND TOKENS (brand guide, Aug 2025)
   Primary palette only: Matte Black, Bone White, Circle Blue.
   Do NOT introduce Freedom Green / Energy Orange / Legacy Gold here.
   ============================================================ */
:root{
  --ink:        #1E1E1E;   /* Matte Black */
  --ink-2:      #3A3A3A;
  --paper:      #F1F1F1;   /* Bone White */
  --card:       #FFFFFF;
  --line:       #E2E2E2;
  --line-2:     #EDEDED;
  --muted:      #6E6E6E;
  --accent:     #007AFF;   /* Circle Blue — the defining brand color */
  --accent-2:   #0062CC;
  --accent-soft:#E4F0FF;
  --shadow-sm:  0 1px 2px rgba(30,30,30,.05);
  --shadow:     0 2px 4px rgba(30,30,30,.04), 0 12px 40px rgba(30,30,30,.08);
  --radius:     16px;
  --maxw:       1180px;
  --sans:       'AF Neue York', 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:       'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
}
@font-face{font-family:'AF Neue York';src:url('/fonts/AFNeueYork-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'AF Neue York';src:url('/fonts/AFNeueYork-Regular.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'AF Neue York';src:url('/fonts/AFNeueYork-SemiBold.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.12}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- Masthead: logo + tool title in one compact dark block ---------- */
header.site{background:var(--ink);color:#fff;padding:18px 0 92px}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px}
.brandbar .logo{height:25px;width:auto;display:block;object-fit:contain}
.brandbar .badge{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8E8E8E;font-weight:700;border:1px solid #3A3A3A;border-radius:999px;padding:5px 11px;white-space:nowrap}
header .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
header h1{font-size:clamp(27px,4.2vw,40px);margin-top:11px;font-weight:600}
header .sub{max-width:600px;margin-top:12px;color:#B8B8B8;font-size:15.5px}

main.wrap{position:relative;z-index:2;margin-top:-64px;padding-bottom:34px}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:28px 28px 30px}
.card-title{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:9px}
.card-title::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.subhead{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:26px 0 14px;padding-top:22px;border-top:1px dashed var(--line)}

/* ---------- Fields ---------- */
.field{margin-bottom:15px}
.field label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field .hint{font-weight:400;color:var(--muted);font-size:12px}
.tip{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--line);color:var(--muted);font-size:10.5px;font-weight:700;cursor:help;flex:none;-webkit-tap-highlight-color:transparent;position:relative;transition:.12s;outline:none}
.tip:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
@media(hover:none){.tip{cursor:pointer}}
/* enlarge the touch target without changing the visual size */
.tip::after{content:"";position:absolute;top:-9px;left:-9px;right:-9px;bottom:-9px}
.tip:hover,.tip.active{background:var(--accent);color:#fff}
#tipPop{position:absolute;display:none;box-sizing:border-box;background:var(--ink);color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:400;line-height:1.5;padding:12px 34px 12px 15px;border-radius:11px;box-shadow:0 12px 34px rgba(30,30,30,.34);z-index:9999}
#tipPop button{position:absolute;top:7px;right:7px;width:20px;height:20px;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#tipPop button:hover{background:rgba(255,255,255,.32)}
.iwrap{position:relative;display:flex;align-items:center}
.iwrap .pre,.iwrap .suf{position:absolute;color:var(--muted);font-size:14px;font-weight:600;pointer-events:none}
.iwrap .pre{left:14px}.iwrap .suf{right:14px}
input,select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-weight:500;color:var(--ink);background:#fff;font-family:var(--mono);transition:.15s;outline:none;-moz-appearance:textfield}
select{font-family:var(--sans);font-weight:600}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.iwrap.pre-on input{padding-left:28px}.iwrap.suf-on input{padding-right:36px}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[readonly]{background:var(--paper);color:var(--muted);cursor:default;border-style:dashed}
input[readonly]:focus{border-color:var(--line);box-shadow:none}
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;width:100%}
.seg button{flex:1;border:0;background:transparent;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--sans);transition:.12s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.seg button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.computed{background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--muted);margin-top:4px}
.computed b{color:var(--ink);font-size:15px;font-family:var(--mono);font-weight:600;white-space:nowrap}
.offset-note{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.45}
.offset-note b{color:var(--ink);font-family:var(--mono);font-weight:600}

/* qualification / callout banner */
.gate{margin-top:6px;font-size:12.5px;line-height:1.5;border-radius:10px;padding:12px 14px;border:1px solid}
.gate.ok{background:var(--accent-soft);border-color:#CFE4FF;color:var(--ink)}
.gate.warn{background:#FFF4E5;border-color:#FFE0B2;color:#5A4322}
.gate b{font-weight:700}
.gate em{font-style:normal;font-weight:700}
.statenote{margin-top:9px;font-size:12px;color:var(--muted);line-height:1.45}
.statenote.warn{color:#8A5A18;font-weight:500}

/* ---------- Results ---------- */
.results{background:linear-gradient(180deg,#fff,var(--paper))}
.rhero{background:var(--ink);color:#fff;border-radius:13px;padding:24px;text-align:center;margin-bottom:16px}
.rhero .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9E9E9E;font-weight:700}
.rhero .v{font-family:var(--mono);font-size:clamp(34px,6.4vw,50px);font-weight:700;letter-spacing:-.03em;color:var(--accent);margin-top:6px;line-height:1}
.rhero .sub{font-size:12px;color:#9E9E9E;margin-top:9px}
.rrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line-2)}
.rrow:last-of-type{border-bottom:0}
.rrow .lab{font-size:13.5px;color:var(--ink-2);font-weight:600}
.rrow .lab small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;margin-top:1px}
.rrow .num{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rrow.hl .num{color:var(--accent)}
.rrow.pos .num{color:var(--accent)}
.rrow.neg .num{color:#B4423A}
.pdfbtn{width:100%;margin-top:20px;background:#fff;border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:14.5px;padding:14px;border-radius:11px;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:9px;transition:.15s;-webkit-tap-highlight-color:transparent}
.pdfbtn:hover{background:var(--ink);color:#fff}
.pdfbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.disc-mini{font-size:11px;color:var(--muted);text-align:center;margin-top:13px;line-height:1.55}

/* ---------- Step tabs (multi-part tools) ---------- */
.tabs{display:flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:24px}
.tabs button{flex:1;border:0;background:transparent;padding:11px 8px;border-radius:9px;font-family:var(--sans);
  font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:.14s;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.tabs button i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;width:18px;height:18px;border-radius:50%;
  background:var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none;transition:.14s}
.tabs button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.tabs button.active i{background:var(--accent);color:#fff}
[data-panel]{display:none}
[data-panel].on{display:block}
.navrow{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px dashed var(--line)}
.navrow button{flex:1;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font-family:var(--sans);font-weight:700;
  font-size:13.5px;padding:12px;border-radius:10px;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.navrow button.primary{background:var(--ink);color:#fff}
.navrow button:hover{background:var(--ink);color:#fff}
.navrow button.primary:hover{background:var(--accent);border-color:var(--accent)}

/* ---------- Collapsible group ---------- */
.acc{border:1px solid var(--line);border-radius:12px;margin-bottom:13px;overflow:hidden}
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:var(--paper);
  padding:13px 15px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent}
.acc-h span{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.acc-h::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--muted);line-height:1;flex:none}
.acc.open .acc-h::after{content:"\2212"}
.acc-b{display:none;padding:16px 15px 4px}
.acc.open .acc-b{display:block}

/* ---------- Verdict band ---------- */
.verdict{border-radius:12px;padding:13px 16px;margin-bottom:16px;text-align:center;border:1px solid}
.verdict .lvl{font-size:14px;font-weight:700;letter-spacing:.05em}
.verdict .why{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.verdict.green{background:var(--accent-soft);border-color:#CFE4FF}
.verdict.green .lvl{color:var(--accent)}
.verdict.yellow{background:#FFF4E5;border-color:#FFE0B2}
.verdict.yellow .lvl{color:#8A5A18}
.verdict.red{background:#FDECEA;border-color:#F7CFCB}
.verdict.red .lvl{color:#B4423A}

/* ---------- Mini stat grid ---------- */
.minis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.mini{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.mini .k{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mini .v{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink);margin-top:4px;letter-spacing:-.02em}

/* ---------- Projection: summary tiles, chart, view toggle ---------- */
.tblcard{margin-top:22px}
.projsum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.projsum .mini{margin:0}
.projsum .mini .k{display:flex;align-items:center;gap:5px}

.chartbox{margin-bottom:18px}
.chartkey{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:9px;
  font-size:11px;font-weight:600;color:var(--ink-2)}
.chartkey span{display:inline-flex;align-items:center;gap:6px}
.chartkey i{width:10px;height:10px;border-radius:3px;display:block;flex:none}
.chartkey-note{color:var(--muted);font-weight:400;margin-left:auto}
.chartbox svg{display:block;width:100%;height:190px;overflow:visible}
.chartx{display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.viewseg{width:auto;margin-bottom:16px}
.viewseg button{padding:8px 16px;font-size:12px}

/* ---------- Data table (30-year projection) ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;min-width:760px}
table.tbl th{font-family:var(--sans);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:right;padding:0 10px 9px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
table.tbl th:first-child,table.tbl td:first-child{text-align:left;padding-left:2px}
table.tbl td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line-2);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl tbody tr:hover td{background:var(--paper)}
table.tbl td.neg{color:#B4423A}
.tblnote{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5}

/* Phone: stop scrolling the table sideways — turn every row into a labelled card.
   Each <td> carries data-l, so no header row is needed to read a value. */
@media(max-width:760px){
  .tblwrap{overflow-x:visible;margin:0}
  table.tbl{min-width:0;display:block;font-size:13px}
  table.tbl thead{display:none}   /* every td carries its own data-l label instead */
  table.tbl tbody{display:block}
  table.tbl tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:6px 14px 8px;margin-bottom:10px}
  table.tbl tr:hover td{background:transparent}
  table.tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    text-align:right;padding:7px 0;border-bottom:1px solid var(--line-2)}
  table.tbl td:last-child{border-bottom:0}
  table.tbl td::before{content:attr(data-l);font-family:var(--sans);font-size:12px;
    font-weight:600;color:var(--muted);text-align:left;flex:none}
  /* Year becomes the card's heading */
  table.tbl td:first-child{padding:4px 0 9px;border-bottom:1.5px solid var(--ink);
    font-size:15px;font-weight:700;justify-content:flex-start;gap:7px;text-align:left}
  table.tbl td:first-child::before{content:"Year";font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent);font-weight:700}
  .projsum{grid-template-columns:1fr 1fr;gap:9px}
  .chartbox svg{height:150px}
  .viewseg{display:flex;width:100%}
}

/* ---------- Comps / line-item rows ---------- */
.lrow{display:grid;grid-template-columns:1fr 130px;gap:10px;align-items:center;margin-bottom:9px}
.lrow label{font-size:13px;font-weight:600;color:var(--ink-2);margin:0}
.lrow input{padding:10px 12px;font-size:14px}
.lrow .iwrap.pre-on input{padding-left:26px}

/* ---------- Bar chart ---------- */
.chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:10px 0 0;margin-top:6px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.bar .fill{width:100%;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:7px 7px 3px 3px;min-height:4px;transition:height .4s ease;position:relative}
.bar .fill span{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap;font-family:var(--mono)}
.bar .yl{font-size:11px;color:var(--muted);font-weight:600}

/* ---------- Mobile sticky result bar ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -8px 30px rgba(30,30,30,.28);transition:transform .25s ease}
.mbar.hide{transform:translateY(120%)}
.mbar .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#9E9E9E;font-weight:700}
.mbar .v{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1.15}
.mbar button{border:0;background:var(--accent);color:#fff;font-family:var(--sans);font-weight:700;font-size:13px;
  padding:11px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#8A8A8A;padding:38px 0 32px;font-size:12.5px}
footer .foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #333}
footer .foot-logo{height:22px;width:auto;display:block;object-fit:contain}
footer .foot-tag{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#7E7E7E;font-weight:600;margin-top:10px}
footer .foot-cta{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:14px;font-weight:600;
  border:1px solid #3C3C3C;border-radius:999px;padding:11px 20px;transition:.15s;white-space:nowrap}
footer .foot-cta span{color:var(--accent);font-size:15px;transition:transform .15s}
footer .foot-cta:hover{background:var(--accent);border-color:var(--accent)}
footer .foot-cta:hover span{color:#fff;transform:translateX(3px)}
footer .disc{max-width:920px;line-height:1.65;color:#7E7E7E}
footer .disc p{margin:0 0 10px}
footer .disc p:last-child{margin-bottom:0}

/* ---------- Desktop: keep results in view ---------- */
@media(min-width:901px){
  .card.results{position:sticky;top:22px}
}
/* ---------- Tablet ---------- */
@media(max-width:900px){
  .grid{grid-template-columns:1fr;gap:18px}
  header.site{padding:16px 0 98px}
  .mbar{display:flex}
  body{padding-bottom:74px}
}
/* ---------- Large phone ---------- */
@media(max-width:640px){
  .wrap{padding:0 16px}
  header.site{padding:15px 0 88px}
  header .sub{font-size:14.5px;margin-top:10px}
  .brandbar{margin-bottom:24px}
  .brandbar .badge{display:none}
  .card-pad{padding:22px 18px 24px}
  .rhero{padding:20px}
  main.wrap{margin-top:-58px}
}
/* ---------- Small phone ---------- */
@media(max-width:440px){
  .r2{grid-template-columns:1fr;gap:0}
  .tabs button{font-size:12px;padding:10px 4px;gap:5px}
  .tabs button i{width:17px;height:17px;font-size:10px}
  .minis{grid-template-columns:1fr}
  .lrow{grid-template-columns:1fr 118px;gap:8px}
  .lrow label{font-size:12.5px}
  header h1{font-size:25px;line-height:1.15}
  .rrow{gap:10px}
  .rrow .lab{font-size:13px}
  .mbar .v{font-size:20px}
  .mbar button{padding:10px 13px;font-size:12.5px}
  .chart{height:130px}
  .bar .fill span{font-size:9px}
}

/* ---------- Print-to-PDF report ---------- */
#printReport{display:none}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff !important}
  body > *{display:none !important}
  body > #printReport{display:block !important}
}