/* ===========================================================
   tools.css — shared styling for the public utility pages
   (estimate.html, verify.html). Loaded in addition to
   styles.css so the main stylesheet stays untouched.
   Palette variables come from styles.css :root.
   =========================================================== */

.tool-hero{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  padding: 7rem 0 3.4rem;
  position: relative;
  overflow: hidden;
}
.tool-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
}
.tool-hero h1{
  /* The global h1 rule colours headings navy, which would be invisible
     against this navy hero — override it explicitly. */
  color: var(--white);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.18;
  margin-bottom:.7rem;
}
.tool-hero .eyebrow{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--gold-light);
  border:1px solid rgba(220,192,122,.45);
  border-radius:999px;
  padding:.3rem .85rem;
  margin-bottom:1.1rem;
}
.tool-hero p{
  max-width: 62ch;
  color: rgba(255,255,255,.88);
  font-size:1rem;
  line-height:1.65;
}

.tool-section{ padding: 3.2rem 0 4rem; background: var(--grey); }

.tool-grid{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 2rem;
  align-items:start;
}
@media (max-width: 900px){
  .tool-grid{ grid-template-columns: 1fr; }
}

.tool-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.8rem 1.7rem;
  border-top: 4px solid var(--gold);
}
.tool-card h2{
  font-size: 1.12rem;
  color: var(--navy);
  margin-bottom: .35rem;
}
.tool-card .card-sub{
  font-size:.82rem;
  color:#5a6478;
  margin-bottom:1.3rem;
  line-height:1.55;
}

.fieldset{
  border:0;
  margin:0 0 1.35rem;
  padding:0;
}
.fieldset > legend{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--navy);
  font-weight:700;
  padding:0 0 .55rem;
  border-bottom:1px solid var(--stone);
  width:100%;
  margin-bottom:.95rem;
}

.frow{ margin-bottom:.95rem; }
.frow.two{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.frow.three{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem; }
@media (max-width: 620px){
  .frow.two, .frow.three{ grid-template-columns:1fr; }
}
.frow label{
  display:block;
  font-size:.76rem;
  font-weight:600;
  color: var(--charcoal);
  margin-bottom:.33rem;
}
.frow input, .frow select, .frow textarea{
  width:100%;
  padding:.65rem .7rem;
  font:inherit;
  font-size:.88rem;
  color: var(--charcoal);
  background: var(--white);
  border:1px solid #cfd6e2;
  border-radius: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.frow input:focus, .frow select:focus, .frow textarea:focus{
  outline:none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(28,46,91,.14);
}
.frow .hint{
  display:block;
  font-size:.72rem;
  color:#6b7488;
  margin-top:.3rem;
  line-height:1.5;
}

.switchrow{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.7rem .8rem;
  background: var(--cream);
  border:1px solid var(--stone);
  border-radius: 8px;
  margin-bottom:.95rem;
}
.switchrow input[type="checkbox"]{
  width:17px; height:17px;
  margin-top:.12rem;
  flex:0 0 auto;
  accent-color: var(--navy);
}
.switchrow .sw-text{ font-size:.82rem; color: var(--charcoal); line-height:1.55; }
.switchrow .sw-text strong{ display:block; color: var(--navy); font-size:.86rem; }

/* ---- results panel ---- */
.result-card{
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.7rem 1.6rem;
  position:sticky;
  top: 6.5rem;
}
@media (max-width: 900px){ .result-card{ position:static; } }
.result-card h2{
  font-size:1rem;
  color: var(--gold-light);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(220,192,122,.3);
}
.rline{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
  font-size:.86rem;
  border-bottom:1px dotted rgba(255,255,255,.16);
}
.rline:last-of-type{ border-bottom:0; }
.rline .rl-label{ color: rgba(255,255,255,.82); }
.rline .rl-label small{ display:block; color: rgba(255,255,255,.55); font-size:.73rem; margin-top:.15rem; }
.rline .rl-val{ font-variant-numeric: tabular-nums; white-space:nowrap; font-weight:600; }
.rline.muted .rl-val{ font-weight:400; color: rgba(255,255,255,.72); }
.rline.total{
  margin-top:.85rem;
  padding-top:.9rem;
  border-top:2px solid var(--gold);
  border-bottom:0;
  font-size:1.05rem;
}
.rline.total .rl-label{ color: var(--white); font-weight:600; }
.rline.total .rl-val{ color: var(--gold-light); font-size:1.3rem; }
.result-empty{
  font-size:.85rem;
  color: rgba(255,255,255,.65);
  line-height:1.65;
  padding: .6rem 0 .3rem;
}
.result-note{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.75rem;
  color: rgba(255,255,255,.7);
  line-height:1.6;
}

/* ---- callouts ---- */
.callout{
  border-left:4px solid var(--gold);
  background: var(--cream);
  padding:1rem 1.15rem;
  border-radius: 0 8px 8px 0;
  font-size:.84rem;
  color: var(--charcoal);
  line-height:1.65;
  margin: 1.4rem 0;
}
.callout strong{ color: var(--navy); }
.callout.warn{ border-left-color: var(--urgent); background:#FBF0F0; }
.callout.warn strong{ color: var(--urgent-dark); }

/* ---- verify output ---- */
.vtable{ width:100%; border-collapse:collapse; margin-top:.4rem; }
.vtable th, .vtable td{
  text-align:left;
  padding:.6rem .7rem;
  font-size:.84rem;
  border-bottom:1px solid var(--stone);
  vertical-align:top;
}
.vtable th{
  width:38%;
  color: var(--navy);
  font-weight:600;
  background: var(--cream);
  white-space:nowrap;
}
.vtable td{ color: var(--charcoal); word-break:break-word; }

.badge{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  padding:.3rem .7rem;
  border-radius:999px;
}
.badge.ok{ background:#E6F2E9; color:#1F6B37; border:1px solid #BFDFC8; }
.badge.unknown{ background: var(--stone); color: var(--charcoal); border:1px solid #cfc8b4; }
.badge.bad{ background:#FBE9E9; color: var(--urgent-dark); border:1px solid #E6C3C3; }

.btn-block{ width:100%; justify-content:center; }

.tool-breadcrumb{
  font-size:.78rem;
  color: rgba(255,255,255,.65);
  margin-bottom:1rem;
}
.tool-breadcrumb a{ color: var(--gold-light); text-decoration:none; }
.tool-breadcrumb a:hover{ text-decoration:underline; }

.msg{
  margin-top:1rem;
  padding:.8rem .9rem;
  border-radius:8px;
  font-size:.83rem;
  line-height:1.55;
  display:none;
}
.msg.show{ display:block; }
.msg.ok{ background:#E6F2E9; color:#1F6B37; border:1px solid #BFDFC8; }
.msg.err{ background:#FBE9E9; color: var(--urgent-dark); border:1px solid #E6C3C3; }