/* ==========================================================================
   FactoryOS live demo (demo.html) — styles for the app drawn by js/demo.js.
   Uses the brand tokens from theme.css. Prefix: dm-
   ========================================================================== */
.demo-body{background:#eef0f7;min-height:100vh;}
.demo-app{min-height:100vh;}
:root{
  --dm-nav:#161138;
  --dm-nav-2:#221c52;
  --dm-ok:#29a762;
  --dm-warn:#f79f1d;
  --dm-bad:#E33237;
  --dm-info:#0a9bd8;
  --dm-radius:14px;
}
.dm-muted{color:var(--muted);}
.dm-small{font-size:13px;}
.dm-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.dm-grow{flex:1 1 auto;min-width:0;}
.dm-hint{font-size:13px;color:var(--muted);}

/* ---------- buttons, chips, inputs ---------- */
.dm-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;color:var(--ink);
  font-weight:700;font-size:14px;padding:9px 14px;border-radius:10px;cursor:pointer;line-height:1.2;text-decoration:none;}
.dm-btn:hover{background:var(--bg-alt);}
.dm-btn .msym{font-size:19px;}
.dm-btn--primary{background:var(--primary-red);border-color:var(--primary-red);color:#fff;}
.dm-btn--primary:hover{background:#c92a2f;}
.dm-btn--dark{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff;}
.dm-btn--dark:hover{background:#262058;}
.dm-btn--ok{background:var(--dm-ok);border-color:var(--dm-ok);color:#fff;}
.dm-btn--ok:hover{background:#21894f;}
.dm-btn--ghost{background:transparent;border-color:transparent;}
.dm-btn--sm{font-size:13px;padding:6px 10px;border-radius:8px;}
.dm-btn--block{width:100%;justify-content:center;}
.dm-btn[disabled]{opacity:.55;cursor:not-allowed;}
.dm-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--bg-alt);color:var(--ink-soft);border:1px solid var(--border);white-space:nowrap;}
.dm-chip .msym{font-size:15px;}
.dm-chip--ok{background:#e7f6ee;color:#1d7a46;border-color:#bfe6cf;}
.dm-chip--warn{background:#fff4e2;color:#a1620a;border-color:#f7dcab;}
.dm-chip--bad{background:#fdecec;color:#b3242a;border-color:#f6c5c7;}
.dm-chip--info{background:#e6f5fc;color:#0a6f9c;border-color:#bfe5f6;}
.dm-chip--new{background:#efeaff;color:#5a3bd6;border-color:#d8ccff;}
button.dm-chip{cursor:pointer;}
button.dm-chip:hover{border-color:var(--ink-soft);}
.dm-input,.dm-select,.dm-textarea{width:100%;border:1px solid rgba(22,17,56,.2);border-radius:10px;padding:10px 12px;font-size:15px;
  background:#fff;color:var(--ink);}
.dm-input:focus,.dm-select:focus,.dm-textarea:focus{outline:2px solid rgba(10,155,216,.35);border-color:var(--dm-info);}
.dm-textarea{min-height:92px;resize:vertical;line-height:1.45;}
.dm-label{display:block;font-weight:700;font-size:13px;margin:0 0 5px;color:var(--ink-soft);}
.dm-field{margin-bottom:12px;}

/* ---------- start gate ---------- */
.dm-gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px 12px;
  background:linear-gradient(135deg,#161138 0%,#263b7f 60%,#0a9bd8 140%);}
.dm-gate-card{background:#fff;border-radius:18px;max-width:640px;width:100%;padding:22px 26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);}
.dm-gate-card h1{font-size:clamp(22px,3.4vw,28px);margin-bottom:4px;}
.dm-gate-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.dm-gate-logo{height:32px;}
.dm-gate-lead{margin-bottom:12px;font-size:15px;line-height:1.5;}
.dm-gate-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 0;}
.dm-gate-suggest > span{font-size:12.5px;color:var(--muted);font-weight:600;}
.dm-gate-suggest .dm-chip{font-size:12px;padding:3px 9px;}
.dm-gate-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dm-gate-fields .dm-field{margin-bottom:8px;}
.dm-privacy{display:flex;gap:10px;background:#f1f8f4;border:1px solid #cfe9da;border-radius:12px;padding:10px 12px;margin:12px 0;font-size:12.5px;line-height:1.45;color:#244d36;}
.dm-privacy .msym{color:var(--dm-ok);font-size:22px;}
.dm-privacy p{color:inherit;}
.dm-privacy p+p{margin-top:6px;}
.dm-gate-what{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.dm-gate-what > span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--bg-alt);border-radius:999px;padding:4px 10px 4px 7px;}
.dm-gate-what .msym{color:var(--primary-red);font-size:17px;}
.dm-gate-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13px;}
.dm-gate-foot a{color:var(--secondary-blue);}
.dm-error{background:#fdecec;color:#b3242a;border-radius:10px;padding:9px 12px;font-size:14px;margin-top:10px;}
.dm-note{background:#fff8ea;color:#7a4b06;border:1px solid #f7dcab;border-radius:10px;padding:9px 12px;font-size:13.5px;}
.dm-note--info{background:#eaf6fc;color:#0b5677;border-color:#bfe5f6;}

/* ---------- shell ---------- */
.dm-sync{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--muted);}
.dm-sync i{width:8px;height:8px;border-radius:50%;background:var(--dm-ok);display:inline-block;}
.dm-sync.is-off i{background:var(--secondary-gray);}

/* guide strip */

/* cards */
.dm-card{background:#fff;border:1px solid var(--border);border-radius:var(--dm-radius);padding:18px;box-shadow:var(--shadow-sm);min-width:0;}
.dm-card h2{font-size:18px;}
.dm-card h3{font-size:15.5px;}
.dm-card-head{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;}
.dm-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);}
.dm-grid > *{min-width:0;}
.dm-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.dm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.dm-grid-side{grid-template-columns:minmax(0,1fr) 360px;align-items:start;}
.dm-grid-left{grid-template-columns:300px minmax(0,1fr);align-items:start;}

/* KPI tiles */
.dm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.dm-kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;}
.dm-kpi b{display:block;font-family:var(--font-display);font-size:26px;line-height:1.1;}
.dm-kpi span{font-size:12.5px;color:var(--muted);font-weight:700;}
.dm-kpi--ok b{color:var(--dm-ok);} .dm-kpi--bad b{color:var(--dm-bad);} .dm-kpi--warn b{color:var(--secondary-orange);}

/* home module cards */
.dm-welcome{display:flex;gap:18px;align-items:center;background:#fff;border-radius:18px;padding:22px;border:1px solid var(--border);margin-bottom:18px;
  background-image:linear-gradient(100deg,#fff 55%,rgba(255,255,255,.6)),url(../img/banners/banner_fos.webp);background-size:cover;background-position:right center;}
.dm-welcome h2{font-size:clamp(20px,3vw,28px);}
.dm-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.dm-mod{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s;}
.dm-mod:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.dm-mod-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--c,#263b7f);}
.dm-mod-ic .msym{font-size:26px;}
.dm-mod h3{font-size:17px;}
.dm-mod p{font-size:14px;}
.dm-mod-foot{margin-top:auto;display:flex;gap:8px;align-items:center;padding-top:8px;}

/* ---------- factory ---------- */
.dm-tree{display:flex;flex-direction:column;gap:4px;}
.dm-tree button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:9px;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;}
.dm-tree button:hover{background:var(--bg-alt);}
.dm-tree button.is-on{background:#eef0fb;color:var(--secondary-blue);}
.dm-tree .dm-tree-loc{padding-left:34px;font-weight:600;font-size:13.5px;color:var(--ink-soft);}
.dm-tree .dm-count{margin-left:auto;font-size:12px;color:var(--muted);}
.dm-map{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#f6f7fb;border:1px dashed rgba(22,17,56,.2);border-radius:12px;padding:10px;margin-bottom:14px;}
.dm-zone{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-height:92px;position:relative;}
.dm-zone b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.dm-pins{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.dm-pin{display:inline-flex;align-items:center;gap:4px;border:0;border-radius:999px;padding:4px 8px 4px 5px;font-size:12px;font-weight:800;cursor:pointer;background:#eef0fb;color:var(--secondary-blue);}
.dm-pin .msym{font-size:16px;}
.dm-pin.is-due{background:#fff4e2;color:#a1620a;}
.dm-pin.is-bad{background:#fdecec;color:#b3242a;}
.dm-pin:hover{outline:2px solid currentColor;}
.dm-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.dm-asset{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;font:inherit;color:inherit;}
.dm-asset:hover{border-color:var(--secondary-cyan);box-shadow:var(--shadow-sm);}
.dm-asset.is-on{border-color:var(--secondary-blue);box-shadow:0 0 0 2px rgba(38,59,127,.18);}
.dm-asset-ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--bg-alt);color:var(--secondary-blue);flex:none;}
.dm-asset-ic.is-fire{background:#fdecec;color:var(--primary-red);}
.dm-asset b{display:block;font-size:14px;line-height:1.3;}
.dm-asset small{display:block;color:var(--muted);font-size:12px;margin-top:2px;}
.dm-asset .dm-chip{margin-top:6px;}
.dm-panel{position:sticky;top:76px;}
.dm-specs{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px;margin:10px 0;}
.dm-specs dt{color:var(--muted);font-weight:600;}
.dm-specs dd{margin:0;font-weight:700;}
.dm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:12px 0;overflow-x:auto;}
.dm-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 10px;font-weight:800;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap;}
.dm-tabs button.is-on{color:var(--ink);border-bottom-color:var(--primary-red);}
.dm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.dm-list li{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:14px;}
.dm-list li .msym{color:var(--secondary-blue);font-size:20px;}
.dm-list li.is-click{cursor:pointer;}
.dm-list li.is-click:hover{border-color:var(--secondary-cyan);}
.dm-qr{display:flex;gap:14px;align-items:center;background:var(--bg-alt);border-radius:12px;padding:12px;}
.dm-qr-img{width:132px;height:132px;flex:none;background:#fff;border-radius:8px;padding:6px;display:grid;place-items:center;}
.dm-qr-img svg{width:100%;height:100%;display:block;}
.dm-qr-img--lg{width:210px;height:210px;}
.dm-qr-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;}
.dm-qr-open{justify-content:center;}
.dm-qr-img{box-shadow:0 0 0 1px var(--border);}
.dm-qr p{font-size:13px;}
.dm-qr a{word-break:break-all;font-size:12px;color:var(--secondary-blue);}

/* content (PASS etc.) */
.dm-pass{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.dm-pass div{background:#fdecec;border-radius:10px;padding:10px;text-align:center;}
.dm-pass b{display:block;font-family:var(--font-display);font-size:26px;color:var(--primary-red);line-height:1;}
.dm-pass strong{display:block;font-size:13px;margin:4px 0 2px;}
.dm-pass span{font-size:12px;color:var(--ink-soft);line-height:1.3;display:block;}
.dm-classes{width:100%;border-collapse:collapse;font-size:13px;}
.dm-classes th,.dm-classes td{border:1px solid var(--border);padding:6px 8px;text-align:left;}
.dm-classes th{background:var(--bg-alt);}

/* ---------- SOP document ---------- */
.dm-doc{background:#fff;border:1px solid var(--border);border-radius:var(--dm-radius);overflow:hidden;}
.dm-doc-head{background:var(--primary-blue);color:#fff;padding:18px 20px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;}
.dm-doc-head h2{color:#fff;font-size:21px;}
.dm-doc-head p{color:var(--band-muted);font-size:13px;}
.dm-doc-meta{display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12.5px;color:#d8d7ee;}
.dm-doc-meta b{color:#fff;}
.dm-doc-body{padding:18px 20px;}
.dm-doc-sec{margin-bottom:16px;}
.dm-doc-sec h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-family:var(--font-mono);}
.dm-doc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.dm-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:10px;}
.dm-steps li{counter-increment:st;display:grid;grid-template-columns:38px 1fr;gap:10px;padding:12px;border:1px solid var(--border);border-radius:12px;}
.dm-steps li::before{content:counter(st);width:34px;height:34px;border-radius:50%;background:var(--primary-red);color:#fff;font-weight:800;display:grid;place-items:center;font-family:var(--font-display);}
.dm-steps li.is-new{border-color:#b9a7ff;background:#faf8ff;}
.dm-steps b{display:block;}
.dm-steps p{font-size:14px;}
.dm-caution{margin-top:6px;font-size:13px;background:#fff4e2;color:#7a4b06;border-radius:8px;padding:6px 9px;display:flex;gap:6px;}
.dm-caution .msym{font-size:17px;}
.dm-check{margin-top:6px;font-size:13px;background:#e7f6ee;color:#1d6b40;border-radius:8px;padding:6px 9px;display:flex;gap:6px;}
.dm-check .msym{font-size:17px;}
.dm-changes{background:#f6f3ff;border:1px solid #ddd3ff;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px;}
.dm-changes b{color:#5a3bd6;}
.dm-changes ul{margin:6px 0 0;padding-left:18px;}

/* AI composer */
.dm-ai{background:linear-gradient(135deg,#1c1747,#263b7f);color:#fff;border-radius:var(--dm-radius);padding:16px;}
.dm-ai h3{color:#fff;font-size:16px;display:flex;align-items:center;gap:6px;}
.dm-ai h3 .msym{color:var(--secondary-yellow);}
.dm-ai p{color:#cfcde8;font-size:13.5px;}
.dm-ai .dm-textarea{margin:10px 0 8px;border-color:transparent;}
.dm-ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;}
.dm-ai-chips button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:700;cursor:pointer;text-align:left;white-space:normal;}
.dm-ai-chips button:hover{background:rgba(255,255,255,.2);}
.dm-ai-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.dm-ai .dm-btn:not(.dm-btn--primary){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25);}
.dm-ai .dm-select{width:auto;padding:7px 8px;font-size:13px;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25);}
.dm-ai .dm-select option{color:#161138;}
.dm-mic.is-on{background:var(--primary-red)!important;border-color:var(--primary-red)!important;animation:dmPulse 1.2s infinite;}
@keyframes dmPulse{0%,100%{box-shadow:0 0 0 0 rgba(227,50,55,.6);}50%{box-shadow:0 0 0 8px rgba(227,50,55,0);}}
.dm-ai-status{font-size:13px;color:#fff;display:flex;gap:8px;align-items:center;margin-top:10px;}
.dm-ai-note{font-size:12px;color:#aeb0d4;margin-top:8px;}
.dm-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:dmSpin .8s linear infinite;flex:none;}
.dm-spin--dark{border-color:rgba(22,17,56,.2);border-top-color:var(--primary-blue);}
@keyframes dmSpin{to{transform:rotate(360deg);}}

/* ---------- PTW workflow ---------- */
.dm-flow{display:flex;gap:0;overflow-x:auto;padding:4px 2px 14px;align-items:stretch;}
.dm-stage{flex:0 0 230px;background:#fff;border:1px solid var(--border);border-top:4px solid var(--sc,#263b7f);border-radius:12px;padding:12px;position:relative;}
.dm-stage+.dm-arrow{}
.dm-arrow{flex:0 0 26px;display:grid;place-items:center;color:var(--secondary-gray);}
.dm-stage-n{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.dm-stage h4{font-size:15px;margin:2px 0 4px;}
.dm-stage-role{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;}
.dm-stage-role .msym{font-size:17px;}
.dm-stage ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink-soft);}
.dm-stage ul.dm-checks{list-style:none;padding:0;}
.dm-stage ul.dm-checks li{display:flex;gap:4px;}
.dm-stage ul.dm-checks li::before{content:'☐';color:var(--muted);}
.dm-stage .dm-chip{position:absolute;top:8px;right:8px;}
.dm-stage.is-new{background:#faf8ff;border-color:#b9a7ff;}
.dm-stage.is-changed{background:#fffaf0;}
.dm-stage-type{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--sc);}
.dm-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.dm-fields div{border:1px dashed rgba(22,17,56,.2);border-radius:9px;padding:8px 10px;font-size:13px;}
.dm-fields small{display:block;color:var(--muted);font-size:11.5px;text-transform:uppercase;font-weight:700;}

/* permit run */
.dm-stepper{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;}
.dm-stepper div{flex:1 0 110px;font-size:12px;font-weight:700;padding:8px;border-radius:9px;background:var(--bg-alt);color:var(--muted);text-align:center;}
.dm-stepper div.is-done{background:#e7f6ee;color:#1d7a46;}
.dm-stepper div.is-now{background:var(--primary-blue);color:#fff;}
.dm-stepper div.is-rej{background:#fdecec;color:#b3242a;}
.dm-act{border:1px solid var(--border);border-radius:12px;padding:14px;}
.dm-tick{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--border);border-radius:9px;margin-bottom:6px;cursor:pointer;font-size:14px;background:#fff;}
.dm-tick input{margin-top:3px;width:18px;height:18px;accent-color:var(--dm-ok);}
.dm-log{list-style:none;margin:0;padding:0;font-size:13px;}
.dm-log li{padding:6px 0;border-bottom:1px solid var(--border);display:flex;gap:8px;}
.dm-log li .msym{font-size:17px;color:var(--dm-ok);}

/* ---------- signage ---------- */
.dm-tv{background:#1b1b1f;border-radius:18px;padding:14px 14px 26px;box-shadow:0 30px 50px -25px rgba(0,0,0,.6);position:relative;}
.dm-tv::after{content:'';position:absolute;left:50%;bottom:8px;width:60px;height:5px;border-radius:3px;background:#333;transform:translateX(-50%);}
.dm-screen{aspect-ratio:16/9;background:#0f0c2b;border-radius:6px;overflow:hidden;position:relative;color:#fff;container-type:inline-size;}
.dm-slide{position:absolute;inset:0;padding:5cqw 5cqw 10cqw;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .7s;}
.dm-slide.is-on{opacity:1;}
.dm-slide h2{color:#fff;font-size:5.2cqw;line-height:1.1;}
.dm-slide h3{color:#fff;font-size:3cqw;}
.dm-slide p{color:#d6d4f0;font-size:2.1cqw;}
.dm-slide .eyebrow{color:var(--secondary-yellow);font-size:1.6cqw;margin-bottom:1cqw;}
.dm-s-welcome{background:linear-gradient(110deg,rgba(15,12,43,.95) 45%,rgba(15,12,43,.35)),url(../img/banners/banner_digital_signage.webp) center/cover;}
.dm-s-stats{background:linear-gradient(135deg,#161138,#263b7f);}
.dm-s-big{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;margin-top:3cqw;}
.dm-s-big div{background:rgba(255,255,255,.08);border-radius:1.5cqw;padding:2cqw;}
.dm-s-big b{display:block;font-family:var(--font-display);font-size:6cqw;line-height:1;color:#fff;}
.dm-s-big span{font-size:1.6cqw;color:#cfcde8;font-weight:700;}
.dm-s-pass{background:#b3242a;}
.dm-s-pass .dm-pass{gap:2cqw;margin-top:2.5cqw;}
.dm-s-pass .dm-pass div{background:rgba(255,255,255,.12);padding:2cqw;border-radius:1.5cqw;}
.dm-s-pass .dm-pass b{color:#fff;font-size:6cqw;}
.dm-s-pass .dm-pass strong{font-size:2.2cqw;color:#fff;}
.dm-s-pass .dm-pass span{font-size:1.5cqw;color:#ffe3e4;}
.dm-s-permits{background:#10233f;}
.dm-s-table{width:100%;border-collapse:collapse;margin-top:2cqw;font-size:1.9cqw;}
.dm-s-table td,.dm-s-table th{padding:1cqw 1.4cqw;border-bottom:1px solid rgba(255,255,255,.15);text-align:left;}
.dm-s-table th{color:var(--secondary-yellow);font-size:1.5cqw;text-transform:uppercase;letter-spacing:.06em;}
.dm-s-sop{background:#123d2c;}
.dm-s-sop ol{margin:2cqw 0 0;padding-left:3cqw;font-size:2.2cqw;color:#e3f5ea;columns:2;column-gap:4cqw;}
.dm-s-sop li{margin-bottom:.8cqw;break-inside:avoid;}
.dm-s-audit{background:#3a1d08;}
.dm-s-obs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5cqw;margin-top:2cqw;}
.dm-s-obs div{background:rgba(255,255,255,.08);border-left:.6cqw solid var(--secondary-orange);border-radius:1cqw;padding:1.4cqw 1.8cqw;font-size:1.9cqw;}
.dm-s-obs small{display:block;color:#f5c99a;font-size:1.4cqw;}
.dm-ticker{position:absolute;left:0;right:0;bottom:0;height:6.5cqw;background:var(--primary-red);display:flex;align-items:center;overflow:hidden;font-weight:800;font-size:2.1cqw;z-index:3;}
.dm-ticker-label{background:#161138;height:100%;display:flex;align-items:center;padding:0 2cqw;flex:none;position:relative;z-index:2;}
.dm-ticker-track{white-space:nowrap;animation:dmTick 45s linear infinite;padding-left:30cqw;}
@keyframes dmTick{to{transform:translateX(-100%);}}
.dm-clock{position:absolute;top:2cqw;right:2.5cqw;font-family:var(--font-mono);font-size:2cqw;z-index:3;background:rgba(0,0,0,.35);padding:.5cqw 1.2cqw;border-radius:1cqw;}
.dm-tvlogo{position:absolute;top:2cqw;left:2.5cqw;z-index:3;height:3.6cqw;background:#fff;border-radius:.8cqw;padding:.5cqw 1cqw;}
.dm-alert{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6cqw;background:#E33237;}
.dm-alert.is-info{background:#0a6f9c;}
.dm-alert .msym{font-size:9cqw;color:#fff;}
.dm-alert h2{color:#fff;font-size:5.4cqw;}
.dm-alert p{color:#fff;font-size:2.4cqw;margin-top:1cqw;}
.dm-tv-full{position:fixed;inset:0;background:#000;display:grid;place-items:center;z-index:100;}
.dm-tv-full .dm-screen{width:min(100vw,177.78vh);border-radius:0;}
.dm-tv-exit{position:fixed;top:10px;right:10px;z-index:101;opacity:.4;}
.dm-tv-exit:hover{opacity:1;}
.dm-playlist li{align-items:center;}
.dm-playlist input{width:18px;height:18px;accent-color:var(--primary-red);}

/* ---------- audit ---------- */
.dm-obs{display:flex;gap:10px;padding:12px;border:1px solid var(--border);border-left:4px solid var(--secondary-orange);border-radius:10px;background:#fff;margin-bottom:8px;}
.dm-obs.is-high{border-left-color:var(--dm-bad);}
.dm-obs.is-closed{border-left-color:var(--dm-ok);opacity:.85;}
.dm-obs b{font-size:14px;display:block;}
.dm-obs p{font-size:13px;}
.dm-obs-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.dm-flash{animation:dmFlash 2.2s ease-out;}
@keyframes dmFlash{0%{background:#fff3b0;}100%{background:#fff;}}
.dm-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--primary-blue);color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;z-index:200;box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center;max-width:92vw;}
.dm-toast .msym{color:var(--secondary-yellow);}

/* checklist form (phone + desktop) */
.dm-q{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff;}
.dm-q p{color:var(--ink);font-weight:700;font-size:14.5px;}
.dm-q small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
.dm-yn{display:flex;gap:6px;margin-top:8px;}
.dm-yn button{flex:1;border:1px solid var(--border);background:#fff;border-radius:9px;padding:8px 4px;font-weight:800;font-size:13px;cursor:pointer;color:var(--ink-soft);}
.dm-yn button.is-yes{background:var(--dm-ok);border-color:var(--dm-ok);color:#fff;}
.dm-yn button.is-no{background:var(--dm-bad);border-color:var(--dm-bad);color:#fff;}
.dm-yn button.is-na{background:var(--secondary-gray);border-color:var(--secondary-gray);color:#fff;}
.dm-q .dm-input{margin-top:8px;font-size:14px;}
.dm-photo{display:flex;gap:8px;align-items:center;margin-top:8px;}
.dm-photo img{width:64px;height:64px;object-fit:cover;border-radius:8px;}

/* ---------- phone frame + worker app ---------- */
/* worker app on a wide screen: the same page a phone shows, as a full-height column (no phone frame) */
.dm-appwrap{display:grid;grid-template-columns:minmax(0,540px) minmax(0,380px);gap:24px;align-items:start;justify-content:center;}
.dm-appcol{height:calc(100vh - 116px);min-height:540px;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:#f4f5fb;position:sticky;top:84px;}
.dm-wa{height:100%;display:flex;flex-direction:column;background:#f4f5fb;font-size:14px;}
.dm-wa-top{background:var(--primary-blue);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;flex:none;}
.dm-wa-top h3{color:#fff;font-size:16px;line-height:1.2;}
.dm-wa-top small{color:var(--band-muted);font-size:12px;display:block;}
.dm-wa-top button{background:none;border:0;color:#fff;cursor:pointer;padding:4px;}
.dm-wa-body{flex:1;overflow-y:auto;padding:14px;}
.dm-wa-tabs{flex:none;display:flex;background:#fff;border-top:1px solid var(--border);padding:6px 4px 10px;}
.dm-wa-tabs button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;padding:4px 0;position:relative;}
.dm-wa-tabs button.is-on{color:var(--primary-red);}
.dm-wa-tabs .msym{font-size:23px;}
.dm-badge{position:absolute;top:0;right:calc(50% - 20px);background:var(--primary-red);color:#fff;border-radius:999px;font-size:10px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px;}
.dm-wa-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px;}
.dm-wa-tiles button{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink);}
.dm-wa-tiles .msym{font-size:26px;color:var(--c,#263b7f);}
.dm-wa-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;}
.dm-wa-card h4{font-size:14.5px;}
.dm-wa-task{display:flex;gap:10px;align-items:center;cursor:pointer;}
.dm-wa-task .msym{color:var(--c,#263b7f);font-size:24px;}
.dm-wa-task.is-done{opacity:.55;}
.dm-wa-banner{background:linear-gradient(120deg,#E33237,#f16022);color:#fff;border-radius:14px;padding:14px;}
.dm-wa-banner h4{color:#fff;font-size:16px;}
.dm-wa-banner p{color:#ffe7e0;font-size:13px;}
.dm-wa .dm-stepper div{flex:1 1 0;min-width:0;padding:6px 2px;}
.dm-wa-sec{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:14px 0 8px;}
.dm-scan{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:1;position:relative;}
.dm-scan video{width:100%;height:100%;object-fit:cover;}
.dm-scan::after{content:'';position:absolute;inset:18%;border:3px solid rgba(255,255,255,.8);border-radius:14px;}
.dm-quiz button{display:block;width:100%;text-align:left;border:1px solid var(--border);background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:6px;font-weight:700;cursor:pointer;font-size:14px;}
.dm-quiz button.is-right{background:#e7f6ee;border-color:var(--dm-ok);}
.dm-quiz button.is-wrong{background:#fdecec;border-color:var(--dm-bad);}

/* standalone phone mode (real mobile, opened from a QR) */
.dm-solo{height:100vh;height:100dvh;}
.dm-solo .dm-wa-top{padding-top:calc(14px + env(safe-area-inset-top,0px));}
.dm-solo .dm-wa-tabs{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
.dm-solo-bar{background:#fff8ea;color:#7a4b06;font-size:12px;padding:6px 12px;display:flex;gap:8px;align-items:center;justify-content:space-between;}
.dm-solo-bar a{color:inherit;font-weight:800;}

/* ---------- modal ---------- */
.dm-modal{position:fixed;inset:0;background:rgba(15,12,43,.6);z-index:150;display:grid;place-items:center;padding:16px;}
.dm-modal-box{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:calc(100vh - 32px);overflow-y:auto;padding:22px;position:relative;}
.dm-modal-box h2{font-size:21px;margin-bottom:4px;}
.dm-modal-x{position:absolute;top:12px;right:12px;background:none;border:0;cursor:pointer;color:var(--muted);}
.dm-consent{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;background:var(--bg-alt);border-radius:10px;padding:10px 12px;margin:10px 0;cursor:pointer;}
.dm-consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--primary-red);}
.dm-interests{display:flex;flex-wrap:wrap;gap:6px;}
.dm-interests label{display:inline-flex;gap:5px;align-items:center;font-size:13px;font-weight:700;border:1px solid var(--border);border-radius:999px;padding:5px 10px;cursor:pointer;}
.dm-interests input{accent-color:var(--primary-red);}
.dm-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .dm-grid-side{grid-template-columns:minmax(0,1fr);}
  .dm-panel{position:static;}
  .dm-mods{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .dm-grid-2,.dm-grid-3,.dm-grid-left{grid-template-columns:minmax(0,1fr);}
  .dm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dm-map{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .dm-mods{grid-template-columns:1fr;}
  .dm-gate{padding:10px 8px;}
  .dm-gate-card{padding:16px;border-radius:14px;}
  .dm-gate-lead{font-size:14px;}
  .dm-gate-fields{grid-template-columns:1fr;gap:0;}
  .dm-gate-what{gap:5px;margin-bottom:10px;}
  .dm-gate-what > span{font-size:11.5px;padding:3px 8px 3px 6px;}
  .dm-pass{grid-template-columns:repeat(2,1fr);}
  .dm-qr{flex-direction:column;align-items:flex-start;}
  .dm-welcome{flex-direction:column;align-items:flex-start;}
}
@media (max-width:640px){ .dm-hide-sm{display:none;} }
@media print{
  .demo-body{background:#fff;}
}
/* the site footer sits under the start screen only */
.demo-body.dm-in-app .dm-footer{display:none;}

/* ---------- phone and tablet sizes ---------- */
@media (max-width:1100px){
  .dm-appwrap{grid-template-columns:minmax(0,1fr);}
  .dm-appcol{position:static;height:78vh;min-height:520px;max-width:560px;width:100%;margin:0 auto;}
  .dm-appside{max-width:560px;width:100%;margin:0 auto;}
}
@media (max-width:900px){
  .dm-card{padding:14px;}
}
@media (max-width:640px){
  .dm-qr{align-items:center;}
  .dm-qr-col{width:100%;}
  .dm-qr-img--lg{width:190px;height:190px;}
  .dm-kpi b{font-size:22px;}
  .dm-doc-head{padding:14px;}
  .dm-doc-body{padding:14px;}
  .dm-doc-head h2{font-size:18px;}
  .dm-steps li{grid-template-columns:30px 1fr;padding:10px;}
  .dm-steps li::before{width:28px;height:28px;font-size:14px;}
  .dm-stage{flex-basis:210px;}
  .dm-modal{padding:8px;}
  .dm-modal-box{padding:18px 16px;border-radius:14px;}
  .dm-btn{padding:9px 12px;}
}
@media (max-width:640px){
}

/* ==========================================================================
   PORTAL LOOK — mirrors the FactoryOS web portal: white top bar, navy side menu
   (#161138, active item #2b79c8), breadcrumb, dark gradient module banner,
   KPI cards, table card with pill filters and a details panel. Font: Inter.
   ========================================================================== */
.dm-portal,.dm-portal h1,.dm-portal h2,.dm-portal h3,.dm-portal h4,.dm-modal-box,.dm-modal-box h2,.dm-modal-box h3,.dm-wa,.dm-wa h3,.dm-wa h4{font-family:'Inter',system-ui,sans-serif;}
.dm-portal{background:#f8fafc;color:#1e293b;min-height:100vh;font-size:14px;}
.dm-portal p{color:#475569;}
.dm-topbar{position:fixed;top:0;left:0;right:0;height:52px;background:#fff;box-shadow:rgba(0,0,0,.1) 1px 0 10px;display:flex;align-items:center;gap:8px;padding:0 14px;z-index:40;}
.dm-topbar-logo img{height:30px;display:block;}
.dm-demo-tag{font-size:11px;font-weight:700;color:#a1620a;background:#fff4e2;border:1px solid #f7dcab;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.dm-icon-btn{width:36px;height:36px;border-radius:50%;border:0;background:none;display:inline-grid;place-items:center;color:#334155;cursor:pointer;flex:none;}
.dm-icon-btn:hover{background:#f1f5f9;}
.dm-icon-btn .msym{font-size:22px;}
.dm-burger{display:none;}
.dm-userchip{display:inline-flex;align-items:center;gap:8px;background:#e2e8f0;border-radius:8px;padding:3px 10px 3px 3px;font-size:13px;font-weight:600;color:#1e293b;white-space:nowrap;}
.dm-userchip .dm-avatar{width:30px;height:30px;border-radius:6px;background:#161138;font-size:12px;}
.dm-avatar{width:34px;height:34px;border-radius:50%;background:var(--secondary-blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;}
.dm-pbody{display:grid;grid-template-columns:280px minmax(0,1fr);padding-top:52px;min-height:100vh;}
.dm-side{position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;background:#161138;color:#f0f0f0;padding:10px 12px;display:flex;flex-direction:column;}
.dm-side-head{display:flex;align-items:center;gap:8px;color:#bebebe;font-size:13px;padding:6px 8px 12px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px;}
.dm-side-head small{margin-left:auto;font-size:11px;color:#8f8db0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-nav{display:flex;flex-direction:column;gap:2px;}
.dm-menu{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#f0f0f0;text-decoration:none;font-size:14px;}
.dm-menu:hover{background:rgba(255,255,255,.06);}
.dm-menu.is-on{background:#2b79c8;color:#fff;}
.dm-menu .msym{font-size:21px;}
.dm-subnav{display:flex;flex-direction:column;gap:1px;padding:4px 0 6px;}
.dm-subnav a{display:block;padding:7px 10px 7px 42px;border-radius:8px;color:#bebebe;text-decoration:none;font-size:14px;}
.dm-subnav a:hover{color:#fff;background:rgba(255,255,255,.05);}
.dm-subnav a.is-on{color:#fff;background:rgba(255,255,255,.1);font-weight:600;}
.dm-side-foot{margin-top:auto;font-size:12px;color:#a9a7c9;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.1);line-height:1.5;}
.dm-side-foot button{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;padding:0;font-size:12px;}
.dm-scrim{display:none;}
.dm-main{min-width:0;padding:0 24px;display:flex;flex-direction:column;}
.dm-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:14px 0 12px;font-size:14px;color:#191919;}
.dm-crumbs .msym{font-size:18px;color:#64748b;}
.dm-content{flex:1;padding-bottom:20px;max-width:1500px;width:100%;}
.dm-pfoot{text-align:center;font-size:12px;color:#64748b;padding:18px 0;}
.dm-pfoot a{color:inherit;}

/* module banner */
.dm-banner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#332e5c 0%,#161138 100%);color:#fff;border-radius:14px;box-shadow:rgba(22,17,56,.35) 0 6px 16px -4px;padding:16px 24px;margin-bottom:14px;}
.dm-banner h2{display:flex;align-items:center;gap:10px;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.4px;}
.dm-banner h2 .msym{font-size:26px;}
.dm-banner p{color:#cbd5e1;font-size:13px;margin-top:4px;}
.dm-banner-pills{display:flex;flex-wrap:wrap;gap:8px;}
.dm-pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(255,255,255,.85);border-radius:999px;padding:6px 14px;color:#fff;background:transparent;font:600 13px 'Inter',sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;}
.dm-pill:hover{background:rgba(255,255,255,.12);}
.dm-pill .msym{font-size:17px;}

/* KPI cards */
.dm-kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;}
.dm-kcard{background:#fff;border-radius:12px;box-shadow:rgba(15,23,42,.06) 0 1px 3px,rgba(15,23,42,.08) 0 1px 2px;padding:12px 16px;}
.dm-kcard-head{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.dm-kcard-head span{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.4px;}
.dm-kcard-head .msym{font-size:18px;}
.dm-kcard b{display:block;font-size:22px;font-weight:800;color:#0f172a;margin:2px 0;}
.dm-kcard small{display:flex;align-items:center;gap:4px;font-size:11.5px;color:#64748b;}
.dm-kcard small .msym{font-size:14px;}

/* guide + hints */
.dm-guide{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-left:4px solid #f79f1d;border-radius:12px;padding:12px 14px;margin-bottom:14px;color:#1e293b;}
.dm-guide > .msym{color:#f79f1d;font-size:24px;}
.dm-guide b{font-size:14px;font-weight:700;}
.dm-guide p{color:#475569;font-size:13.5px;margin-top:2px;}
.dm-guide ol{margin:6px 0 0;padding-left:18px;color:#334155;font-size:13px;}
.dm-hintbar{display:flex;gap:8px;align-items:flex-start;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 10px;}
.dm-hintbar .msym{font-size:18px;color:#2b79c8;}
.dm-hintbar a{color:#1d4ed8;}

/* table card + details panel */
.dm-split{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:16px;align-items:start;}
.dm-scard{background:#fff;border-radius:14px;box-shadow:rgba(15,23,42,.06) 0 1px 3px,rgba(15,23,42,.08) 0 1px 2px;padding:16px;min-width:0;}
.dm-scard-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;}
.dm-scard-head h3{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;}
.dm-scard-head h3 .msym{color:#2b79c8;font-size:20px;}
.dm-seg{display:inline-flex;background:#f1f5f9;border-radius:999px;padding:3px;gap:2px;}
.dm-seg a{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#475569;text-decoration:none;}
.dm-seg a .msym{font-size:17px;}
.dm-seg a.is-on{background:#161138;color:#fff;}
.dm-filter{position:relative;display:inline-flex;align-items:center;}
.dm-filter .msym{position:absolute;left:10px;font-size:16px;color:#64748b;pointer-events:none;}
.dm-filter select{border:1px solid #cbd5e1;border-radius:18px;padding:6px 14px 6px 32px;font:12px 'Inter',sans-serif;background:#fff;height:32px;color:#000;}
.dm-table-wrap{overflow-x:auto;}
.dm-table{width:100%;border-collapse:collapse;}
.dm-table th{background:#f8fafc;color:#475569;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;text-align:left;border-bottom:1px solid #e2e8f0;white-space:nowrap;}
.dm-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
.dm-table td b{font-weight:600;color:#0f172a;}
.dm-table tbody tr{cursor:pointer;}
.dm-table tbody tr:hover{background:#f8fafc;}
.dm-table tbody tr.is-sel{background:#eff6ff;box-shadow:inset 3px 0 #2b79c8;}
.dm-empty{text-align:center;color:#6c757d;padding:24px 12px!important;}
.dm-code{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:600;background:#eaeef9;color:#263b7f;padding:1px 9px;border-radius:10px;white-space:nowrap;}
.dm-state{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;}
.dm-state--success{background:rgb(0,180,65);}
.dm-state--info{background:#0a9bd8;}
.dm-state--warning{background:#f79f1d;}
.dm-state--error{background:#e33237;}
.dm-prio{display:inline-block;padding:1px 8px;border-radius:6px;font-size:11.5px;font-weight:700;border:1px solid;}
.dm-prio--low{color:#475569;border-color:#cbd5e1;background:#f8fafc;}
.dm-prio--medium{color:#a1620a;border-color:#f7dcab;background:#fff8ea;}
.dm-prio--high{color:#b3242a;border-color:#f6c5c7;background:#fdecec;}
.dm-dpanel{background:#fff;border-radius:14px;box-shadow:rgba(15,23,42,.06) 0 1px 3px,rgba(15,23,42,.08) 0 1px 2px;padding:16px;position:sticky;top:64px;max-height:calc(100vh - 80px);overflow-y:auto;min-width:0;}
.dm-dhead{display:flex;gap:12px;align-items:flex-start;}
.dm-dhead h3{font-size:16px;font-weight:700;margin-bottom:4px;color:#0f172a;}
.dm-dsec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#2b79c8;margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid #e2e8f0;}
.dm-dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:5px 12px;font-size:13px;margin:8px 0 0;}
.dm-dl dt{color:#64748b;}
.dm-dl dd{margin:0;font-weight:600;color:#1e293b;}
.dm-dl a{color:#2b79c8;}
.dm-due{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;margin-top:10px;}
.dm-due .msym{font-size:18px;}
.dm-due--scheduled{background:#f1f5f9;color:#475569;}
.dm-due--pending{background:#eff6ff;color:#263b7f;}
.dm-due--escalated{background:#fdecec;color:#b3242a;}
.dm-answers{list-style:none;margin:0;padding:0;}
.dm-answers li{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:13px;}
.dm-answers li .msym{font-size:19px;}
.dm-answers li.is-yes .msym{color:#29a762;}
.dm-answers li.is-no .msym{color:#e33237;}
.dm-answers li.is-na .msym{color:#a7a9ac;}
.dm-answers small{display:block;color:#b3242a;font-size:12px;margin-top:2px;}
.dm-track{list-style:none;margin:0;padding:0;}
.dm-track li{position:relative;padding:0 0 14px 30px;}
.dm-track li::before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;box-sizing:border-box;}
.dm-track li:not(:last-child)::after{content:'';position:absolute;left:8px;top:22px;bottom:2px;width:2px;background:#e2e8f0;}
.dm-track li.is-done::before{background:#29a762;border-color:#29a762;}
.dm-track li.is-now::before{border-color:#2b79c8;box-shadow:0 0 0 4px rgba(43,121,200,.18);}
.dm-track li.is-late::before{border-color:#e33237;box-shadow:0 0 0 4px rgba(227,50,55,.18);}
.dm-track b{display:block;font-size:13.5px;color:#0f172a;}
.dm-track span{display:block;font-size:12.5px;color:#475569;}
.dm-track li.is-late span{color:#b3242a;font-weight:600;}
.dm-track small{display:block;font-size:12px;color:#64748b;margin-top:2px;}
.dm-stepcard{border:1px solid #bfdbfe;background:#f8fbff;border-radius:12px;padding:12px;}
.dm-stepcard-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.dm-stepcard-head > .msym{background:#2b79c8;color:#fff;border-radius:8px;padding:6px;font-size:20px;}
.dm-stepcard-head b{display:block;font-size:14px;}
.dm-stepcard-head small{display:block;font-size:12px;color:#64748b;}
.dm-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.dm-fgrid label,.dm-flabel{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:#475569;margin:6px 0 4px;}
.dm-stepcard .dm-select,.dm-stepcard .dm-textarea{font-size:14px;padding:8px 10px;}
.dm-stepcard .dm-hint{margin:8px 0;}

/* ==========================================================================
   APP LOOK — mirrors the FactoryOS mobile app: navy module header, uppercase
   module tabs, list cards with state pills and coloured action buttons.
   ========================================================================== */
.dm-wa{background:#f0f0f0;}
.dm-wa-top{background:#161138;color:#fff;padding:10px 12px;min-height:56px;display:flex;align-items:center;gap:10px;flex:none;}
.dm-wa-top h3{color:#fff;font-size:16px;font-weight:700;letter-spacing:.6px;}
.dm-wa-top button{background:none;border:0;color:#fff;cursor:pointer;padding:4px;display:grid;place-items:center;}
.dm-wa-logo{height:30px;width:30px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;}
.dm-wa-bell{color:#fff;display:grid;place-items:center;}
.dm-wa-mtabs{flex:none;display:flex;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);position:relative;z-index:1;}
.dm-wa-mtabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:12px 4px 10px;font:700 12.5px 'Inter',sans-serif;letter-spacing:.4px;color:#64748b;cursor:pointer;}
.dm-wa-mtabs button.is-on{color:#161138;border-bottom-color:#E33237;}
.dm-wa-body{background:#f0f0f0;padding:10px 12px 16px;}
.dm-wa-hello{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.dm-wa-hello b{display:block;font-size:15px;}
.dm-wa-hello small{display:block;font-size:12.5px;color:#64748b;}
.dm-wa-count{text-align:center;font-size:15px;font-weight:700;color:#263b7f;padding:4px 0 10px;}
.dm-wa-formhead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#263b7f;padding:2px 2px 10px;}
.dm-wa-formtitle{text-align:center;font-size:15px;font-weight:700;color:#263b7f;padding:2px 0 10px;margin-bottom:10px;border-bottom:1px solid rgba(0,0,0,.1);}
.dm-wa-formtitle small{display:block;font-size:12px;font-weight:500;color:#64748b;margin-top:2px;}
.dm-wa-empty{text-align:center;color:#64748b;font-size:14px;padding:16px 8px;}
.dm-wa-asset{display:flex;gap:10px;background:#fff;padding:12px;margin:-10px -12px 0;}
.dm-wa-asset b{display:block;font-size:16px;font-weight:700;color:#161138;line-height:1.25;}
.dm-wa-asset small{display:block;font-size:12.5px;color:#6b7086;margin:2px 0 4px;}
.dm-wa-subtabs{display:flex;background:#fff;margin:0 -12px 10px;border-bottom:1px solid #e2e8f0;}
.dm-wa-subtabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:10px;font:700 13px 'Inter',sans-serif;color:#64748b;cursor:pointer;}
.dm-wa-subtabs button.is-on{color:#161138;border-bottom-color:#E33237;}
.dm-wa-inchead{background:#fff;padding:12px;margin:-10px -12px 10px;}
.dm-wa-inchead b{display:block;font-size:15px;font-weight:700;color:#161138;background:#f0f0f0;padding:6px 8px;border-radius:4px;margin-bottom:6px;}
.dm-wa-inchead small{display:block;font-size:12.5px;color:#646464;}
.dm-tk{background:#fff;box-shadow:1px 1px 3px rgba(0,0,0,.35);border-radius:3px;margin:0 0 10px;color:#646464;}
.dm-tk.is-click{cursor:pointer;}
.dm-tk-main{display:flex;}
.dm-tk-ic{width:58px;flex:none;display:grid;place-items:center;}
.dm-tk-ic .msym{font-size:30px;color:#263b7f;}
.dm-tk-text{padding:10px 10px 6px 0;min-width:0;}
.dm-tk-title{font-size:15px;font-weight:700;color:#333;line-height:1.3;word-break:break-word;}
.dm-tk-desc{font-size:12.5px;color:#646464;margin-top:2px;}
.dm-tk-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;padding:4px 8px 8px 58px;}
.dm-tk-act{border:0;border-radius:25px;padding:6px 14px;font:700 12.5px 'Inter',sans-serif;color:#fff;cursor:pointer;margin-left:4px;white-space:nowrap;}
.dm-tk-act--blue{background:#2b79c8;}
.dm-tk-act--orange{background:#ff9800;}
.dm-tk-act--cyan{background:#0a9bd8;}
.dm-tk-act--green{background:#04815e;}
.dm-tk-act--block{display:block;width:100%;margin:12px 0 0;padding:11px;font-size:14px;}
.dm-tk-add{width:36px;height:36px;border-radius:50%;border:0;background:#2b79c8;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;}
.dm-wa .dm-track{background:transparent;}
.dm-wa .dm-stepcard{background:#fff;}
.dm-wa .dm-fgrid{grid-template-columns:1fr;}
.dm-solo .dm-wa-top{padding-top:calc(10px + env(safe-area-inset-top,0px));}

/* ---------- portal responsive ---------- */
@media (max-width:1180px){
  .dm-split{grid-template-columns:minmax(0,1fr);}
  .dm-dpanel{position:static;max-height:none;}
}
@media (max-width:900px){
  .dm-pbody{grid-template-columns:minmax(0,1fr);}
  .dm-burger{display:inline-grid;}
  .dm-side{position:fixed;top:52px;left:0;bottom:0;height:auto;width:280px;z-index:45;transform:translateX(-100%);transition:transform .2s ease;}
  body.dm-nav-open .dm-side{transform:none;}
  body.dm-nav-open .dm-scrim{display:block;position:fixed;inset:52px 0 0 0;background:rgba(15,12,43,.45);z-index:44;}
  .dm-main{padding:0 14px;}
}
@media (max-width:640px){
  .dm-topbar{gap:4px;padding:0 8px;}
  .dm-topbar-logo img{height:24px;}
  .dm-demo-tag,.dm-sync b{display:none;}
  .dm-crumbs{font-size:12.5px;padding:10px 0 8px;}
  .dm-banner{padding:14px 16px;}
  .dm-banner h2{font-size:17px;}
  .dm-kgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .dm-kcard{padding:10px 12px;}
  .dm-kcard b{font-size:20px;}
  .dm-table td,.dm-table th{padding:8px;}
  .dm-fgrid{grid-template-columns:1fr;}
  .dm-dl{grid-template-columns:100px minmax(0,1fr);}
  .dm-scard,.dm-dpanel{padding:12px;}
}
.dm-sub{display:block;font-size:11.5px;color:#64748b;}
.dm-nw,.dm-table td:last-child{white-space:nowrap;}

/* My Factory */
.dm-dsum{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#fff;border-radius:14px;box-shadow:rgba(15,23,42,.06) 0 1px 3px,rgba(15,23,42,.08) 0 1px 2px;padding:12px 16px;margin-bottom:14px;}
.dm-dsum-main{flex:1;min-width:180px;}
.dm-dsum-main h2{font-size:18px;font-weight:800;color:#0f172a;}
.dm-dsum-main span{font-size:13px;color:#64748b;}
.dm-viewtabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #e2e8f0;margin:-4px -4px 0;padding:0 4px;}
.dm-viewtabs button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-bottom:3px solid transparent;padding:9px 12px;font:600 13px 'Inter',sans-serif;color:#64748b;cursor:pointer;white-space:nowrap;}
.dm-viewtabs button .msym{font-size:18px;}
.dm-viewtabs button span{background:#f1f5f9;color:#475569;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;}
.dm-viewtabs button.is-on{color:#161138;border-bottom-color:#2b79c8;}
.dm-viewtabs button.is-on span{background:#2b79c8;color:#fff;}
.dm-filter--search input{border:1px solid #cbd5e1;border-radius:18px;padding:6px 14px 6px 32px;font:12px 'Inter',sans-serif;background:#fff;height:32px;width:220px;max-width:100%;}
.dm-pager{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#64748b;margin-top:10px;}
.dm-pager .dm-icon-btn{width:30px;height:30px;}
.dm-pager .dm-icon-btn[disabled]{opacity:.35;cursor:default;}
.dm-steplist{margin:0;padding-left:20px;font-size:13px;color:#334155;}
.dm-steplist li{margin-bottom:4px;}
@media (max-width:640px){
  .dm-filter--search,.dm-filter--search input{width:100%;}
  .dm-dsum .dm-filter{width:100%;}
  .dm-dsum .dm-filter select{width:100%;}
}
.dm-viewtabs{flex-wrap:wrap;overflow:visible;}
@media (max-width:640px){
  .dm-viewtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .dm-viewtabs::-webkit-scrollbar{display:none;}
}

/* My Factory: the cards are the list selector */
.dm-kgrid--pick{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;}
.dm-kgrid--pick .dm-kcard{padding:10px 12px;}
.dm-kgrid--pick .dm-kcard-head span{font-size:11px;letter-spacing:.3px;}
.dm-kcard--btn{display:block;width:100%;text-align:left;border:2px solid transparent;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;}
.dm-kcard--btn:hover{border-color:#bfdbfe;transform:translateY(-1px);}
.dm-kcard--btn.is-on{border-color:#2b79c8;background:#f5f9ff;box-shadow:0 6px 16px -8px rgba(43,121,200,.5);}
.dm-kcard--btn .dm-kcard-head,.dm-kcard--btn small{display:flex;}
.dm-scope{font-size:12px;font-weight:600;color:#2b79c8;background:#eff6ff;border-radius:999px;padding:2px 10px;margin-left:6px;}
.dm-jumps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.dm-jumps button{display:flex;align-items:center;gap:8px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit;text-align:left;}
.dm-jumps button:hover{border-color:#2b79c8;background:#f5f9ff;}
.dm-jumps .msym{color:#2b79c8;font-size:20px;}
.dm-jumps b{font-size:16px;color:#0f172a;}
.dm-jumps span{font-size:12.5px;color:#475569;}
.dm-showall{margin-top:8px;}
@media (max-width:640px){
  .dm-kgrid--pick{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* start screen on short phone screens (e.g. 375x667): the feature chips repeat the sentence above them */
@media (max-width:640px) and (max-height:760px){
  .dm-gate-what{display:none;}
  .dm-gate-card h1{margin-bottom:2px;}
  .dm-gate-lead{margin-bottom:10px;}
  .dm-gate-fields .dm-field{margin-bottom:6px;}
  .dm-privacy{margin:10px 0;padding:8px 10px;font-size:12px;}
}

/* start screen: readable sizes (overrides the compact pass above) */
.dm-gate{padding:24px 16px;}
.dm-gate-card{max-width:700px;padding:30px 34px;border-radius:20px;}
.dm-gate-top{margin-bottom:14px;}
.dm-gate-logo{height:36px;}
.dm-gate-card h1{font-size:clamp(26px,3.6vw,32px);margin-bottom:8px;}
.dm-gate-lead{font-size:16.5px;line-height:1.6;margin-bottom:16px;}
.dm-gate-what{gap:8px;margin-bottom:20px;}
.dm-gate-what > span{font-size:13.5px;padding:6px 12px 6px 9px;}
.dm-gate-what .msym{font-size:19px;}
.dm-gate-fields{gap:16px;}
.dm-gate-fields .dm-field{margin-bottom:10px;}
.dm-gate .dm-label{font-size:14px;margin-bottom:6px;}
.dm-gate .dm-input{font-size:16px;padding:12px 14px;}
.dm-gate-suggest{gap:8px;margin:0;}
.dm-gate-suggest > span{font-size:14px;}
.dm-gate-suggest .dm-chip{font-size:13.5px;padding:5px 12px;}
.dm-gate .dm-privacy{font-size:14px;line-height:1.6;padding:14px 16px;margin:20px 0;}
.dm-gate .dm-privacy .msym{font-size:24px;}
.dm-gate #dmStart{font-size:16px;padding:14px;}
.dm-gate-foot{font-size:14px;margin-top:14px;}
@media (max-width:640px){
  .dm-gate{padding:14px 10px;}
  .dm-gate-card{padding:20px 18px;}
  .dm-gate-lead{font-size:15.5px;}
  .dm-gate-fields{gap:0;}
  .dm-gate .dm-privacy{font-size:13.5px;padding:12px 14px;margin:16px 0;}
}
@media (max-width:640px) and (max-height:760px){
  .dm-gate-what{display:none;}
}
@media (max-width:640px){
  .dm-gate-what{display:none;}   /* the sentence above already names these */
  .dm-gate-suggest{flex-wrap:nowrap;gap:6px;}
  .dm-gate-suggest .dm-chip{font-size:13px;padding:4px 9px;}
  .dm-gate-suggest > span{font-size:13px;}
}
.dm-gate-card{min-width:0;}
@media (max-width:640px){
  .dm-gate-suggest{overflow-x:auto;scrollbar-width:none;}
  .dm-gate-suggest::-webkit-scrollbar{display:none;}
  .dm-gate-suggest .dm-chip{padding:4px 8px;flex:none;}
}
@media (max-width:640px){ .dm-gate-suggest > span{display:none;} }