/* =========================================================================
   fc-calc shared calculator engine styles
   Used by every individual calculator page. Keeps visual language consistent
   with the home page's IBM Plex Sans/Mono + navy/orange/teal system.
   ========================================================================= */
:root{
  --fc-bg:#F5F6F8;
  --fc-surface:#FFFFFF;
  --fc-ink:#1C232B;
  --fc-muted:#6B7480;
  --fc-border:#E3E6EA;
  --fc-accent:#D98E3D;
  --fc-accent-ink:#7A4A14;
  --fc-accent-soft:#F7E7CC;
  --fc-teal:#4FA39B;
  --fc-error:#C1554D;
}

.fc-calc *{ box-sizing:border-box; }
.fc-calc{
  font-family:'IBM Plex Sans', Arial, Helvetica, sans-serif;
  color:var(--fc-ink);
  max-width:900px;
  margin:0 auto;
  padding:32px 16px 64px;
}
.fc-calc .mono{ font-family:'IBM Plex Mono', monospace; }

.fc-calc-breadcrumb{ font-size:12.5px; color:var(--fc-muted); margin-bottom:14px; }
.fc-calc-breadcrumb a{ color:var(--fc-muted); text-decoration:none; }
.fc-calc-breadcrumb a:hover{ color:var(--fc-accent-ink); }

.fc-calc-header{ margin-bottom:24px; }
.fc-calc-header h1{ font-size:26px; margin:0 0 8px; letter-spacing:-0.01em; }
.fc-calc-header p{ color:var(--fc-muted); font-size:14.5px; line-height:1.6; max-width:640px; margin:0; }

.fc-calc-card{
  background:var(--fc-surface);
  border:1px solid var(--fc-border);
  border-radius:12px;
  padding:24px;
  box-shadow:0 1px 3px rgba(20,24,28,0.04);
}

.fc-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:6px; }
.fc-field-grid.fc-single{ grid-template-columns:1fr; }
.fc-field{ display:flex; flex-direction:column; gap:6px; }
.fc-field.fc-span2{ grid-column:1 / -1; }
.fc-field label{ font-size:13px; font-weight:600; color:var(--fc-ink); }
.fc-field .fc-hint{ font-size:12px; color:var(--fc-muted); font-weight:400; }

.fc-input-wrap{ position:relative; display:flex; align-items:center; }
.fc-calc input[type="text"],
.fc-calc input[type="number"],
.fc-calc select,
.fc-calc input[type="date"],
.fc-calc input[type="time"]{
  width:100%; padding:10px 12px; border:1px solid var(--fc-border);
  border-radius:8px; font-size:14px; font-family:'IBM Plex Mono', monospace;
  color:var(--fc-ink); background:var(--fc-surface); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.fc-calc input:focus, .fc-calc select:focus{
  border-color:var(--fc-accent); box-shadow:0 0 0 3px var(--fc-accent-soft);
}
.fc-unit-suffix{
  position:absolute; right:12px; font-size:12.5px; color:var(--fc-muted);
  pointer-events:none; font-family:'IBM Plex Mono', monospace;
}
.fc-input-wrap.fc-has-suffix input{ padding-right:52px; }

.fc-calc-actions{ display:flex; gap:10px; margin-top:20px; }
.fc-btn{
  font-family:'IBM Plex Sans', sans-serif; font-size:14px; font-weight:600;
  border:none; border-radius:8px; padding:11px 22px; cursor:pointer;
  transition:background .15s, transform .05s;
}
.fc-btn:active{ transform:translateY(1px); }
.fc-btn-primary{ background:var(--fc-accent); color:#231405; }
.fc-btn-primary:hover{ background:#E29C50; }
.fc-btn-secondary{ background:#EEF1F4; color:var(--fc-ink); }
.fc-btn-secondary:hover{ background:#E3E7EB; }

.fc-result{
  margin-top:22px; padding:18px 20px; border-radius:10px;
  background:var(--fc-accent-soft); border:1px solid #EFD3A0;
  display:none;
}
.fc-result.fc-visible{ display:block; }
.fc-result.fc-error{ background:#FBE4E1; border-color:#EEC2BC; }
.fc-result-label{ font-size:12.5px; color:var(--fc-accent-ink); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.fc-result.fc-error .fc-result-label{ color:var(--fc-error); }
.fc-result-value{ font-family:'IBM Plex Mono', monospace; font-size:24px; font-weight:600; color:var(--fc-ink); }
.fc-result-sub{ margin-top:10px; font-size:13px; color:var(--fc-muted); line-height:1.6; }
.fc-result-sub div{ display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dashed #EFD3A0; }
.fc-result-sub div:last-child{ border-bottom:none; }

.fc-calc-notes{ margin-top:28px; font-size:13.5px; color:var(--fc-muted); line-height:1.7; }
.fc-calc-notes h2{ font-size:15px; color:var(--fc-ink); margin:0 0 8px; }

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