/* ============================================================
   BoltDesigner — VDI 2230 calculator
   Design language: German drawing-office. Vellum paper, prussian
   drafting ink, DIN-flavoured condensed type, a real title block.
   Built on Bootstrap 5.3.
   ============================================================ */

:root{
  --paper:#f4f6f4;          /* drafting vellum */
  --grid:#e2e8e6;           /* faint layout grid on the vellum */
  --sheet:#ffffff;          /* the drawing sheet itself */
  --ink:#1c2b36;            /* blue-black drawing ink */
  --ink-soft:#51626f;
  --line:#c7d2d9;           /* thin construction lines */
  --blue:#2660a4;           /* prussian drafting blue */
  --blue-deep:#143d66;
  --stamp-green:#1f7a4d;
  --stamp-red:#b23a32;
  --amber:#b97a16;

  --f-disp:"Barlow Condensed",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-body-font-family:var(--f-body);
  --bs-border-color:var(--line);
  --bs-link-color:var(--blue);
}

[data-bs-theme=dark]{
  --paper:#0f171e;
  --grid:#16222b;
  --sheet:#152029;
  --ink:#e8eef2;
  --ink-soft:#9db0bd;
  --line:#2c3d4a;
  --blue:#6da8e0;
  --blue-deep:#a9cdf0;
  --stamp-green:#4ec78b;
  --stamp-red:#f08a80;
  --amber:#e0a84e;
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
}

body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  color:var(--ink);
  font-size:.95rem;
}

