/*
Theme Name: ЗТС — реконструкция
Theme URI: https://zavod-zts.ru
Author: ООО «Завод Трубных Систем»
Description: Страница-заглушка в стиле панели Soft Industrial Dashboard.
Version: 1.2.3
Text Domain: zts-stub
*/

:root{
  --bg:#dcdcdc;
  --ink:#1b1b1b;
  --grey:#9a9a9a;
  --grey2:#b9b9b9;
  --card:#ffffff;
  --chip:#f4f5f6;
  --line:#e6e6e3;
  --accent:#d20a11;
  --accent-hi:#e11b22;
  --accent-soft:rgba(210,10,17,.10);
  --r-ib:12px; --r-card:16px; --r-panel:28px;
  --shadow-card:0 12px 34px -20px rgba(20,20,20,.28), 0 2px 6px -2px rgba(20,20,20,.06);
  --shadow-soft:0 6px 16px -10px rgba(20,20,20,.25);
  --chip-edge:inset 0 0 0 1px rgba(20,20,20,.04);
  --cold:#2f7fd0;
  --panel:linear-gradient(158deg, #edeff1 0%, #eef0f0 38%, #f6ebd6 100%);
  color-scheme:light;
}
html.dark{
  --bg:#15171b; --ink:#eef0f2; --grey:#9298a1; --grey2:#5f6670;
  --card:#22252b; --chip:#2b2f36; --line:#33373e;
  --accent-soft:rgba(210,10,17,.22);
  --panel:linear-gradient(158deg, #202329 0%, #1d2026 42%, #26201a 100%);
  --shadow-card:0 14px 34px -20px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-soft:0 6px 16px -10px rgba(0,0,0,.5);
  --chip-edge:inset 0 0 0 1px rgba(255,255,255,.05);
  color-scheme:dark;
}
html.dark .logo{background:#eceef1; padding:5px 10px; border-radius:10px}
html.dark .ib{color:#c4c9d0}
html.dark .ib:link,html.dark .ib:visited{color:#c4c9d0}
html.dark .ib:hover,html.dark .ib.on{background:#31353d}
html.dark .pg-line{background:#3a3f47}
html.dark .pg-nodes b{border-color:#4a5058; background:var(--card)}
html.dark .contact a:not(.btn-accent){color:var(--ink)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; height:100vh; overflow:hidden;
  background:var(--bg); color:var(--ink);
  font-family:'Onest',system-ui,sans-serif; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button,a.btn-accent,a.ib{font-family:inherit; cursor:pointer}
.muted{color:var(--grey)}
.num{font-variant-numeric:tabular-nums lining-nums}
.skip{
  position:absolute; left:12px; top:-40px; z-index:80;
  background:var(--ink); color:#fff; padding:.5em .9em; border-radius:999px; font-size:13px; font-weight:600;
}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.screen{height:100vh; display:grid; place-items:center}

.app{
  position:relative;
  width:min(98vw, calc(98vh * 16 / 9));
  height:min(98vh, calc(98vw * 9 / 16));
  display:flex; flex-direction:column; border-radius:var(--r-panel); overflow:hidden;
  background:var(--panel);
  box-shadow:0 50px 90px -40px rgba(30,26,18,.4), 0 8px 24px -12px rgba(30,26,18,.18);
  padding:clamp(16px,2.4vh,34px) clamp(20px,2.4vw,42px) clamp(28px,4vh,52px);
}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:flex; align-items:center; flex:none}
.logo img{height:clamp(30px,3.4vh,40px); width:auto}
.top-actions{display:flex; gap:10px; align-items:center}
.live{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--accent);flex:none}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:livep 1.4s ease-in-out infinite}
@keyframes livep{0%,100%{opacity:1}50%{opacity:.35}}
.ib{width:42px;height:42px;border-radius:var(--r-ib);background:var(--chip);border:0;display:grid;place-items:center;
  color:#3a3a3a; box-shadow:var(--chip-edge); transition:.16s; text-decoration:none}
.ib:link,.ib:visited{color:#3a3a3a}
.ib:hover,.ib.on{background:#fff; box-shadow:var(--shadow-soft)}
.ib svg{width:19px;height:19px}
.ic-moon{display:none}
html.dark #themeBtn .ic-sun{display:none}
html.dark #themeBtn .ic-moon{display:inline}

.board{flex:1; min-height:0; display:grid;
  grid-template-columns:auto clamp(280px,22vw,340px) minmax(0,1fr) clamp(280px,22vw,340px);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:
    "rail left hero right"
    "rail mid mid mid";
  column-gap:clamp(16px,1.8vw,32px);
  row-gap:clamp(16px,2vh,24px);
  margin-top:clamp(16px,2.2vh,28px);
  align-items:start}

.rail{grid-area:rail; display:flex; flex-direction:column; gap:12px}

.left-main{grid-area:left; display:flex; flex-direction:column; gap:12px; padding-top:4px; min-width:0}
.left-main .card{padding:15px 16px}

.hero{grid-area:hero; align-self:center; justify-self:center; text-align:center; min-width:0; padding-inline:clamp(8px,1.4vw,20px)}
.htitle{margin:0; font-size:clamp(2.6rem,1.2rem + 4.2vw,5rem); font-weight:800; line-height:.94; letter-spacing:-.045em}
.hsub{margin:18px auto 0; color:var(--grey); font-size:clamp(15px,.85rem + .35vw,18px); line-height:1.45; max-width:28ch}

.card{background:var(--card); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow-card)}
.card-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card-hd .ttl{font-size:15px; font-weight:600}
.card-hd .sub{font-size:12.5px; color:var(--grey); margin-top:2px}

.btn-accent{margin-top:14px; width:100%; background:var(--accent); color:#fff; -webkit-text-fill-color:#fff; border:0; border-radius:11px;
  padding:13px 14px; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 12px 24px -10px rgba(210,10,17,.55); transition:.16s; text-decoration:none}
.btn-accent:link,.btn-accent:visited,.btn-accent:hover,.btn-accent:active{color:#fff; -webkit-text-fill-color:#fff}
.btn-accent:hover{background:var(--accent-hi); box-shadow:0 16px 30px -10px rgba(210,10,17,.6)}
.btn-accent .chev{margin-left:auto; opacity:.85}

.metric .m-row{display:flex; align-items:center; justify-content:space-between; margin-top:16px}
.m-ico{width:34px;height:34px;border-radius:10px;background:var(--chip);display:grid;place-items:center;color:#6a6a6a;box-shadow:var(--chip-edge)}
.m-val{font-size:clamp(30px,3.2vh,40px); font-weight:700; letter-spacing:-.04em; line-height:1}
.m-val small{font-size:15px; font-weight:500; color:var(--grey); margin-left:4px; letter-spacing:0}

.mid{grid-area:mid; min-width:0; display:flex; flex-direction:row; gap:13px}
.prod{padding:14px 16px; flex:1; min-width:0}
.prod .code{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--accent); margin-bottom:5px}
.prod .ttl{font-size:14.5px; font-weight:600; line-height:1.25}
.prod-meta{margin-top:10px; display:flex; align-items:baseline; gap:8px}
.prod-meta .v{font-size:22px; font-weight:700; letter-spacing:-.04em; line-height:1}
.prod-meta .u{font-size:12px; color:var(--grey)}

.right{grid-area:right; display:flex; flex-direction:column; gap:12px; min-width:0; padding-top:4px}
.right .card{padding:15px 16px}

.pg-track{position:relative; margin-top:16px; height:16px}
.pg-line{position:absolute; left:5%; right:5%; top:6px; height:3px; background:#e8e6e1; border-radius:3px}
.pg-fill{position:absolute; left:5%; top:6px; height:3px; width:38%; background:var(--accent); border-radius:3px}
.pg-nodes{position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; padding-inline:5%}
.pg-nodes b{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #e2e0db; display:block}
.pg-nodes b.done{border-color:var(--accent); background:var(--accent)}
.pg-nodes b.active{border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft); width:16px;height:16px}
.pg-labels{display:flex; justify-content:space-between; margin-top:12px; font-size:12px; color:var(--grey)}
.pg-labels span.act{color:var(--ink); font-weight:700}
.pg-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); text-align:center; font-size:12.5px; color:var(--grey)}
.pg-foot b{color:var(--ink); font-weight:600}

.contact a:not(.btn-accent){display:block; font-size:14px; font-weight:600; color:var(--ink); margin-top:8px; text-decoration:none}
.contact a:not(.btn-accent):visited{color:var(--ink)}
.contact a:not(.btn-accent):hover{color:var(--accent)}
.contact .addr{margin-top:8px; font-size:12.5px; color:var(--grey); line-height:1.4}
.contact .btn-accent,
.contact .btn-accent:link,
.contact .btn-accent:visited,
.contact .btn-accent:hover,
.contact .btn-accent:active{color:#fff; -webkit-text-fill-color:#fff}

@media(max-width:1080px){
  body{height:auto; overflow:auto}
  .screen{height:auto; display:block; padding:12px}
  .app{width:100%; height:auto; display:block}
  .board{grid-template-columns:auto 1fr; grid-template-rows:auto; grid-template-areas:"hero hero" "rail left" "mid mid" "right right"; align-items:stretch}
  .hero{padding:8px 0 4px}
  .htitle{max-width:none; font-size:clamp(2.1rem,8vw,3.2rem)}
  .mid{flex-wrap:wrap}
  .mid .prod{flex:1; min-width:200px}
}
@media(max-width:720px){
  .board{grid-template-columns:1fr; grid-template-areas:"hero" "left" "mid" "right"}
  .rail{display:none}
  .mid{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important}}