/* ZB Auto — shared styles */

:root{
  --ink:#15181C;
  --ink-2:#3B434E;
  --steel:#6E7885;
  --concrete:#E7E5E0;
  --concrete-2:#DAD7D1;
  --paper:#FFFFFF;
  --blue:#1B44C8;
  --blue-dark:#132F94;
  --blue-wash:#EDF1FD;
  --amber:#E8A200;
  --green:#1E7F4F;
  --green-wash:#E6F2EB;
  --red:#B4342A;
  --red-wash:#FBEBE9;
  --rule:rgba(21,24,28,.16);

  --shell:min(1180px, 100% - 2.5rem);
  --wide:min(1440px, 100% - 2.5rem);
  --s--1:.86rem;
  --s-0:1.0625rem;
  --s-1:1.28rem;
  --s-2:clamp(1.4rem,2.4vw,1.75rem);
  --s-3:clamp(1.85rem,4vw,2.6rem);
  --s-4:clamp(2.5rem,7.5vw,4.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

body{
  margin:0;background:var(--concrete);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;font-weight:800;letter-spacing:-.028em;line-height:1.05;margin:0}
p{margin:0 0 1rem;max-width:68ch}
a{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
img,iframe{max-width:100%}

.shell{width:var(--shell);margin-inline:auto}
.wide{width:var(--wide);margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.muted{color:var(--steel)}
.small{font-size:var(--s--1)}
.right{text-align:right}
.stack>*+*{margin-top:1rem}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.hidden{display:none !important}

/* ---------------- header ---------------- */
.top{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--concrete);border-bottom:3px solid var(--blue)}
.top .bar{display:flex;align-items:center;gap:1.25rem;min-height:64px;flex-wrap:wrap}
.mark{font-family:"Archivo";font-weight:800;font-size:1.35rem;letter-spacing:-.04em;color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:.4rem}
.mark em{font-style:normal;font-weight:600;font-size:.64rem;letter-spacing:.2em;color:var(--amber);transform:translateY(-2px)}
.top nav{display:flex;gap:1.3rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.top nav a{color:var(--concrete);text-decoration:none;font-size:var(--s--1);font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--amber)}
.top nav a.on{border-bottom-color:var(--blue);color:#fff}
.tel{font-family:"Archivo";font-weight:700;font-size:1.02rem;color:#fff;text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--amber)}
.whoami{font-size:var(--s--1);color:#9AA3AF}
@media (max-width:820px){.top nav{gap:.9rem;width:100%;margin:0 0 .6rem;order:3}}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:"Archivo";font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:.75rem 1.35rem;border-radius:3px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s;background:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--concrete)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--concrete-2)}
.btn-light:hover{border-color:var(--steel)}
.btn-good{background:var(--green);color:#fff}
.btn-danger{background:var(--paper);color:var(--red);border-color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-lg{padding:.95rem 1.8rem;font-size:1.08rem}
.btn-sm{padding:.42rem .8rem;font-size:.86rem;border-width:1.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------------- forms ---------------- */
label{display:block;font-weight:600;font-size:var(--s--1);margin-bottom:.3rem}
label .opt{font-weight:400;color:var(--steel)}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:.65rem .75rem;border:1.5px solid var(--concrete-2);border-radius:3px;background:#fff}
input:hover,select:hover,textarea:hover{border-color:var(--steel)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(27,68,200,.16)}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:1.05rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- panels & cards ---------------- */
.card{background:var(--paper);border:1px solid var(--rule);padding:1.35rem 1.5rem;margin-bottom:1rem}
.card.accent{border-top:4px solid var(--blue)}
.card.warn{border-left:4px solid var(--amber)}
.card h3{font-size:var(--s-1);margin-bottom:.35rem}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:1.75rem}
.stat{background:var(--paper);padding:1.15rem 1.25rem}
.stat .n{font-family:"Archivo";font-weight:800;font-size:1.9rem;letter-spacing:-.03em;line-height:1.1;display:block}
.stat .k{font-size:var(--s--1);color:var(--steel);margin-top:.15rem}
.stat.alert .n{color:var(--blue)}

/* ---------------- tables ---------------- */
table.data{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule)}
table.data th{text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--steel);
  padding:.7rem .85rem;border-bottom:2px solid var(--rule);background:#FAF9F7;white-space:nowrap}
table.data td{padding:.75rem .85rem;border-bottom:1px solid var(--rule);vertical-align:top;font-size:.96rem}
table.data tbody tr:hover{background:#FAFAF8}
table.data tr.clickable{cursor:pointer}
.table-wrap{overflow-x:auto;margin-bottom:1.5rem}

/* ---------------- pills ---------------- */
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:.18rem .5rem;border-radius:2px;background:var(--concrete-2);color:var(--ink-2);white-space:nowrap}
.pill.blue{background:var(--blue-wash);color:var(--blue-dark)}
.pill.amber{background:#FDF1D8;color:#7A5600}
.pill.green{background:var(--green-wash);color:#14532D}
.pill.red{background:var(--red-wash);color:#7A241A}
.pill.dark{background:var(--ink);color:#fff}

/* urgency markers on estimate lines */
.urg{display:inline-block;width:3px;align-self:stretch;background:var(--steel)}
.urg-now{background:var(--red)}
.urg-soon{background:var(--amber)}
.urg-monitor{background:var(--steel)}

/* ---------------- messages ---------------- */
.msg{padding:.85rem 1rem;border-radius:3px;font-size:.97rem;margin:1rem 0}
.msg.ok{background:var(--green-wash);border-left:4px solid var(--green);color:#14532D}
.msg.bad{background:var(--red-wash);border-left:4px solid var(--red);color:#7A241A}
.msg.info{background:var(--blue-wash);border-left:4px solid var(--blue);color:#122B7A}
.msg:empty{display:none}

/* ---------------- tabs ---------------- */
.tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--rule);margin-bottom:1.75rem;flex-wrap:wrap}
.tab{font-family:"Archivo";font-weight:700;font-size:.98rem;background:none;border:0;cursor:pointer;
  padding:.7rem 1.1rem;color:var(--steel);border-bottom:3px solid transparent;margin-bottom:-2px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--blue)}

/* ---------------- modal ---------------- */
.overlay{position:fixed;inset:0;background:rgba(21,24,28,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:3vh 1rem;z-index:80;overflow-y:auto}
.modal{background:var(--paper);border-top:4px solid var(--blue);width:min(720px,100%);padding:1.75rem}
.modal h2{font-size:var(--s-2);margin-bottom:1rem}

/* ---------------- misc layout ---------------- */
.page{padding:2.25rem 0 4rem}
.page-head{margin-bottom:1.75rem}
.page-head h1{font-size:var(--s-3)}
.page-head p{color:var(--ink-2);margin-top:.4rem}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.empty{color:var(--steel);padding:2rem 0;text-align:center}
.bar-track{background:var(--concrete-2);height:8px;border-radius:2px;overflow:hidden}
.bar-fill{background:var(--blue);height:100%}

footer.site{background:var(--ink);color:#98A1AD;padding:2.25rem 0;font-size:var(--s--1);margin-top:auto}
footer.site a{color:var(--concrete);text-decoration:none}
footer.site a:hover{color:var(--amber)}