/* ---------- top bar ---------- */
.topbar{
  background:var(--blue-deep);
  border-bottom:3px solid var(--blue);
  padding:.4rem 0;
}
[data-bs-theme=dark] .topbar{background:#0b2a45;border-bottom-color:#1d4f7d}
.topbar .btn-outline-light{--bs-btn-border-color:rgba(255,255,255,.45);font-family:var(--f-disp);letter-spacing:.04em}
.brand-mark{
  display:grid;place-items:center;width:2rem;height:2rem;
  background:#fff;color:var(--blue-deep);border-radius:50%;
  font-size:1.05rem;
}
.brand-word{font-family:var(--f-disp);font-weight:700;font-size:1.35rem;letter-spacing:.02em;color:#fff}
.brand-word span{font-weight:500;opacity:.85}
.brand-std{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  border:1px solid rgba(255,255,255,.5);color:#fff;
  padding:.15rem .45rem;margin-left:.4rem;border-radius:2px;
}

/* ---------- hero ---------- */
.hero{padding:2.6rem 0 2.1rem;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.5rem;
}
.hero h1{
  font-family:var(--f-disp);font-weight:700;letter-spacing:.01em;
  font-size:clamp(2rem,4.5vw,3.1rem);max-width:34ch;
}
.hero h1 em{font-style:normal;color:var(--blue);border-bottom:4px solid var(--blue)}
.hero .lede{max-width:62ch;color:var(--ink-soft);margin:.7rem 0 1rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-chips span{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  border:1px solid var(--line);background:var(--sheet);
  padding:.28rem .6rem;border-radius:2px;color:var(--ink-soft);
}

.main-grid{padding:1.8rem 0 3rem}
.col-title{font-family:var(--f-disp);font-weight:600;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase}

/* ---------- input accordion ---------- */
.input-acc .accordion-item{
  background:var(--sheet);border:1px solid var(--line);border-radius:0;
}
.input-acc .accordion-item+.accordion-item{border-top:0}
.input-acc .accordion-button{
  background:var(--sheet);color:var(--ink);
  font-family:var(--f-disp);font-weight:600;font-size:1.02rem;letter-spacing:.04em;
  padding:.7rem .9rem;box-shadow:none;
}
.input-acc .accordion-button:not(.collapsed){
  background:color-mix(in srgb,var(--blue) 9%,var(--sheet));
  border-bottom:1px solid var(--line);
}
.input-acc .accordion-button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.grp-no{
  font-family:var(--f-mono);font-size:.7rem;color:var(--blue);
  border:1px solid currentColor;border-radius:2px;
  width:1.35rem;height:1.35rem;display:inline-grid;place-items:center;margin-right:.6rem;
}
.form-label{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem;
}
.form-control,.form-select{
  border-radius:2px;border-color:var(--line);
  background:var(--sheet);color:var(--ink);
  font-family:var(--f-mono);font-size:.82rem;
}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .15rem color-mix(in srgb,var(--blue) 25%,transparent)}
.input-group-text{
  border-radius:2px;border-color:var(--line);
  background:color-mix(in srgb,var(--ink) 5%,var(--sheet));
  font-family:var(--f-mono);font-size:.7rem;color:var(--ink-soft);
}
.info{color:var(--blue);cursor:help;margin-left:.15rem}
.is-invalid{border-color:var(--stamp-red)!important}

/* ---------- the drawing sheet ---------- */
.sheet{
  position:relative;background:var(--sheet);
  border:1.6px solid var(--ink);
  box-shadow:inset 0 0 0 5px var(--sheet),inset 0 0 0 6px var(--ink),
             0 14px 34px -18px rgba(16,34,48,.45);
  padding:1.6rem 1.6rem 0;
}
.sheet-corner{position:absolute;width:14px;height:14px;border-color:var(--ink);border-style:solid;border-width:0}
.sheet-corner.tl{top:-1px;left:-1px;border-top-width:4px;border-left-width:4px}
.sheet-corner.tr{top:-1px;right:-1px;border-top-width:4px;border-right-width:4px}
.sheet-corner.bl{bottom:-1px;left:-1px;border-bottom-width:4px;border-left-width:4px}
.sheet-corner.br{bottom:-1px;right:-1px;border-bottom-width:4px;border-right-width:4px}

.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.sheet-title{font-family:var(--f-disp);font-weight:700;font-size:1.7rem;margin:0}

/* verdict stamp */
.stamp{
  align-self:center;transform:rotate(-5deg);
  font-family:var(--f-disp);font-weight:700;font-size:1.5rem;letter-spacing:.18em;
  padding:.15rem .9rem;border:3px double currentColor;border-radius:3px;
  text-transform:uppercase;user-select:none;
}
.stamp-ok{color:var(--stamp-green)}
.stamp-bad{color:var(--stamp-red)}
.stamp.bump{animation:stamp-in .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp-in{0%{transform:rotate(-5deg) scale(1.55);opacity:0}100%{transform:rotate(-5deg) scale(1);opacity:1}}

/* KPI blocks */
.kpi{
  border:1px solid var(--line);padding:.75rem .9rem;
  background:color-mix(in srgb,var(--ink) 2.5%,var(--sheet));
}
.kpi-prime{border:1.5px solid var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--sheet))}
.kpi-label{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem}
.kpi-value{font-family:var(--f-disp);font-weight:700;font-size:2rem;line-height:1;margin:0;color:var(--ink)}
.kpi-prime .kpi-value{font-size:2.7rem;color:var(--blue-deep)}
[data-bs-theme=dark] .kpi-prime .kpi-value{color:var(--blue)}
.kpi-unit{font-size:.95rem;font-weight:500;margin-left:.3rem;color:var(--ink-soft)}
.kpi-sub{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-soft);margin:.35rem 0 0}

/* panels */
.panel{border:1px solid var(--line);padding:.85rem .95rem;background:var(--sheet)}
.panel-title{
  font-family:var(--f-disp);font-weight:600;font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.65rem;
}
.panel-de{font-family:var(--f-mono);font-weight:400;font-size:.62rem;letter-spacing:.1em;color:var(--ink-soft);margin-left:.4rem;text-transform:none}
.panel-foot{font-size:.72rem;color:var(--ink-soft);margin:.6rem 0 0}

/* utilisation bars */
.ubar{margin-bottom:.65rem}
.ubar:last-child{margin-bottom:0}
.ubar-top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.7rem;margin-bottom:.2rem}
.ubar-name{color:var(--ink)}
.ubar-val{font-weight:600}
.ubar-track{position:relative;height:.7rem;background:color-mix(in srgb,var(--ink) 7%,var(--sheet));border:1px solid var(--line)}
.ubar-fill{position:absolute;inset:0 auto 0 0;transition:width .45s ease}
.ubar-mark{position:absolute;top:-3px;bottom:-3px;left:100%;width:2px;background:var(--ink)}
.ubar-track .ubar-mark{left:calc(100% - 1px)}
.u-ok .ubar-fill{background:var(--stamp-green)}
.u-warn .ubar-fill{background:var(--amber)}
.u-bad .ubar-fill{background:var(--stamp-red)}
.u-bad .ubar-val{color:var(--stamp-red)}
.u-skip{opacity:.55}

