/* =================== SCSRRS ROI CALCULATOR — styles.css =================== */
:root { color-scheme: light; } /* tell the browser to render form controls in light mode */
/* ---- Theme tokens ---- */
:root{
  --bg:       #f6f7fb;
  --card:     #ffffff;
  --ink:      #1f2328;
  --muted:    #586174;
  --primary:  #1967d2;
  --border:   #e4e7ee;
  --shadow:   0 1px 2px rgba(0,0,0,.04);
  --focus:    0 0 0 3px rgba(25,103,210,.25);
}

/* ---- Reset-ish ---- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Typography ---- */
h1,h2{ margin:.2rem 0 .6rem; }
h1{ font-size:1.9rem; }
h2{ font-size:1.2rem; }
.sub{ color:var(--muted); }

.tiny{ font-size:.86rem; color:var(--muted); }
.hint{ color:var(--muted); }
.disclaimer{ margin-top:8px; }

/* ---- Layout ---- */
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 960px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow);
}

.field{ margin-bottom:12px; }
.field.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
fieldset.field{ padding:10px 12px 2px; border:1px solid var(--border); border-radius:10px; }

/* ---- Forms ---- */
label{ display:block; font-weight:600; margin-bottom:4px; }

input[type=number], select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  outline:none;
}

textarea{ min-height:112px; resize:vertical; }

/* Focus states */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline: var(--focus);
  transition:outline-color .2s ease;
}

/* ---- Buttons ---- */
button{
  cursor:pointer;
  border-radius:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-weight:600;
}
button.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
button.ghost{
  color:var(--primary);
  border-color:var(--primary);
  background:#fff;
}
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
button:hover:not(:disabled){ filter:brightness(0.98); }
button.primary:hover:not(:disabled){ filter:brightness(0.96); }

/* ---- Results KPIs ---- */
.results .kpigrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:8px 0 16px;
}
@media (max-width: 1100px){ .results .kpigrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 720px){ .results .kpigrid{ grid-template-columns:repeat(2,1fr); } }

.kpi{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fafbff;
}
.kpi-label{ color:var(--muted); font-size:.86rem; }
.kpi-value{ font-weight:800; font-size:1.25rem; margin-top:4px; }

/* ---- Chart ---- */
canvas{
  width:100%;
  height:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

/* ---- Links ---- */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- <details> Roofr block ---- */
details#roofrBlock{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
}
details#roofrBlock[open]{ border-style:solid; }
#roofrBlock summary{
  cursor:pointer;
  font-weight:700;
  margin:2px 0 8px;
  list-style:none;
}
#roofrBlock summary::-webkit-details-marker{ display:none; }
#roofrBlock summary:after{
  content:'▸';
  display:inline-block;
  margin-left:8px;
  transform:translateY(-1px);
  transition:transform .15s ease;
  color:var(--muted);
}
#roofrBlock[open] summary:after{ transform:rotate(90deg) translateX(2px); }
#roofrBlock textarea{
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
}
#roofrPreview code{
  background:#f3f5fa;
  padding:2px 4px;
  border-radius:4px;
}

/* ---- Print (Save as PDF) ---- */
@media print{
  @page{ margin:0.5in; }
  body{ background:#fff; }
  header .sub, .hint, .tiny.disclaimer, #shareBtn, #roofrBlock{ display:none !important; }
  .container{ max-width:none; padding:0; }
  .card{ box-shadow:none; border:0; padding:0; }
  .grid{ display:block; }
  .results .kpigrid{ grid-template-columns:repeat(4,1fr); gap:8px; }
  canvas{ border:0; }
}

/* ---- Dark mode (optional, respectful) ---- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f141a;
    --card:#111820;
    --ink:#e6eaf0;
    --muted:#9aa5b1;
    --border:#25303b;
    --shadow: none;
  }
  .kpi{ background:#0d1520; }
  canvas{ background:#0d1520; }
  input,select,textarea,button{ background:#0f1822; color:var(--ink); border-color:#263241; }
  button.primary{ color:#fff; }
  details#roofrBlock{ background:#0f1822; border-color:#263241; }
}

/* ---- Small utilities ---- */
.two[role="group"]{ gap:12px; display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .two[role="group"]{ grid-template-columns:1fr; } }
/* --- Fix invisible input text on iOS/Safari/Chrome --- */
input, select, textarea {
  background-color: #fff !important;
  color: #111 !important;               /* visible text */
  -webkit-text-fill-color: #111 !important;  /* override autofill/dark flip */
  caret-color: #111;
}
input::placeholder, textarea::placeholder {
  color: #8a94a6; opacity: 1;
}

/* Tame autofill’s yellow + white-on-white */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #111 !important;
  box-shadow: 0 0 0 1000px #fff inset !important;  /* keep white background */
}

/* Respect dark mode but keep text readable */
@media (prefers-color-scheme: dark){
  input, select, textarea {
    background-color: #0f1822 !important;
    color: #e6eaf0 !important;
    -webkit-text-fill-color: #e6eaf0 !important;
    caret-color: #e6eaf0;
  }
  input:-webkit-autofill,
  select:-webkit-autofill,
  textarea:-webkit-autofill {
    -webkit-text-fill-color: #e6eaf0 !important;
    box-shadow: 0 0 0 1000px #0f1822 inset !important;
  }
}