/* ==========================================================================
   Settler Security — Estimator Tool
   Shared stylesheet for calculator.html and account.html

   Palette and type were pulled from settlersecurity.com's live styles.
   Everything is a CSS variable below so the whole look can be re-tuned
   from this one block. Swap values here rather than hunting through
   the markup.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand colors (matched from settlersecurity.com) --- */
  --color-dark: #2a2829;       /* charcoal — hero/header background */
  --color-green: #003900;      /* deep forest green — primary accent, CTAs */
  --color-green-hover: #0a5c0a;
  --color-white: #ffffff;
  --color-offwhite: #fafafa;
  --color-gray-light: #e6e6e6; /* section dividers, subtle fills */
  --color-gray-mid: #767676;   /* secondary/help text — meets WCAG AA (4.5:1) on white, #808080 fell just short */
  --color-black: #000000;

  /* --- Typography ---
     Headings use "orpheus-pro" on the live site, a licensed Typekit face.
     Playfair Display is the closest widely-available stand-in and is
     swapped in below — replace the font-family stack with your real
     @font-face once you have the license file, no other changes needed. */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-pill: 999px;
  --radius-card: 10px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0 0 0.5em 0;
  color: inherit;
}

a { color: var(--color-green); }

/* --- App shell (works whether embedded in an iframe or opened directly) ---
   .app itself is NOT width-constrained — that's deliberate, so
   .app-header's dark background can run edge-to-edge across the full
   iframe width instead of leaving white bars on either side of it (the
   iframe is usually wider than the 720px reading width this app was
   designed around). Only .app-body below carries the 720px cap, which
   keeps the actual form/content at a comfortable reading width while
   the header banner still fills the space above it. */
.app {
  min-height: 100vh;
  background: var(--color-white);
}

.app-header {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 28px 24px;
  text-align: center;
}

.app-header .logo {
  font-family: var(--font-heading);
  font-size: 28px;
  letter-spacing: 0.02em;
  margin: 0;
}

.app-header .tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gray-light);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.app-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.intro {
  font-size: 14px;
  color: var(--color-gray-mid);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* --- Section cards (each is one group of the form) --- */
.section-card {
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-card);
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--color-white);
}

.section-card summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-heading);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-offwhite);
}

.section-card summary::-webkit-details-marker { display: none; }

.section-card summary .chevron {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gray-mid);
  transition: transform 0.15s ease;
}

.section-card[open] summary .chevron { transform: rotate(180deg); }

.section-card .section-body {
  padding: 4px 20px 20px;
}

.section-hint {
  font-size: 13px;
  color: var(--color-gray-mid);
  margin: -6px 0 14px;
}

/* --- Form fields --- */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field .field-note {
  font-weight: 400;
  color: var(--color-gray-mid);
  font-size: 12px;
  margin-left: 6px;
}

.required-mark {
  color: var(--color-error);
  margin-left: 3px;
}

.form-required-legend {
  color: var(--color-gray-mid);
  font-size: 12px;
  margin: -4px 0 16px;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 16px; /* stay at/above 16px — anything smaller triggers an auto-zoom on focus in iOS Safari */
  background: var(--color-white);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(0, 57, 0, 0.12);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* Keep Low / Expected / High as three columns rather than wrapping —
     just give them less room to breathe on a narrow phone screen. */
  .estimate-range { gap: 4px; }
  .range-expected .range-value { font-size: 24px; }
  .range-low .range-value,
  .range-high .range-value { font-size: 14px; }
}

/* --- Validation states ---
   Semantic red, not a brand color — used only to flag errors, kept
   subtle and rounded to match the rest of the UI. */
:root {
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
}

.field.has-error input,
.field.has-error select {
  border-color: var(--color-error);
}

.field.has-error input:focus,
.field.has-error select:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}

.field-error {
  display: none;
  color: var(--color-error);
  font-size: 12px;
  margin-top: 6px;
}

.field.has-error .field-error { display: block; }

.form-error-banner {
  display: none;
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.form-error-banner.visible { display: block; }

.form-error-banner strong { display: block; margin-bottom: 4px; }

/* --- Yes/No toggle pills (for the many YES/NO inputs in the source sheet) ---
   Markup is a <fieldset>/<legend> wrapping two real radio inputs — that
   gives each pair proper group semantics and keyboard support (arrow keys
   move between Yes/No, same as any native radio group) for free, with
   the radios themselves visually hidden and their <label>s styled as the
   pills. This reset makes the fieldset/legend behave like the plain
   <div>/<span> row they replaced. */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--color-gray-light);
  min-width: 0;
}

.toggle-row:last-child { border-bottom: none; }

.toggle-row .toggle-label {
  font-size: 14px;
  padding: 0;
}

.toggle {
  display: inline-flex;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}

/* Visually hidden but still focusable/operable — screen readers and
   keyboard users get a real radio group; everyone else sees pills. */
.toggle-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toggle-option {
  display: inline-block;
  padding: 12px 16px; /* ~44px tall — a comfortable touch target across the 15 Yes/No rows in Facility & Compliance */
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-gray-mid);
  user-select: none;
}

