/* SPICE Web OMS™ product visual (markup in template-parts/fig-web-oms.php). Sizes are in em off
   a container-relative base, so the mock-up keeps the picture's proportions at any width. */
.fg-web-oms{--navy:#13203d;--navy2:#1b2a4c;--ink:#141a2e;--mute:#6b7387;--line:#e5e8ef;--o:#ff6a1a;--r:#e8203a;--m:#d4145a;
  container:fgwo/inline-size;max-width:1400px;margin:0 auto;color:var(--ink);-webkit-font-smoothing:antialiased}
.fg-web-oms *{box-sizing:border-box}
.fg-web-oms-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fg-web-oms svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fg-web-oms a{color:inherit;text-decoration:none}
.fg-web-oms a:focus-visible,.fg-web-oms button:focus-visible{outline:2px solid var(--o);outline-offset:2px}
:where(.fg-web-oms) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.fg-web-oms h3,.fg-web-oms h4,.fg-web-oms h5,.fg-web-oms p,.fg-web-oms dl,.fg-web-oms dd,.fg-web-oms ol,.fg-web-oms ul{margin:0;padding:0}
.fg-web-oms ol,.fg-web-oms ul{list-style:none}

.fg-web-oms-app{font-size:1cqw;display:grid;grid-template-columns:15.2em minmax(0,1fr) 33.5em;grid-template-rows:4.3em auto;
  background:var(--navy);border-radius:1.4em;overflow:hidden;box-shadow:0 .2em .4em rgba(17,24,47,.06),0 2.6em 4.4em -1.8em rgba(17,24,47,.45)}

