/* ===========================================================================
   growth.css — the marketing screen

   Loaded by the lab page for the admin portal's Marketing tab. It is its own
   file rather than a block inside the page because the screen is its own
   module (assets/growth.js) and the two belong together — and because a
   stylesheet only administrators load is a stylesheet every other visitor
   does not download.

   Everything here uses the shared tokens from theme.css, so the screen
   follows whichever theme and skin the reader has chosen. There are no
   hard-coded greys: the one place colour is named directly is the three
   alarm levels and the two status words inside the recordable scenes, where
   the colour IS the information and the product names the same ones.
   =========================================================================== */

.growth{display:grid;grid-template-columns:186px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.growth{grid-template-columns:1fr}}

/* ---- the sub-navigation: this screen is a small site of its own */
.gnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
@media(max-width:900px){.gnav{position:static;flex-direction:row;flex-wrap:wrap}}
.gnav button{text-align:left;padding:7px 10px;border-radius:8px;border:1px solid transparent;
             background:none;color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer}
.gnav button:hover{background:var(--panel2);color:var(--ink)}
.gnav button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
                font-weight:600}

.gbody > .card{margin-bottom:14px}
.gbody h3{margin:0 0 8px;font-size:14px}
.gbody .lead{font-size:12.5px;color:var(--ink3);line-height:1.7;margin:0 0 12px}
.gbody p{font-size:12.5px;line-height:1.7;color:var(--ink2)}
.gbody code{font:11.5px var(--mono);background:var(--panel2);border:1px solid var(--line2);
            border-radius:5px;padding:1px 5px}
.gbody .ok{color:var(--ok)} .gbody .bad{color:var(--bad)}
.gul{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink2);line-height:1.7}

/* ---- the four numbers at the top, and the progress bar under them */
.gstats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}
@media(max-width:720px){.gstats{grid-template-columns:repeat(2,1fr)}}
.gstats .stat b{display:block;font-size:20px;letter-spacing:-.5px}
.gstats .stat span{font-size:11px;color:var(--ink3)}
.gbar{height:6px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);
      overflow:hidden}
.gbar i{display:block;height:100%;background:var(--accent)}

/* ---- a task: what, why, and the four buttons that move it */
.gtask{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:9px;
       background:var(--panel2)}
.gtask .gt-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.gtask .gt-h b{font-size:13px}
.gtask .gt-s{font:10.5px var(--mono);color:var(--ink4);margin-left:auto;white-space:nowrap}
.gtask p{margin:5px 0 0;font-size:12px;color:var(--ink3);line-height:1.65}
.gtask .gt-a{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:9px}
.gtask.s-done{opacity:.6}
.gtask.s-done .gt-h b{text-decoration:line-through}
.gtask.s-doing{border-color:var(--edge-accent)}
.gtask.s-parked{opacity:.45}
.gst{font:10.5px var(--mono);color:var(--ink4)}

/* ---- the cadence, and the three lengths of the positioning */
.gcad{margin-top:10px}
.gcad b{font-size:12.5px;color:var(--ink)}
.gcad ul{margin:5px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink2);line-height:1.75}
.gq{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin:12px 0}
.gq span{display:block;font:600 10px var(--sans);text-transform:uppercase;letter-spacing:.07em;
         color:var(--ink4)}
.gq p{margin:3px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.gob{border-top:1px solid var(--line2);padding:9px 0 0;margin-top:9px}
.gob b{font-size:12.5px}
.gob p{margin:4px 0 0}

/* ---- one competitor */
.gcomp .gc-h,.gbody .gc-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.gbody .gc-h h3{margin:0}
.gc-p{font:11px var(--mono);color:var(--ink3);margin-left:auto}
.gc-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media(max-width:720px){.gc-two{grid-template-columns:1fr}}
.gc-two b{font-size:11.5px}
.gc-two ul{margin:5px 0 0;padding-left:17px;font-size:12px;color:var(--ink2);line-height:1.7}
.gc-a{margin-top:11px;padding:9px 11px;border-radius:9px;background:var(--panel2);
      border:1px solid var(--line)}
.gc-a b{font-size:11.5px}
.gc-a p{margin:3px 0 0}
.gc-k{margin-top:9px;font-size:11.5px;color:var(--ink3)}
.gc-k b{color:var(--ink2);margin-right:5px}

/* ---- an administrator's own note, on a competitor */
.gnote{margin-top:11px}
.gnote textarea,.gbody textarea{width:100%;min-height:62px;resize:vertical;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  font:12.5px var(--sans);padding:8px 10px;line-height:1.6}
.gnote textarea:focus,.gbody textarea:focus{outline:none;border-color:var(--accent)}
.gnf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.gin{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);
     color:var(--ink);font:13px var(--sans);padding:8px 10px;margin-bottom:8px}
