:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  --good:#16a34a;
  --bad:#dc2626;
  --border:#e5e7eb;
  /* Slider thumb dimensions */
  --slider-thumb-w:14px;
  --slider-thumb-h:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}

.container{max-width:1100px;margin:0 auto;padding:16px}

.site-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg,#ffffff,rgba(255,255,255,0.6))}
.header-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.header-content{flex:1;min-width:280px}
.header-actions{display:flex;align-items:center;gap:10px}
.site-header h1{margin:0 0 8px 0;font-weight:800;letter-spacing:-0.02em}
.site-header .subhead{margin:0 0 8px 0;color:var(--muted)}
.site-header .disclaimer{margin:0;color:var(--muted);font-size:14px}
.site-header a{color:var(--accent);text-decoration:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;font-family:inherit;color:var(--text);cursor:pointer;transition:all 0.15s ease;user-select:none;line-height:1}
.btn svg{flex-shrink:0}
.btn:hover{background:#f8fafc;border-color:#cbd5e1}
.btn-primary{background:var(--accent);color:#ffffff;border-color:var(--accent)}
.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;color:#ffffff}
.btn-secondary{color:var(--muted)}
.btn-secondary:hover{color:var(--text);border-color:#94a3b8}
.share-results-btn{margin-top:14px;width:100%;justify-content:center}

/* Toast Notification */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(40px);background:#1e293b;color:#f8fafc;padding:11px 20px;border-radius:8px;font-size:14px;font-weight:500;box-shadow:0 10px 25px -5px rgba(0,0,0,0.25),0 8px 10px -6px rgba(0,0,0,0.15);opacity:0;pointer-events:none;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),opacity 0.25s ease;z-index:9999;display:flex;align-items:center;gap:8px}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.layout{display:grid;grid-template-columns:640px minmax(0,1fr);gap:16px;align-items:start}
.panel.results{position:sticky;top:16px}
@media (max-width: 900px){.layout{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;overflow:hidden}
.panel.inputs{padding-left:24px;padding-right:24px}
.panel h2{margin-top:0}
.panel h3,.panel h4{margin-bottom:8px;margin-top:16px}

.grid.two-col{display:grid;grid-template-columns:1fr;gap:16px}
@media (max-width: 700px){.grid.two-col{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:8px}
.field span{font-size:14px;color:var(--muted)}
.field input[type="number"],.field input[type="text"],.field select{appearance:none;border:0;background:transparent;color:var(--text);padding:0;outline:none;font-size:20px;font-weight:400}
.field input[type="number"]:focus,.field input[type="text"]:focus,.field select:focus{outline:none}

/* Input layout: number box on the left, slider on the right */
.input-group{display:grid;grid-template-columns:140px 1fr;grid-template-rows:auto auto auto;align-items:center;column-gap:12px;row-gap:0}
.input-group > input[type="number"], .input-group > input[type="text"]{width:100%;grid-column:1;grid-row:1 / span 3}
@media (max-width: 700px){.input-group{grid-template-columns:1fr}}

/* Segmented gradient bar above the actual slider */
.segmented-bar{grid-column:2;display:grid;grid-template-columns:repeat(40, 1fr);gap:0;height:26px;border-radius:0;background:#e5e7eb;overflow:hidden;margin-bottom:0;border:0}
.segmented-bar .piece{background:#cbd5e1;box-shadow:inset -1px 0 0 rgba(255,255,255,0.95)}
.segmented-bar .piece:last-child{box-shadow:none}
.segmented-bar .piece.active{outline:2px solid #111827;outline-offset:-2px}

/* Slider labels underneath */
.slider-labels{grid-column:2;position:relative;margin-top:4px;font-size:12px;color:var(--muted);height:16px}
.slider-labels span{position:absolute;transform:translateX(-50%)}

/* The actual range slider sits under the segmented bar - wider than gradient */
input[type="range"].slider{grid-column:2;appearance:none;width:calc(100% + 8px);height:8px;border-radius:999px;background:#e5e7eb;outline:none;position:relative;border:1px solid #cbd5e1;margin:0;display:block;margin-left:-4px}
/* Explicit track styling for alignment */
input[type="range"].slider::-webkit-slider-runnable-track{height:8px;background:#e5e7eb;border:1px solid #cbd5e1;border-radius:999px}
input[type="range"].slider::-moz-range-track{height:8px;background:#e5e7eb;border:1px solid #cbd5e1;border-radius:999px}
/* NYT-like marker thumb: white background with gray border, tag/bookmark shape pointing down */
/* Using SVG background for proper border visibility */
input[type="range"].slider::-webkit-slider-thumb{
  appearance:none;
  width:14px;
  height:18px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18"><path d="M 1.5 0 L 12.5 0 Q 14 0 14 1.5 L 14 12 L 7 16 L 0 12 L 0 1.5 Q 0 0 1.5 0 Z" fill="white" stroke="%23cbd5e1" stroke-width="1.2"/></svg>');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  cursor:pointer;
  border:none;
  box-shadow:none;
  margin-top:-5px;
}
input[type="range"].slider::-moz-range-thumb{
  width:14px;
  height:18px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18"><path d="M 1.5 0 L 12.5 0 Q 14 0 14 1.5 L 14 12 L 7 16 L 0 12 L 0 1.5 Q 0 0 1.5 0 Z" fill="white" stroke="%23cbd5e1" stroke-width="1.2"/></svg>');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  cursor:pointer;
  border:none;
  box-shadow:none;
}
input[type="range"].slider::-webkit-slider-thumb:hover{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18"><path d="M 1.5 0 L 12.5 0 Q 14 0 14 1.5 L 14 12 L 7 16 L 0 12 L 0 1.5 Q 0 0 1.5 0 Z" fill="white" stroke="%23cbd5e1" stroke-width="1.2"/></svg>');
}
input[type="range"].slider::-moz-range-thumb:hover{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18"><path d="M 1.5 0 L 12.5 0 Q 14 0 14 1.5 L 14 12 L 7 16 L 0 12 L 0 1.5 Q 0 0 1.5 0 Z" fill="white" stroke="%23cbd5e1" stroke-width="1.2"/></svg>');
}
input[type="range"].slider::-webkit-slider-thumb:active{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18"><path d="M 1.5 0 L 12.5 0 Q 14 0 14 1.5 L 14 12 L 7 16 L 0 12 L 0 1.5 Q 0 0 1.5 0 Z" fill="white" stroke="%23cbd5e1" stroke-width="1.2"/></svg>');
}
input[type="range"].slider::-moz-range-thumb:active{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18"><path d="M 1.5 0 L 12.5 0 Q 14 0 14 1.5 L 14 12 L 7 16 L 0 12 L 0 1.5 Q 0 0 1.5 0 Z" fill="white" stroke="%23cbd5e1" stroke-width="1.2"/></svg>');
}

details.advanced{margin-top:8px}
details.advanced summary{cursor:pointer;color:var(--accent);font-weight:600;margin-bottom:8px}

.results .result-summary{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:8px}
.subtotal{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0}
.subtotal .label{color:var(--muted);font-size:14px}
.subtotal .value{font-size:20px;font-weight:700}

.results .label{color:var(--muted);font-size:14px}
.results .value{font-size:28px;font-weight:800;word-break:normal;white-space:nowrap;overflow:hidden}
.results .accent{color:var(--accent)}

.breakdown h3{margin-top:20px}
.breakdown ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.breakdown li{display:flex;align-items:baseline;justify-content:space-between;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:#ffffff}
.breakdown .name{color:var(--muted)}
.breakdown .amount{font-weight:700}
.breakdown .pos{color:var(--bad)}
.breakdown .neg{color:var(--good)}
.breakdown .total-row{font-weight:800}

/* Monthly Cash Flow Affordability Section */
.monthly-cashflow-section{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:16px;margin-bottom:8px}
.monthly-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.monthly-section-header h3{margin:0;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.monthly-badge{background:#e2e8f0;color:#475569;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:0.03em}
.monthly-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media (max-width: 480px){.monthly-grid{grid-template-columns:1fr}}
.monthly-card{background:#ffffff;border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column}
.monthly-card.buy-card{border-left:3px solid #9558f6}
.monthly-card.rent-card{border-left:3px solid #4281f5}
.monthly-card-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.monthly-card-label{font-size:13px;font-weight:700;color:var(--text)}
.monthly-card-val{font-size:18px;font-weight:800;color:var(--text)}
.monthly-card-val small{font-size:11px;font-weight:500;color:var(--muted)}
.monthly-card-net{font-size:11px;color:var(--muted);margin-bottom:8px;padding-bottom:6px;border-bottom:1px dashed var(--border)}
.monthly-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.monthly-items li{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.monthly-items li .item-val{font-weight:600;color:var(--text)}
.monthly-items li.tax-savings-item .item-val{color:#16a34a}
.monthly-diff-pill{background:#ffffff;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12px;font-weight:600;text-align:center;color:var(--text)}

.site-footer{color:var(--muted);font-size:14px}

.results-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;margin-bottom:12px}
.results-header .headline{font-size:14px;font-weight:400;color:var(--muted)}
.results-header .subhead{font-size:30px;font-weight:800;line-height:1.2;white-space:normal;word-break:break-word}
.results-header .subhead.buying{color:#9558f6}
.results-header .subhead.renting{color:#4281f5}
.results-header .subhead.equal{color:#4b5563}

/* Filing status radio group */
.radio-group.filing{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.radio-group.filing .radio-option{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--text)}
.radio-group.filing input[type="radio"]{appearance:none;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;display:inline-grid;place-content:center}
.radio-group.filing input[type="radio"]::before{content:"";width:12px;height:12px;border-radius:50%;transform:scale(0);transition:120ms transform ease-in-out;background:#2563eb}
.radio-group.filing input[type="radio"]:checked::before{transform:scale(1)}
.radio-group.filing input[type="radio"]:checked{border-color:#2563eb}

/* Fee Structure Segmented Toggle */
.fee-structure-field{margin-bottom:14px}
.segmented-toggle{display:inline-flex;background:#f1f5f9;border-radius:8px;padding:4px;border:1px solid var(--border);gap:4px;width:100%;box-sizing:border-box}
.segmented-toggle .toggle-btn{flex:1;padding:8px 12px;font-size:14px;font-weight:600;border:none;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:all 0.15s ease;font-family:inherit;text-align:center}
.segmented-toggle .toggle-btn:hover{color:var(--text)}
.segmented-toggle .toggle-btn.active{background:#ffffff;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,0.1)}

/* Bundled mode banner */
.bundled-info-banner{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13px;line-height:1.4;color:#1e40af;display:flex;align-items:center;gap:10px}
.bundled-info-banner svg{flex-shrink:0}

/* Property tax badge & dimming */
.tax-bundled-badge{display:inline-block;background:#eff6ff;color:#2563eb;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;border:1px solid #bfdbfe}
.field.dimmed-field{opacity:0.5;pointer-events:none;transition:opacity 0.2s ease}


/* Mobile layout - completely different structure */
@media (max-width: 768px){
  .layout{grid-template-columns:1fr;padding:0}
  .panel.inputs{border:0;border-radius:0;padding:0;background:transparent}
  .panel.results{position:fixed !important;top:auto !important}
  
  /* Stack field vertically: label on top, input below, then full-width bars */
  .field{margin:0 0 24px 0;padding:0 16px;--field-h-padding:16px}
  .field span{display:block;margin-bottom:8px;padding:0}
  
  .input-group{
    display:flex;
    flex-direction:column;
    gap:0;
    position:relative;
  }
  
  /* Input above bars */
  .input-group > input[type="number"],
  .input-group > input[type="text"],
  .input-group > select{
    width:100%;
    margin:0 0 12px 0;
    order:1;
  }
  
  /* Bars span full width with equal side margins, accounting for scrollbar */
  .segmented-bar{
    order:2;
    width:calc(100% - 32px);
    position:relative;
    left:0;
    margin-left:16px;
    margin-right:16px;
    margin-bottom:0;
    border-radius:0;
  }
  
  input[type="range"].slider{
    order:3;
    width:calc(100% - 24px);
    position:relative;
    left:0;
    margin-left:12px;
    margin-right:12px;
    margin-top:0;
  }
  
  .slider-labels{
    order:4;
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
  }
  
  /* Fixed bottom results */
  .panel.results{
    position:fixed;
    bottom:12px;
    left:12px;
    right:12px;
    z-index:100;
    border-radius:12px;
    box-shadow:0 -4px 12px rgba(0,0,0,0.15);
    max-height:40vh;
    overflow-y:auto;
  }
  .results .breakdown{display:none}
  .results h3{display:none}
  body{padding-bottom:220px}
}