/* The scenes of the inner pages in the hero app window (js/hs-scenes.js, 22.10.2026).
   The desktop window is 1200 x 760 logical px (.aw), the phone 390 x 600 (.mp, .ps--m); colors come from the --aw-* tokens of
   main-hero.css, so both themes work. */
.ps{display:flex;flex-direction:column;gap:16px;padding:24px 30px}
.ps--m{gap:10px;padding:0 0 12px}
.ps .aw-h small{font:500 12px Inter,sans-serif;color:var(--aw-muted)}
.ps--m > :not(.mp-h){margin-left:12px;margin-right:12px}

/* shared */
.ps-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font:700 11px Inter,sans-serif;white-space:nowrap;
  color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent);border:1px solid color-mix(in srgb,var(--k) 40%,transparent)}
.ps-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--k)}
.ps-av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 11px Inter,sans-serif;color:#fff;background:hsl(var(--h) 55% 45%)}
.ps-panel{background:var(--aw-panel);border:1px solid var(--aw-line);border-radius:14px;overflow:hidden}
.ps-ph{display:flex;align-items:baseline;gap:10px;padding:14px 18px 10px}
.ps-ph b{font:700 10.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hs-lime)}
.ps-ph span{font:400 11.5px Inter,sans-serif;color:var(--aw-muted)}
.ps--m .ps-ph{padding:12px 14px 8px}

.ps-kpis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.ps-kpi{position:relative;padding:14px;border-radius:12px;background:var(--aw-panel);border:1px solid var(--aw-line);overflow:hidden}
.ps-kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c)}
.ps-kpi-l{display:flex;align-items:center;gap:7px;font:600 11.5px/1.25 Inter,sans-serif;color:var(--aw-muted)}
.ps-kpi-l i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.ps-kpi b{display:block;font:800 30px/1.05 Montserrat,sans-serif;color:var(--c);margin-top:8px;font-variant-numeric:tabular-nums}
.ps-kpi b small{font:700 10px Inter,sans-serif;letter-spacing:.08em;color:var(--aw-muted);margin-left:5px;text-transform:uppercase}
.ps-kpi > span{display:block;font:500 11.5px Inter,sans-serif;color:var(--aw-muted);margin-top:4px}
.ps--m .ps-kpis{gap:8px}
.ps--m .ps-kpi{padding:10px}
.ps--m .ps-kpi-l{font-size:10.5px}
.ps--m .ps-kpi b{font-size:22px;margin-top:6px}
.ps--m .ps-kpi b small{display:none}

/* board */
.ps-board{flex:1;min-height:0;overflow:hidden}
.ps-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;height:100%}
.ps--m .ps-cols{grid-auto-columns:250px;width:max-content;gap:10px}
.ps-col{display:flex;flex-direction:column;min-width:0;padding:10px;border-radius:14px;background:var(--aw-panel);border:1px solid var(--aw-line)}
.ps-col-h{display:flex;align-items:center;gap:8px;padding:4px 4px 12px;font:700 13px Inter,sans-serif}
.ps-col-h i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.ps-col-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-n{min-width:24px;height:22px;padding:0 7px;border-radius:99px;display:grid;place-items:center;background:var(--aw-panel2);font:700 11px Inter,sans-serif;color:var(--aw-muted);font-variant-numeric:tabular-nums}
.ps-cards{display:flex;flex-direction:column;gap:9px}
.ps-card{position:relative;padding:12px;border-radius:10px;background:var(--aw-panel2);border:1px solid var(--aw-line);transition:border-color .3s,rotate .3s,scale .3s,box-shadow .3s}
.ps-card-t{font:700 13px/1.3 Inter,sans-serif}
.ps-card small{display:block;font:500 11.5px/1.35 Inter,sans-serif;color:var(--aw-muted);margin-top:3px}
.ps-card-f{display:flex;align-items:center;gap:8px;margin-top:10px}
.ps-card-f b{font:800 13px Inter,sans-serif;font-variant-numeric:tabular-nums}
.ps-card-f .ps-chip{margin-left:auto}
.ps-card.is-sel{border-color:var(--hs-lime);rotate:-1.5deg;scale:1.04;box-shadow:0 22px 40px -16px rgba(0,0,0,.7);z-index:3}