/* top bar */
.fg-web-oms-top{grid-row:1;grid-column:1/-1;display:flex;align-items:center;gap:1.6em;padding:0 1.8em 0 2.2em;color:#fff}
.fg-web-oms-apps{font-size:1.5em;opacity:.85;padding-right:1em;border-right:1px solid rgba(255,255,255,.15);height:2.8em;display:flex;align-items:center}
.fg-web-oms-brand{font-size:1.65em;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.fg-web-oms-brand span{color:var(--o)}
.fg-web-oms-logo{margin-left:auto;display:block}
.fg-web-oms-logo svg{display:block;width:7.4em;height:auto}

/* side menu */
.fg-web-oms-side{grid-row:2;grid-column:1;display:flex;flex-direction:column;gap:.6em;padding:1em .9em}
.fg-web-oms-side a{display:flex;align-items:center;gap:1.1em;padding:1.05em 1.1em;border-radius:.7em;color:#fff;font-size:1em;font-weight:600;letter-spacing:.03em;text-transform:uppercase;transition:background .2s}
.fg-web-oms-side a svg.i{font-size:1.6em;stroke-width:1.7}
.fg-web-oms-side a:hover{background:rgba(255,255,255,.08)}
.fg-web-oms-side a.is-on{background:linear-gradient(90deg,#ff7a1a,#ff3d3d);box-shadow:0 .4em 1.2em rgba(255,80,40,.35);font-size:.88em;padding:1.2em}

/* main */
.fg-web-oms-main{grid-row:2;grid-column:2;background:#fff;border-radius:1.2em 0 0 0;padding:1.9em 1.4em 1.4em 1.6em;display:flex;flex-direction:column;gap:1.2em;min-width:0}
.fg-web-oms-h1{font-size:2.3em;font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.05}
.fg-web-oms-lead{font-size:1.1em;color:var(--mute);margin-top:-.7em}
.fg-web-oms-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}
.fg-web-oms-kpi{display:block;padding:1.2em 1.3em 1.1em;border:1px solid var(--line);border-radius:.8em;transition:box-shadow .2s,transform .2s,border-color .2s}
.fg-web-oms-kpi:hover{border-color:#ffc2a3;box-shadow:0 .5em 1.4em rgba(255,90,40,.14);transform:translateY(-.15em)}
.fg-web-oms-kh{display:flex;align-items:center;gap:.8em;font-size:.95em;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#3a4256}
.fg-web-oms-kh svg.i{font-size:1.9em;color:var(--o);stroke-width:1.7}
.fg-web-oms-kpi:nth-child(2) .fg-web-oms-kh svg.i{color:var(--r)}
.fg-web-oms-kpi:nth-child(3) .fg-web-oms-kh svg.i{color:#ff5a1a}
.fg-web-oms-kpi:nth-child(4) .fg-web-oms-kh svg.i{color:var(--r)}
.fg-web-oms-kpi b{display:flex;align-items:center;gap:.4em;margin-top:.55em;font-size:2em;font-weight:800;line-height:1}
.fg-web-oms-kpi em{display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:#ffe5dc;color:var(--r);font-size:.45em;font-style:normal;font-weight:700}
.fg-web-oms-kpi small{display:block;margin-top:.4em;font-size:1.05em;color:var(--mute)}

.fg-web-oms-card{border:1px solid var(--line);border-radius:.8em;padding:1.2em 1.1em}
.fg-web-oms-card h4{font-size:1.1em;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.fg-web-oms-life{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:1.1em}
.fg-web-oms-life li{position:relative;display:flex;justify-content:center}
.fg-web-oms-life li+li::before{content:'';position:absolute;top:1.6em;right:50%;width:100%;height:.16em;background:#d3d7e0;z-index:0}
.fg-web-oms-life li:last-child::before{background:repeating-linear-gradient(90deg,#d3d7e0 0 .35em,transparent .35em .6em)}
.fg-web-oms-life a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15em}
.fg-web-oms-dot{display:grid;place-items:center;width:3.2em;height:3.2em;border-radius:50%;background:#fff;border:.13em solid #c5cad5;color:#3a4256;font-size:1em;margin-bottom:.55em;transition:background .35s,border-color .35s,color .35s,transform .2s}
.fg-web-oms-dot svg.i{font-size:1.45em;stroke-width:1.7}
.fg-web-oms-life b{font-size:1em;font-weight:700}
.fg-web-oms-life small{font-size:.95em;color:var(--mute)}
.fg-web-oms-life a:hover .fg-web-oms-dot{transform:scale(1.08)}
.fg-web-oms-life li.is-done .fg-web-oms-dot,.fg-web-oms-life li.is-now .fg-web-oms-dot{background:linear-gradient(135deg,#ff7a1a,#ff4a1a);border-color:transparent;color:#fff;box-shadow:0 .3em .9em rgba(255,90,30,.35)}
.fg-web-oms-life li.is-now .fg-web-oms-dot{animation:fg-web-oms-pulse 2s ease-in-out infinite}
.fg-web-oms-life li.is-done+li::before,.fg-web-oms-life li.is-now+li.is-done::before{background:var(--o)}
.fg-web-oms-life li.is-done+li.is-now::before{background:var(--o)}
@keyframes fg-web-oms-pulse{50%{box-shadow:0 0 0 .5em rgba(255,106,26,.15)}}

.fg-web-oms-orders{padding:1em 0 .2em}
.fg-web-oms-ch{display:flex;align-items:center;justify-content:space-between;padding:0 1.1em .7em}
.fg-web-oms-ch a{display:flex;align-items:center;gap:.3em;font-size:1em;font-weight:600;color:#2a64d6}
.fg-web-oms-ch a:hover{text-decoration:underline}
.fg-web-oms-thead,.fg-web-oms-row{display:grid;grid-template-columns:2.6em 1.1fr 1fr 1.3fr 1.3fr .9fr 2em;align-items:center}
.fg-web-oms-thead{padding:.75em 0;background:#f6f7fa;font-size:.8em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#4b5366}
.fg-web-oms-thead span{padding-left:.15em}
.fg-web-oms-row{width:100%;padding:.85em 0;border-top:1px solid var(--line);border-left:.25em solid transparent;font-size:.98em;transition:background .2s}
.fg-web-oms-row:hover{background:#fbf5f1}
.fg-web-oms-row.is-on{background:#fff1ea;border-left-color:var(--o)}
.fg-web-oms-caret{justify-self:center;font-size:1em;color:#4b5366}
.fg-web-oms-po{font-weight:600}
.fg-web-oms-date{color:#4b5366}
.fg-web-oms-act{color:var(--r);font-weight:500}
.fg-web-oms-docs{display:flex;align-items:center;gap:.5em;color:#4b5366}
.fg-web-oms-docs svg.i{color:#4b5366}
.fg-web-oms-row:first-child .fg-web-oms-docs svg.i{color:var(--r)}
.fg-web-oms-go{justify-self:center;color:#4b5366}
.fg-web-oms-row.is-on .fg-web-oms-go{color:var(--r)}
.fg-web-oms-badge{display:inline-block;padding:.25em .8em;border-radius:99em;font-size:.88em;font-weight:500;white-space:nowrap}
.fg-web-oms-badge.is-new{background:#ffe5d6;color:#e8501a}
.fg-web-oms-badge.is-ack{background:#dcf5e5;color:#1e8a4a}
.fg-web-oms-badge.is-transit{background:#dceaff;color:#2a64d6}
.fg-web-oms-badge.is-invoiced{background:#ebe3ff;color:#6a3fd1}
.fg-web-oms-badge.is-done{background:#dcf5e5;color:#1e8a4a}

/* purchase order panel */
.fg-web-oms-panel{position:relative;z-index:1;grid-row:1/3;grid-column:3;margin-top:4.3em;background:#fff;border-radius:1.2em 1.2em 0 0;border-left:1px solid var(--line);padding:1.3em 1.2em 1.2em;display:flex;flex-direction:column;box-shadow:-1em 0 2em -1.4em rgba(17,24,47,.25);min-width:0}
.fg-web-oms-ph{display:flex;align-items:center;justify-content:space-between}
.fg-web-oms-ph h4{font-size:1.55em;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.fg-web-oms-ph svg.i{font-size:1.5em;color:#3a4256}
.fg-web-oms-pohead{display:flex;align-items:center;gap:1em;margin-top:1.1em;padding-top:1.1em;border-top:1px solid var(--line)}
.fg-web-oms-pohead b{font-size:1.65em;font-weight:800}
.fg-web-oms-pohead .fg-web-oms-badge{font-size:.95em;padding:.3em 1em}
.fg-web-oms-meta{display:grid;grid-template-columns:1fr 1.2fr .8fr;margin-top:1em}
.fg-web-oms-meta div+div{padding-left:.9em;border-left:1px solid var(--line)}
.fg-web-oms-meta dt,.fg-web-oms-grid2 dt{font-size:.88em;color:var(--mute)}
.fg-web-oms-meta dd{margin-top:.2em;font-size:1.02em}
.fg-web-oms-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.2em;border-bottom:1px solid var(--line)}
.fg-web-oms-tabs button{padding:.9em 0;text-align:center;font-size:.9em;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4b5366;border-bottom:.16em solid transparent;margin-bottom:-1px;transition:color .2s}
.fg-web-oms-tabs button:hover{color:var(--ink)}
.fg-web-oms-tabs button[aria-selected=true]{color:var(--o);border-bottom-color:var(--o)}
.fg-web-oms-tabp{padding:1em .2em .9em;min-height:7.6em;border-bottom:1px solid var(--line)}
.fg-web-oms-tabp[hidden]{display:none}
.fg-web-oms-tabp p{font-size:1em;line-height:1.5;color:#3a4256}
.fg-web-oms-grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:.9em}
.fg-web-oms-grid2 dd{margin-top:.2em;font-size:1em;line-height:1.3}
.fg-web-oms-panel h5{margin:1.1em 0 .6em .2em;font-size:1.1em;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.fg-web-oms-lines{width:100%;border-collapse:collapse;font-size:.95em;margin:0;border:0}
.fg-web-oms-lines thead,.fg-web-oms-lines tr,.fg-web-oms-lines th,.fg-web-oms-lines td{background:none!important;color:inherit;border:0}
.fg-web-oms-lines th{padding:.4em .3em;text-align:left;font-size:.8em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#4b5366}
.fg-web-oms-lines td{padding:.6em .3em;border-top:1px solid var(--line)!important}
.fg-web-oms-dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.fg-web-oms-dstat a{display:flex;align-items:center;gap:.6em;padding:.8em .7em;border:1px solid var(--line);border-radius:.6em;transition:border-color .2s}
.fg-web-oms-dstat a:hover{border-color:#ffc2a3}
.fg-web-oms-dic{font-size:2.1em;color:var(--o);stroke-width:1.6}
.fg-web-oms-dstat a[data-d="2"] .fg-web-oms-dic{color:var(--m)}
.fg-web-oms-dstat b{display:block;font-size:.92em;font-weight:600}
.fg-web-oms-dstat small{display:flex;align-items:center;gap:.35em;font-size:.78em;color:#9aa0ad}
.fg-web-oms-dstat small svg.i{width:1.25em;height:1.25em;padding:.2em;border-radius:50%;background:#c9ccd4;color:#fff;stroke-width:3.4}
.fg-web-oms-dstat small i{font-style:normal}
.fg-web-oms-dstat .is-ok small{color:#1e8a4a}
.fg-web-oms-dstat .is-ok small svg.i{background:#22b45a}
.fg-web-oms-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin-top:auto;padding-top:1.1em}
.fg-web-oms-btns a{display:grid;place-items:center;height:3.3em;border-radius:.4em;font-size:.98em;font-weight:600;letter-spacing:.03em;text-transform:uppercase;transition:transform .2s,box-shadow .2s,opacity .2s}
.fg-web-oms-b1{background:var(--o);color:#fff!important}
.fg-web-oms-b2{border:.12em solid var(--r);color:var(--r)!important}
.fg-web-oms-b3{background:var(--m);color:#fff!important}
.fg-web-oms-btns a:hover{transform:translateY(-.1em);box-shadow:0 .4em 1em rgba(232,32,58,.25)}
.fg-web-oms-btns a.is-next{box-shadow:0 0 0 .25em rgba(255,106,26,.25)}
.fg-web-oms-btns a.is-idle{opacity:.45}

/* narrow columns and phones: menu becomes chips, the panel moves under the workspace */
@container fgwo (max-width:860px){
  .fg-web-oms-app{font-size:13px;grid-template-columns:1fr;grid-template-rows:auto;border-radius:16px}
  .fg-web-oms-top,.fg-web-oms-side,.fg-web-oms-main,.fg-web-oms-panel{grid-row:auto;grid-column:1}
  .fg-web-oms-top{padding:12px 16px;gap:12px}
  .fg-web-oms-apps{display:none}
  .fg-web-oms-brand{font-size:17px}
  .fg-web-oms-logo svg{width:64px}
  .fg-web-oms-side{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;padding:0 12px 12px}
  .fg-web-oms-side a,.fg-web-oms-side a.is-on{flex:none;padding:8px 12px;font-size:11px;gap:7px;border-radius:99px;background:rgba(255,255,255,.08)}
  .fg-web-oms-side a.is-on{background:linear-gradient(90deg,#ff7a1a,#ff3d3d)}
  .fg-web-oms-side a svg.i{font-size:15px}
  .fg-web-oms-main{border-radius:14px 14px 0 0;padding:20px 14px 14px}
  .fg-web-oms-h1{font-size:22px}
  .fg-web-oms-lead{margin-top:-8px}
  .fg-web-oms-kpis{grid-template-columns:1fr 1fr}
  .fg-web-oms-life{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fg-web-oms-dot{width:34px;height:34px}
  .fg-web-oms-life li+li::before{top:17px}
  .fg-web-oms-life b{font-size:9.5px;line-height:1.2;hyphens:auto;overflow-wrap:anywhere;padding:0 1px}
  .fg-web-oms-life small{display:none}
  .fg-web-oms-thead{display:none}
  .fg-web-oms-row{grid-template-columns:1fr auto 18px;grid-template-areas:"po badge go" "date act go";row-gap:3px;padding:10px 10px 10px 12px}
  .fg-web-oms-caret,.fg-web-oms-docs{display:none}
  .fg-web-oms-po{grid-area:po}.fg-web-oms-date{grid-area:date;font-size:12px}
  .fg-web-oms-row>span:nth-of-type(3){grid-area:badge;justify-self:end}
  .fg-web-oms-act{grid-area:act;justify-self:end;font-size:12px}
  .fg-web-oms-go{grid-area:go}
  .fg-web-oms-panel{grid-row:auto;grid-column:auto;margin:0;border-radius:0;border-left:0;border-top:6px solid var(--navy);box-shadow:none;padding:18px 14px}
  .fg-web-oms-meta{grid-template-columns:1fr 1fr 1fr}
  .fg-web-oms-dstat a{flex-direction:column;align-items:flex-start;gap:4px}
  .fg-web-oms-btns{gap:6px}
  .fg-web-oms-btns a{font-size:11px;height:40px;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){.fg-web-oms *{animation:none!important;transition:none!important}}