/* joint diagram */
.diagram svg{width:100%;height:auto;display:block}
.diagram .dg-axis{stroke:var(--ink);stroke-width:1.4}
.diagram .dg-bolt{stroke:var(--blue);stroke-width:2.4;fill:none}
.diagram .dg-part{stroke:var(--ink);stroke-width:2.4;fill:none}
.diagram .dg-dim{stroke:var(--ink-soft);stroke-width:1}
.diagram .dg-load{stroke:var(--stamp-red);stroke-width:2.2}
.diagram .dg-thin{stroke:var(--ink-soft);stroke-width:.8;stroke-dasharray:4 3}
.diagram text{font-family:var(--f-mono);font-size:11px;fill:var(--ink)}
.diagram .dg-mut{fill:var(--ink-soft)}
.diagram .dg-blue{fill:var(--blue)}
.diagram .dg-red{fill:var(--stamp-red)}
.diagram .dg-hatchS{fill:url(#hatchS);opacity:.5}
.diagram .dg-hatchP{fill:url(#hatchP);opacity:.5}

/* derived chips */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips .chip{
  font-family:var(--f-mono);font-size:.7rem;
  border:1px solid var(--line);padding:.3rem .55rem;background:color-mix(in srgb,var(--ink) 3%,var(--sheet));
}
.chips .chip b{color:var(--blue);font-weight:600}

/* calculation trail */
.trail-panel{padding:0}
.trail-btn{font-family:var(--f-disp);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.95rem;color:var(--ink);background:var(--sheet)}
.trail-btn:not(.collapsed){background:color-mix(in srgb,var(--blue) 8%,var(--sheet));color:var(--ink)}
.trail-table{font-family:var(--f-mono);font-size:.74rem}
.trail-table th{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-color:var(--line)}
.trail-table td{border-color:var(--line);vertical-align:top;color:var(--ink)}
.trail-table .t-step{color:var(--blue);font-weight:600;white-space:nowrap}
.trail-table .t-res{white-space:nowrap;font-weight:600}
.trail-table tr.t-check td{background:color-mix(in srgb,var(--blue) 5%,var(--sheet))}
.badge-pass,.badge-fail{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;padding:.15rem .4rem;border:1px solid currentColor;border-radius:2px}
.badge-pass{color:var(--stamp-green)}
.badge-fail{color:var(--stamp-red)}

.assumptions ul{margin:0;padding-left:1.1rem;font-size:.78rem;color:var(--ink-soft)}
.assumptions li{margin-bottom:.2rem}

/* title block — the ISO-7200 style strip */
.titleblock{
  display:flex;flex-wrap:wrap;margin:1.4rem -1.6rem 0;
  border-top:1.6px solid var(--ink);
}
.tb-cell{
  border-right:1px solid var(--line);padding:.45rem .8rem .5rem;min-width:7.5rem;
}
.tb-cell:last-child{border-right:0}
.tb-grow{flex:1 1 12rem}
.tb-cell label{
  display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.1rem;
}
.tb-cell span,.tb-cell input{
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;color:var(--ink);
}
.tb-cell input{border:0;background:transparent;width:100%;padding:0}
.tb-cell input:focus{outline:1px dashed var(--blue);outline-offset:2px}

.disclaimer{font-size:.74rem;color:var(--ink-soft);margin:.9rem .2rem 0}

.footer{
  border-top:1px solid var(--line);padding:1rem 0 1.4rem;
  font-family:var(--f-mono);font-size:.68rem;color:var(--ink-soft);
}

/* sticky results on wide screens */
@media (min-width:992px){
  .sheet{position:sticky;top:1rem}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- print: the calculation sheet only ---------- */
@media print{
  body{background:#fff}
  .topbar,.hero,.footer,.col-lg-5,.disclaimer,#btnReset{display:none!important}
  .col-lg-7{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
  .sheet{position:static;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px var(--ink)}
  .main-grid{padding:0}
  #trailBody{display:block!important;height:auto!important}
  .trail-btn::after{display:none}
}