.gin:focus{outline:none;border-color:var(--accent)}

/* ---- the query table, with three fields somebody fills in */
.gkw td{vertical-align:top}
.gkw .gnum{width:74px}
.gkw .gnum input{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--bg);
                 color:var(--ink);font:11.5px var(--mono);padding:3px 6px;text-align:right}
.gkw .gnum input:focus{outline:none;border-color:var(--accent)}
.gneeds{font-size:11.5px;color:var(--ink3)}
.gci{padding:2px 0;font-size:12.5px;color:var(--ink2);line-height:1.6}
.ghook{font-size:13.5px;color:var(--ink);border-left:3px solid var(--accent);padding-left:11px;
       margin:8px 0 12px}
.gyt{margin-top:11px;padding:10px 12px;border-radius:9px;background:var(--panel2);
     border:1px solid var(--line)}
.gyt b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
       color:var(--ink4);margin-top:8px}
.gyt b:first-child{margin-top:0}
.gyt p{margin:3px 0 0;font-size:12.5px}
.glog .gbody{white-space:pre-wrap}
.gfoot{grid-column:1/-1;font:11px var(--sans);color:var(--ink4);padding:4px 2px 0;line-height:1.6}

/* =========================================================== the scenes
   The recordable animations. Deliberately the product's own palette, column
   order and wording: an animation drawn somewhere else goes out of date the
   first time a column is renamed, and nobody notices until a video is live.

   `.gstage.big` puts one on a 16:9 stage at the size a 1920×1080 recording
   wants. Everything stops under prefers-reduced-motion, where the still
   frame has to be the useful one — so the rows stay visible. */
.gstage{margin-top:12px;padding:14px;border-radius:11px;background:var(--bg);
        border:1px dashed var(--line2)}
.gstage.big{padding:34px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.gstage.big .gw,.gstage.big .gsvg{width:100%;max-width:1060px}

.gw{background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden;
    box-shadow:0 10px 28px rgba(8,15,30,.10)}
.gwt{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--panel2);
     border-bottom:1px solid var(--line);font:600 11.5px var(--sans);color:var(--ink2)}