.toggle-radio:checked + .toggle-option {
  background: var(--color-green);
  color: var(--color-white);
}

.toggle-radio:focus-visible + .toggle-option {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-primary {
  background: var(--color-green);
  color: var(--color-white);
  width: 100%;
}

.btn-primary:hover { background: var(--color-green-hover); }

.btn-secondary {
  background: transparent;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  width: 100%;
}

.btn-secondary:hover { background: rgba(0, 57, 0, 0.06); }

.btn-link {
  background: none;
  border: none;
  color: var(--color-green);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* --- Results panel --- */
.results {
  display: none;
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  margin-top: 24px;
}

.results.visible { display: block; }

.results h2 { color: var(--color-white); font-size: 22px; }

/* Each estimate (Installation, Monthly) gets its own block showing
   Low / Expected / High, with Expected given visual prominence since
   it's the single number most people will actually anchor on. */
.estimate-block {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.estimate-block:last-of-type { border-bottom: none; }

.estimate-block .estimate-label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-light);
  margin-bottom: 14px;
}

.estimate-block .estimate-label .sample-tag {
  font-family: var(--font-body);
  font-size: 11px;
  color: #ffb020;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 8px;
}

.estimate-range {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.range-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.range-item .range-value {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.range-item .range-caption {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-mid);
  margin-top: 5px;
}

.range-expected .range-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
}

.range-expected .range-caption {
  color: var(--color-white);
  font-weight: 600;
}

.disclaimer {
  font-size: 12px;
  color: var(--color-gray-mid);
  line-height: 1.6;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-light);
}

.results .disclaimer {
  color: rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.15);
}

.account-prompt {
  display: none;
  background: var(--color-offwhite);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-top: 16px;
  text-align: center;
}

.account-prompt.visible { display: block; }

.saved-note {
  display: none;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-green);
  margin-top: 16px;
}

.saved-note.visible { display: block; }
.saved-note a { color: var(--color-green); }

.account-prompt p {
  font-size: 13px;
  color: var(--color-gray-mid);
  margin: 0 0 14px;
}

.account-prompt .btn { margin-bottom: 10px; }

/* --- Account page (login / signup) --- */
.tab-row {
  display: flex;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 28px;
}

.tab-row button {
  flex: 1;
  border: none;
  background: none;
  padding: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-gray-mid);
}

.tab-row button.active {
  background: var(--color-green);
  color: var(--color-white);
}

.auth-panel { display: none; }
.auth-panel.visible { display: block; }

.form-footnote {
  text-align: center;
  font-size: 13px;
  color: var(--color-gray-mid);
  margin-top: 16px;
}

/* --- Honeypot (bot deterrence) ---
   A field real visitors never see or fill in; see api/signup.php and
   api/submit-estimate.php, which quietly no-op instead of erroring when
   it arrives non-empty. Visually-hidden rather than display:none, since
   some bots skip fields hidden that way when auto-filling forms. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Account status bar (signed-in state, top of most pages) --- */
.account-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-gray-mid);
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-gray-light);
  background: var(--color-offwhite);
  min-height: 18px;
}

.account-status:empty { display: none; }

/* --- Disabled/loading buttons --- */
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Success banners (password reset flows, etc.) --- */
.form-success-banner {
  display: none;
  background: #eaf6ea;
  color: var(--color-green);
  border: 1px solid rgba(0, 57, 0, 0.2);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.form-success-banner.visible { display: block; }

/* --- Already-signed-in notice (account.html) --- */
.already-signed-in {
  display: none;
  text-align: center;
}

.already-signed-in .btn { margin-bottom: 10px; }

/* --- Saved estimates list (my-estimates.html) --- */
.estimates-toolbar {
  margin-bottom: 20px;
}

.estimates-toolbar .btn { width: auto; padding-left: 20px; padding-right: 20px; }

.estimate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.estimate-card {
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}

.estimate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.estimate-card-title {
  font-family: var(--font-heading);
  font-size: 17px;
}

.estimate-card-date {
  font-size: 12px;
  color: var(--color-gray-mid);
  white-space: nowrap;
}

.estimate-card-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 13px;
  color: var(--color-gray-mid);
}

.estimate-card-figures strong {
  color: var(--color-black);
  font-weight: 600;
}

.empty-state {
  text-align: center;
  color: var(--color-gray-mid);
  font-size: 14px;
  padding: 40px 20px;
}

.estimate-card-report-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-light);
  font-size: 13px;
}

.estimate-card-report-row .report-error {
  color: var(--color-error);
  font-size: 12px;
}

/* --- Shared report page (report.html) --- */
.report-section {
  margin-top: 24px;
}

.report-section h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  margin-bottom: 6px;
}

.report-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-gray-light);
  font-size: 14px;
}

.report-row:last-child { border-bottom: none; }

.report-row .report-label { color: var(--color-gray-mid); }
.report-row .report-value { font-weight: 600; text-align: right; }