/* table */
.ps-tbl{flex:1;min-height:0;display:flex;flex-direction:column}
.ps-tr{display:grid;grid-template-columns:1.6fr repeat(calc(var(--n) - 1),1fr) 150px;align-items:center;gap:12px;padding:0 18px;height:60px;
  border-top:1px solid var(--aw-line);font:500 13px Inter,sans-serif;transition:background-color .3s}
.ps-th{height:40px;border-top:0;font:700 10.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--aw-muted);background:var(--aw-panel2)}
.ps-tr > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-td1{font-weight:700}
.ps-rows{flex:1;min-height:0;overflow:hidden}
.ps-rows .ps-tr:first-child{border-top:0}
.ps-tr.is-sel{background:color-mix(in srgb,var(--hs-lime) 7%,transparent);box-shadow:inset 3px 0 0 var(--hs-lime)}
.ps-tr.is-warn{box-shadow:inset 3px 0 0 #ef4444}
.ps--m .ps-tr{grid-template-columns:1fr auto;height:auto;min-height:58px;padding:9px 12px}
.ps-tr-m{min-width:0}
.ps-tr-m b{display:block;font:700 13px Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-tr-m small{display:block;font:500 11px Inter,sans-serif;color:var(--aw-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps--m .ps-chip{height:22px;padding:0 8px;font-size:10.5px}

/* dash */
.ps-dgrid{flex:1;min-height:0;display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.ps--m .ps-dgrid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px}
.ps-chart{display:flex;flex-direction:column}
.ps-bars{flex:1;min-height:200px;display:flex;align-items:flex-end;gap:12px;padding:8px 18px 14px}
.ps--m .ps-bars{min-height:150px;gap:6px;padding:4px 10px 10px}
.ps-bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.ps-bar b{font:700 11.5px Inter,sans-serif;color:var(--aw-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-bar i{display:block;width:100%;height:var(--h);border-radius:8px 8px 3px 3px;transform-origin:50% 100%;
  background:linear-gradient(180deg,#4f86ff,color-mix(in srgb,#4f86ff 45%,transparent))}
.ps-bar span{font:600 11px Inter,sans-serif;color:var(--aw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ps-bar.is-hot i{background:linear-gradient(180deg,var(--hs-lime),color-mix(in srgb,var(--hs-lime) 40%,transparent))}
.ps-bar.is-bad i{background:linear-gradient(180deg,#ef4444,color-mix(in srgb,#ef4444 40%,transparent))}
.ps-bar.is-sel b{color:var(--aw-text)}
.ps-bar.is-sel i{box-shadow:0 0 0 2px var(--hs-lime)}
.ps--m .ps-bar b{font-size:9.5px}
.ps--m .ps-bar span{font-size:9.5px}
.ps-side{display:flex;flex-direction:column;min-height:0}
.ps-list{padding:0 10px}
.ps-li{display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--aw-line);font:500 12.5px Inter,sans-serif}
.ps-li:first-child{border-top:0}
.ps-li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-li b{font:800 13px Inter,sans-serif;font-variant-numeric:tabular-nums}
.ps-li.is-bad b{color:#ef4444}
.ps-alert{margin:auto 12px 12px;padding:12px 14px;border-radius:10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.45)}
.ps-alert b{display:flex;align-items:center;gap:7px;font:800 12.5px Inter,sans-serif;color:#ff8a8a}
.ps-alert svg{width:16px;height:16px;flex:none}
.ps-alert p{font:400 12px/1.45 Inter,sans-serif;color:var(--aw-text);opacity:.85;margin-top:4px}
[data-theme="light"] .ps-alert b{color:#c62828}
.ps--m .ps-side .ps-li:nth-child(n+4){display:none}
.ps--m .ps-alert{margin:6px 10px 10px}

/* toggles */
.ps-tgrid{flex:1;min-height:0;display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.ps--m .ps-tgrid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px}
.ps-svcs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.ps--m .ps-svcs{grid-template-columns:1fr;gap:7px}
.ps-svc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--aw-panel);border:1px solid var(--aw-line)}
.ps--m .ps-svc{padding:9px 12px}
.ps-logo{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;font:800 14px Inter,sans-serif;color:#fff;background:var(--c)}
.ps--m .ps-logo{width:32px;height:32px;font-size:12px}
.ps-svc > div{flex:1;min-width:0}
.ps-svc b{display:block;font:700 13px Inter,sans-serif}
.ps-svc small{display:block;font:500 11px Inter,sans-serif;color:var(--aw-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-sw{position:relative;width:40px;height:22px;border-radius:99px;flex:none;background:var(--aw-panel2);border:1px solid var(--aw-line);transition:background-color .35s}
.ps-sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#94a3b8;transition:transform .35s var(--hs-ease),background-color .35s}
.ps-sw.is-on{background:color-mix(in srgb,var(--hs-lime) 30%,transparent);border-color:var(--hs-lime)}
.ps-sw.is-on i{transform:translateX(18px);background:var(--hs-lime)}
.ps-sw.is-busy i{animation:ps-pulse .6s ease-in-out infinite}
@keyframes ps-pulse{50%{box-shadow:0 0 0 5px rgba(200,240,49,.25)}}
.ps-log{display:flex;flex-direction:column;min-height:0}
.ps-live{margin-left:auto;display:flex;align-items:center;gap:6px}
.ps-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.ps-logs{flex:1;min-height:0;overflow:hidden;padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.ps-lg{display:flex;gap:10px;padding:10px 12px;border-radius:10px;background:var(--aw-panel2)}
.ps-lg-ic{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(34,197,94,.18);color:#22c55e}
.ps-lg-ic svg{width:12px;height:12px}
.ps-lg b{display:block;font:700 12.5px Inter,sans-serif}
.ps-lg small{display:block;font:500 11px Inter,sans-serif;color:var(--aw-muted);margin-top:2px}

/* builder */
.ps-build{flex:1;min-height:0;display:grid;grid-template-columns:200px 1fr;grid-template-rows:1fr auto;gap:14px}
.ps-build .ps-kpis{grid-column:1 / -1}
.ps--m .ps-build{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:8px}
.ps-pal{display:flex;flex-direction:column;gap:8px}
.ps--m .ps-pal{flex-direction:row;gap:6px;overflow:hidden}
.ps-pi{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:10px;background:var(--aw-panel);border:1px dashed var(--aw-line);font:600 12.5px Inter,sans-serif;transition:border-color .25s,background-color .25s}
.ps-pi span{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--aw-panel2);flex:none}
.ps-pi svg{width:12px;height:12px}
.ps-pi.is-on{border-style:solid;border-color:var(--hs-lime);background:color-mix(in srgb,var(--hs-lime) 8%,var(--aw-panel))}
.ps--m .ps-pi{padding:7px 9px;font-size:11px;white-space:nowrap;gap:6px}
.ps--m .ps-pi span{width:16px;height:16px}
.ps-canvas{display:flex;flex-direction:column;min-height:0}
.ps-cbar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--aw-line)}
.ps-cbar > i{width:9px;height:9px;border-radius:50%;background:var(--aw-line)}
.ps-cbar span{margin-left:8px;flex:1;min-width:0;height:26px;border-radius:7px;background:var(--aw-panel2);display:flex;align-items:center;padding:0 10px;font:500 11.5px Inter,sans-serif;color:var(--aw-muted);overflow:hidden;white-space:nowrap}
.ps-pub{height:30px;padding:0 14px;border-radius:8px;border:0;background:var(--hs-lime);color:#0b1f4f;font:800 12px Inter,sans-serif;cursor:default;white-space:nowrap}
.ps-pub.is-done{background:#22c55e;color:#fff}
.ps-page{flex:1;min-height:0;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:9px}
.ps-blk{padding:14px 16px;border-radius:10px;background:var(--aw-panel2);border:1px solid var(--aw-line)}
.ps-blk b{display:block;font:700 14px/1.3 Inter,sans-serif}
.ps-blk small{display:block;font:500 11.5px/1.4 Inter,sans-serif;color:var(--aw-muted);margin-top:3px}
.ps-blk--hero{padding:22px 18px;background:linear-gradient(120deg,#16307a,#0b1f4f);color:#fff;border:0}
.ps-blk--hero b{font-size:19px}
.ps-blk--hero small{color:rgba(255,255,255,.75)}
.ps-blk-c{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ps-blk-c i{height:36px;border-radius:7px;background:var(--aw-panel);border:1px solid var(--aw-line)}
.ps-blk-f{display:flex;gap:8px;margin-top:10px}
.ps-blk-f i{flex:1;height:30px;border-radius:7px;background:var(--aw-panel);border:1px solid var(--aw-line)}
.ps-blk-f em{font:800 11.5px/30px Inter,sans-serif;font-style:normal;padding:0 12px;border-radius:7px;background:var(--hs-lime);color:#0b1f4f;white-space:nowrap}
.ps--m .ps-cbar > i{display:none}
.ps--m .ps-cbar span{margin-left:0}
.ps--m .ps-page{padding:8px;gap:7px}
.ps--m .ps-blk{padding:10px 12px}
.ps--m .ps-blk--hero{padding:14px 12px}
.ps--m .ps-blk--hero b{font-size:15px}
.ps--m .ps-blk b{font-size:12.5px}

/* track */
.ps-track{flex:1;min-height:0;padding:6px 0}
.ps-stg-h,.ps-ord{display:grid;grid-template-columns:240px 1fr 150px;align-items:center;gap:18px;padding:0 18px}
.ps-stg-h{height:38px;font:700 10.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--aw-muted)}
.ps-stg-hl{display:grid;grid-template-columns:repeat(var(--n),1fr);text-align:center}
.ps-ord{position:relative;grid-template-areas:"m s c" "f f f";padding:18px;border-top:1px solid var(--aw-line);row-gap:0;transition:background-color .3s}
.ps-ord-m{grid-area:m;min-width:0}
.ps-ord-m b{display:block;font:700 13px Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-ord-m small{display:block;font:500 11.5px Inter,sans-serif;color:var(--aw-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-ord .ps-st{grid-area:c;justify-self:end}
.ps-stg{grid-area:s;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);align-items:center;height:22px}
.ps-stg i{position:relative;z-index:1;justify-self:center;width:14px;height:14px;border-radius:50%;background:var(--aw-panel2);border:2px solid var(--aw-line);transition:background-color .4s,border-color .4s,box-shadow .4s}
.ps-stg i.is-done{background:#4f86ff;border-color:#4f86ff}
.ps-stg i.is-cur{box-shadow:0 0 0 5px rgba(79,134,255,.22)}
.ps-stg-l{position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--aw-line)}
.ps-stg-l span{display:block;height:100%;border-radius:2px;background:#4f86ff}
.ps-flag{grid-area:f;display:flex;align-items:center;gap:7px;font:600 12px Inter,sans-serif;color:#ff8a8a}
.ps-flag:empty{display:none}
.ps-flag:not(:empty){margin-top:8px}
.ps-flag svg{width:15px;height:15px;flex:none}
.ps-flag span{min-width:0;line-height:1.35}
[data-theme="light"] .ps-flag{color:#c62828}
.ps-ord.is-sel{background:color-mix(in srgb,var(--hs-lime) 6%,transparent)}
.ps-ord.is-warn{box-shadow:inset 3px 0 0 #ef4444}
.ps-ord.is-warn .ps-stg i.is-cur{background:#ef4444;border-color:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.22)}
.ps--m .ps-ord{grid-template-columns:1fr auto;grid-template-areas:"m c" "s s" "f f";padding:10px 12px;row-gap:8px;gap:8px 10px}
.ps--m .ps-stg i{width:12px;height:12px}
.ps--m .ps-flag{font-size:11px}
.ps--m .ps-flag:not(:empty){margin-top:0}
[data-theme="light"] .ps-pub:not(.is-done),[data-theme="light"] .ps-blk-f em{color:#fff}
.ps-alert.is-ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.45)}
.ps-alert.is-ok b{color:#4ade80}
[data-theme="light"] .ps-alert.is-ok b{color:#15803d}