.gdot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.gdot.bad{background:#e0463a}
.gsp{margin-left:auto;font:10.5px var(--mono);color:var(--ink4)}
.gseg{display:flex;gap:3px;padding:7px 9px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.gseg b{font:600 10.5px var(--sans);padding:4px 8px;border-radius:6px;color:var(--ink3)}
.gseg b.on{background:var(--accent);color:var(--accent-ink)}
.gfind{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--panel2);
       border-bottom:1px solid var(--line)}
.gfind .k{font:600 10px var(--sans);border:1px solid var(--line2);border-radius:5px;
          padding:2px 5px;color:var(--ink3)}
.gfind .q{flex:1;font:11.5px var(--mono);color:var(--ink);border:1px solid var(--edge-accent);
          border-radius:6px;padding:3px 7px;background:var(--panel)}
.gfind .n{font:10.5px var(--sans);color:var(--ink3)}
.gwf{padding:6px 10px;border-top:1px solid var(--line);background:var(--panel2);
     font:10.5px var(--mono);color:var(--ink3)}
.gplist{font:11px var(--mono)}
.gr{display:grid;grid-template-columns:26px 54px 1fr 1fr 44px 1.5fr;gap:7px;padding:3px 10px;
    border-bottom:1px solid var(--line2);white-space:nowrap;overflow:hidden;color:var(--ink2)}
.gr span{overflow:hidden;text-overflow:ellipsis}
.gr.hd{background:var(--panel2);color:var(--ink3);font:600 9.5px var(--sans);
       text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.gr.arp {background:rgba(250,204,21,.15)}
.gr.l2  {background:rgba(45,212,191,.14)}
.gr.icmp{background:rgba(244,114,182,.17)}
.gr.tcp {background:rgba(167,139,250,.15)}
.gr.ctl {background:rgba(148,163,184,.18)}
.gr.fnd {box-shadow:inset 0 -2px 0 0 var(--accent)}
@keyframes growin{0%{opacity:0;transform:translateY(-5px)}5%{opacity:1;transform:none}
                  94%{opacity:1}100%{opacity:1}}
.gr.live{opacity:0;animation:growin 13s linear infinite}
.gr.live:nth-of-type(2){animation-delay:.2s}
.gr.live:nth-of-type(3){animation-delay:1.0s}
.gr.live:nth-of-type(4){animation-delay:1.8s}
.gr.live:nth-of-type(5){animation-delay:2.4s}
.gr.live:nth-of-type(6){animation-delay:3.1s}
.gr.live:nth-of-type(7){animation-delay:3.7s}
.gr.live:nth-of-type(8){animation-delay:4.4s}
.gr.live:nth-of-type(9){animation-delay:5.2s}

.gsites{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px 10px}
@media(max-width:560px){.gsites{grid-template-columns:1fr}}
.gs{border:1px solid var(--line);border-radius:9px;padding:8px 9px;background:var(--panel2)}
.gs b{display:block;font:600 12px var(--sans);color:var(--ink)}
.gs i{font-style:normal;font:600 9.5px var(--sans);text-transform:uppercase;letter-spacing:.06em}
.gs span{display:block;font:10.5px var(--mono);color:var(--ink4);margin-top:3px}
.gs.up i{color:var(--ok)} .gs.imp i{color:#e8a33d} .gs.dn i{color:#e0463a}
.gs.dn{border-color:rgba(224,70,58,.4)}
.galarms{padding:4px 10px 10px}
.gal{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);
     border-left-width:3px;border-radius:8px;padding:7px 9px;margin-top:6px;background:var(--panel)}
.gal .lv{font:700 8.5px var(--sans);text-transform:uppercase;letter-spacing:.07em;
         padding:2px 5px;border-radius:4px;flex:0 0 auto;margin-top:1px}
.gal .tx{font-size:11.5px;line-height:1.55;color:var(--ink2)}
.gal .tx b{display:block;color:var(--ink);font-weight:600;font-size:12px}
.gal.crit{border-left-color:#e0463a} .gal.crit .lv{background:rgba(224,70,58,.16);color:#e0463a}
.gal.ser {border-left-color:#e8832d} .gal.ser  .lv{background:rgba(232,131,45,.16);color:#c4681c}
.gal.warn{border-left-color:#e8a33d} .gal.warn .lv{background:rgba(232,163,61,.16);color:#9a6a12}
@keyframes galin{0%{opacity:0;transform:translateX(-7px)}6%{opacity:1;transform:none}
                 68%{opacity:1}74%{opacity:.42}100%{opacity:.42}}
@keyframes galack{0%,62%{opacity:0}70%{opacity:1}100%{opacity:1}}
.gal{opacity:0;animation:galin 13s linear infinite}
.gal:nth-of-type(2){animation-delay:1.3s}
.gal:nth-of-type(3){animation-delay:2.6s}
.gackd{font:10px var(--sans);color:var(--ink4);margin-top:7px;opacity:0;
       animation:galack 13s linear infinite}

.gsvg{width:100%;height:auto}
.gwire{stroke:var(--line2);stroke-width:2.5;stroke-linecap:round}
.gbox{fill:var(--panel2);stroke:var(--line2);stroke-width:1.2}
.gtag{fill:var(--ink2);font:600 13px var(--mono);text-anchor:middle}
.gname{fill:var(--ink);font:600 12px var(--sans);text-anchor:middle}
.gring{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;
       transform-origin:center}
.gring.ok{stroke:var(--ok)}
.greq rect{fill:var(--accent)}
.grep rect{fill:var(--ok)}
@keyframes gpkt{0%{transform:translateX(0);opacity:0}2%{opacity:1}
                44%{transform:translateX(720px);opacity:1}
                47%{transform:translateX(720px);opacity:0}
                100%{transform:translateX(720px);opacity:0}}
@keyframes gpkb{0%,50%{transform:translateX(0);opacity:0}52%{opacity:1}
                94%{transform:translateX(-720px);opacity:1}
                97%{transform:translateX(-720px);opacity:0}
                100%{transform:translateX(-720px);opacity:0}}
@keyframes gpulse{0%{transform:scale(.96);opacity:0}3%{opacity:.7}
                  15%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.greq{animation:gpkt 9s linear infinite}
.grep{animation:gpkb 9s linear infinite}
.gring{animation:gpulse 9s linear infinite}

@media(prefers-reduced-motion:reduce){
  .gr.live,.gal,.gackd{animation:none;opacity:1}
  .greq,.grep,.gring{animation:none}
  .gring{opacity:0}
  .greq,.grep{opacity:1}}