/* Weight calculator – moved unchanged from the existing Giriraj site (weight-calculator.php). Loaded on the calculator page only. */

:root{
  --bg: #f5f7fa;
  --grid: #e9edf2;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --line: #e2e7ed;
  --blueprint: #2f6fa8;
  --blueprint-dim: #5487b3;
  --accent: #d9722f;
  --accent-2: #1b9e8a;
  --text: #050505;
  --muted: #7c8a99;
  --danger: #d64545;
  --shadow: 0 1px 2px rgba(20,30,45,.04), 0 6px 20px rgba(20,30,45,.06);
}

*{ box-sizing:border-box; }

body{
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  padding-bottom: 4rem;
}

.font-display{ font-family:'Space Grotesk', sans-serif; }
.font-mono{ font-family:'IBM Plex Mono', monospace; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blueprint);
}

header.app-header{
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
}

.card-panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .6rem;
  box-shadow: var(--shadow);
}
.panel-head{
  border-bottom: 1px solid var(--line);
  padding: .9rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
}
.panel-head h2{
  font-size: .95rem;
  margin:0;
  font-weight:600;
  letter-spacing:.02em;
  color: var(--text);
}
.panel-body{ padding: 1.25rem; }



.form-label{
  font-size:.78rem;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  margin-bottom:.35rem;
}

.form-select, .form-control{
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:.92rem;
}
.form-select:focus, .form-control:focus{
  background: #fff;
  color: var(--text);
  border-color: var(--blueprint);
  box-shadow: 0 0 0 .2rem rgba(47,111,168,.15);
}
.form-select option{ font-family:'Inter', sans-serif; }
.form-control::placeholder{ color:#a7b2bd; }
.form-control.is-invalid{ border-color: var(--danger); }
.invalid-feedback{ color: var(--danger); font-size:.75rem; }

.dim-row{ margin-bottom:.9rem; }
.dim-input-group{ display:flex; gap:.4rem; }
.dim-input-group input{ flex: 1 1 auto; min-width:0; }
.dim-input-group select{ flex: 0 0 84px; }

.shape-pill-group{ display:flex; flex-wrap:wrap; gap:.4rem; }
.shape-pill{
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size:.78rem;
  font-family:'IBM Plex Mono', monospace;
  cursor:pointer;
  transition: all .15s ease;
  user-select:none;
}
.shape-pill:hover{ border-color: var(--blueprint); color: var(--text); }
.shape-pill.active{
  background: rgba(47,111,168,.09);
  border-color: var(--blueprint);
  color: var(--blueprint);
  font-weight:600;
}

.diagram-wrap{
  background:
    repeating-linear-gradient(0deg, rgba(47,111,168,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(47,111,168,.06) 0 1px, transparent 1px 24px),
    var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: .5rem;
  min-height: 220px;
  display:flex; align-items:center; justify-content:center;
  padding: 1rem;
}
.diagram-wrap svg{ width:100%; max-width:320px; height:auto; }
.diagram-wrap .bp-line{ stroke: var(--blueprint); fill:none; stroke-width:1.6; }
.diagram-wrap .bp-dim{ stroke: var(--blueprint-dim); stroke-width:1; }
.diagram-wrap .bp-center{ stroke: var(--muted); stroke-width:1; stroke-dasharray:4 3; }
.diagram-wrap text{ fill: var(--blueprint); font-family:'IBM Plex Mono', monospace; font-size:9px; }

/* Nameplate result card */
.nameplate{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1.1rem 1.3rem;
  position: relative;
  box-shadow: var(--shadow);
}
.rivet{
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c7d0d9);
  box-shadow: 0 1px 2px rgba(20,30,45,.25), inset 0 0 0 1px #d8dee5;
  position:absolute;
}
.rivet.tl{ top:8px; left:8px; } .rivet.tr{ top:8px; right:8px; }
.rivet.bl{ bottom:8px; left:8px; } .rivet.br{ bottom:8px; right:8px; }

.weight-value{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size: 2.6rem;
  line-height:1;
  color: var(--accent);
  letter-spacing:-.01em;
}
.weight-unit{
  font-family:'IBM Plex Mono', monospace;
  font-size: .95rem;
  color: var(--muted);
}
.weight-secondary{
  font-family:'IBM Plex Mono', monospace;
  color: var(--accent-2);
  font-size: 1.05rem;
}

.spec-line{
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  color: var(--muted);
  padding: .3rem 0;
  border-bottom: 1px dotted var(--line);
}
.spec-line span:last-child{ color: var(--text); font-weight:500; }

.btn-blueprint{
  background: var(--blueprint);
  border: none;
  color: #ffffff;
  font-weight:600;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.03em;
}
.btn-blueprint:hover{ background: #26568a; color:#fff; }
.btn-ghost-reset{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family:'IBM Plex Mono', monospace;
}
.btn-ghost-reset:hover{ border-color: var(--danger); color: var(--danger); }

.material-factor-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem;
  color: var(--accent-2);
  background: rgba(27,158,138,.08);
  border:1px solid var(--line);
  border-radius:.3rem;
  padding:.1rem .5rem;
}

/* Remove Bootstrap focus styles */

.form-control,
.form-select {
    border-radius: 10;
    padding: .05rem .75rem;
    box-shadow: none !important;
    transition: none;
}

.form-control:focus,
.form-select:focus {
    border-color: #ced4da !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove focus from buttons */

.btn:focus,
.btn:active,
.btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Input groups */

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 3;
    box-shadow: none !important;
}

/* Optional: Remove browser outline */

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
}