/* Q-Task look & feel v2 (Nov 2026): floating navy rail, airy canvas, tinted hex stat cards,
   pill buttons / segmented tabs. Loaded after the inline styles so it restyles every page
   without touching page logic. Class names are the ones the pages already render. */
:root{
  --bg:#EDF1F7; --card:#FFFFFF; --subtle:#F5F7FB; --track:#E6EBF3; --hover:#F7F9FC;
  --ink:#0E1A2C; --muted:#5D6D85; --line:#E1E7EF;
  --navy:#113454; --navy-deep:#0C2740; --navy-line:#1B4468;
  --red:#E23C39; --red-soft:#FCEBEA; --red-ink:#B72A27;
  --green:#14A06A; --green-soft:#E2F5EC; --green-ink:#0D774E;
  --amber:#DB8B1B; --amber-soft:#FCF0DC; --amber-ink:#94590C; --amber-line:#F1D9AE;
  --blue-soft:#E6EDF6; --grey-soft:#ECF0F5; --grey-ink:#53637A;
  --purple:#6E4BC2; --purple-soft:#EFEAFA;
  --sb-bg:#0C2740; --sb-bg2:#113454; --sb-ink:#A9BBD7; --sb-dim:#6F86AA;
  --shadow:0 1px 2px rgba(14,26,44,.04),0 8px 24px -12px rgba(14,26,44,.12);
  --shadow-lg:0 20px 40px -18px rgba(16,40,74,.45);
  --font-display:'Encode Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:16px; --sb:252px;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M14 4 23 9.2v10.4L14 24.8 5 19.6V9.2z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
}
html,body{background:var(--bg)}
body{font-size:14px; color:var(--ink); font-feature-settings:"cv11","ss01"}
h1,h2,h3,.disp{font-family:var(--font-display)}
:focus-visible{outline:2px solid var(--red); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- Sidebar: floating rail ---------- */
.sidebar{top:12px; bottom:12px; left:12px; width:var(--sb); border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,var(--sb-bg2),var(--sb-bg) 38%); color:var(--sb-ink); box-shadow:var(--shadow-lg)}
.sidebar::after{content:""; position:absolute; right:-40px; bottom:80px; width:200px; height:220px; pointer-events:none; opacity:.035;
  background-color:#fff; -webkit-mask:var(--hex) repeat; mask:var(--hex) repeat; -webkit-mask-size:56px 64px; mask-size:56px 64px}
.sidebar .brand{border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar [data-brand-logo-wrap]{border-radius:14px!important; padding:10px 16px!important}
.nav{padding:6px 12px 16px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent; position:relative; z-index:1}
.nav-group{margin-top:14px}
.nav-label{font-size:10px; letter-spacing:.14em; color:var(--sb-dim); padding:0 10px 6px}
.nav-item{gap:11px; padding:8px 10px; border-radius:11px; color:var(--sb-ink); font-weight:500}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-item.active{background:rgba(255,255,255,.1); color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.nav-item.active::before{display:none}
.nav-item svg{opacity:.8}
.nav-item.active svg{color:#FF7370; opacity:1}
.nav-item .pill{font-size:10.5px; font-weight:600; border-radius:999px; padding:1px 8px; background:var(--red); font-variant-numeric:tabular-nums}
.nav-item .pill.amber{background:rgba(219,139,27,.25); color:#FFD08A}
.sb-foot{margin:0 12px 12px; padding:10px; border-radius:14px; background:rgba(255,255,255,.05); border-top:none; position:relative; z-index:1}
.sb-foot .rl{color:var(--sb-dim)}
.sb-foot .ico-btn{border-color:rgba(255,255,255,.12)!important; color:var(--sb-ink)!important}
.sb-foot .ico-btn:hover{color:#fff!important; border-color:rgba(255,255,255,.3)!important}
.avatar{background:linear-gradient(135deg,#E23C39,#A92623)}

/* ---------- Main + topbar ---------- */
.main{margin-left:calc(var(--sb) + 24px); padding-right:16px}
.topbar{height:auto; padding:14px 6px 14px 12px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); border-bottom:none}
.crumb{display:flex; flex-direction:column; min-width:0}
.crumb small{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.crumb b{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink)}
.search input{width:300px; border-radius:999px; background:var(--card); padding:9px 14px 9px 38px; box-shadow:var(--shadow)}
.search input:focus{background:var(--card)}
.search svg{left:14px; top:50%; transform:translateY(-50%)}
.ico-btn{border-radius:50%; background:var(--card); box-shadow:var(--shadow)}
.content{padding:8px 6px 40px 12px}

/* ---------- Page head ---------- */
.page-head{margin-bottom:22px}
.page-head h1{font-size:28px; font-weight:800; letter-spacing:-.025em; line-height:1.15}
.page-head .sub{font-size:13.5px; margin-top:6px}
.ph-icon{border-radius:14px; width:44px; height:44px; background:linear-gradient(135deg,var(--sb-bg2),var(--sb-bg)); box-shadow:0 8px 18px -8px rgba(12,39,64,.6)}

/* ---------- Buttons ---------- */
.btn{border-radius:999px; padding:9px 16px}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red); box-shadow:0 6px 16px -6px rgba(226,60,57,.55)}
.btn-red:hover{background:var(--red-ink); box-shadow:0 8px 18px -6px rgba(226,60,57,.6)}
.btn-ghost{background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--muted)}

/* ---------- Cards ---------- */
.card{border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.card:hover{box-shadow:var(--shadow)}
.card-h h3{font-size:15px; letter-spacing:-.01em}

/* ---------- Stat cards: tinted by tone, hex texture, solid icon ---------- */
.stat{--t:var(--navy); isolation:isolate; overflow:hidden; border-radius:var(--r); padding:18px 20px; min-height:118px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--t) 16%,var(--card)),color-mix(in srgb,var(--t) 5%,var(--card)) 70%);
  border:1px solid color-mix(in srgb,var(--t) 22%,var(--line)); box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.stat.s-red{--t:var(--red)} .stat.s-green{--t:var(--green)} .stat.s-amber{--t:var(--amber)} .stat.s-purple{--t:var(--purple)}
.stat:has(> .ic.red){--t:var(--red)} .stat:has(> .ic.green){--t:var(--green)} .stat:has(> .ic.amber){--t:var(--amber)} .stat:has(> .ic.purple){--t:var(--purple)}
.stat.s-navy,.stat.s-red,.stat.s-green,.stat.s-amber,.stat.s-purple{background:linear-gradient(150deg,color-mix(in srgb,var(--t) 16%,var(--card)),color-mix(in srgb,var(--t) 5%,var(--card)) 70%)}
.stat::before{content:""; position:absolute; inset:auto -10px -14px auto; left:auto; top:auto; width:120px; height:96px; z-index:-1;
  background:var(--t)!important; opacity:.2; -webkit-mask:var(--hex) repeat; mask:var(--hex) repeat}
.stat:hover{transform:translateY(-3px); box-shadow:0 14px 30px -14px color-mix(in srgb,var(--t) 60%,transparent); border-color:color-mix(in srgb,var(--t) 45%,var(--line))}
.stat .ic{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:12px; margin:0;
  background:var(--t); color:#fff; box-shadow:0 6px 14px -6px var(--t)}
.stat:has(> .ic) .lbl{padding-right:46px}
.stat .lbl{font-size:12px; text-transform:none; letter-spacing:0; font-weight:600; color:color-mix(in srgb,var(--t) 45%,var(--muted))}
.stat .val{font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:10px; line-height:1.05; font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--t) 80%,var(--ink))}
.stat .chg{font-size:11.5px; margin-top:10px; padding:3px 9px; border-radius:999px; background:color-mix(in srgb,var(--card) 70%,transparent); color:color-mix(in srgb,var(--t) 75%,var(--ink))}
.stat .chg.up{color:var(--green-ink); background:var(--green-soft)}
.stat .chg.dn,.stat .chg.down{color:var(--red-ink); background:var(--red-soft)}
.stat.picked{outline:2px solid var(--t); outline-offset:-2px}
@media(max-width:700px){.stat{padding:14px; min-height:0} .stat .val{font-size:24px} .stat .ic{width:32px; height:32px; top:12px; right:12px; border-radius:10px}}

/* CEO KPI tiles follow the same look */
.kpi{--t:var(--navy); position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r); box-shadow:var(--shadow);
  background:linear-gradient(150deg,color-mix(in srgb,var(--t) 13%,var(--card)),color-mix(in srgb,var(--t) 4%,var(--card)) 70%);
  border:1px solid color-mix(in srgb,var(--t) 20%,var(--line))}
.kpi::before{content:""; position:absolute; right:-10px; bottom:-14px; width:110px; height:90px; z-index:-1; background:var(--t); opacity:.16; -webkit-mask:var(--hex) repeat; mask:var(--hex) repeat}
.kpi:hover{transform:translateY(-3px); box-shadow:0 14px 30px -14px color-mix(in srgb,var(--t) 60%,transparent)}
.kpi .lbl{text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; color:color-mix(in srgb,var(--t) 45%,var(--muted))}
.kpi .val{font-family:var(--font-display); letter-spacing:-.03em; color:color-mix(in srgb,var(--t) 80%,var(--ink))}
.kpi .meter{background:color-mix(in srgb,var(--t) 12%,var(--track))}
.kpi .meter i{background:var(--t)}
.g6 > .kpi:nth-child(6n+1),.g6 > .kpi:nth-child(6n+5){--t:var(--green)} .g6 > .kpi:nth-child(6n+4){--t:var(--amber)}

/* Navy hero banners (CEO + main dashboard) */
.ceo-hero,.dash-hero{position:relative; overflow:hidden; isolation:isolate; border-radius:20px;
  background:linear-gradient(120deg,var(--sb-bg2),var(--sb-bg)); box-shadow:var(--shadow-lg); padding:24px 26px}
.ceo-hero::after,.dash-hero::after{content:""; position:absolute; inset:0 0 0 auto; width:46%; z-index:-1; background:rgba(255,255,255,.09);
  -webkit-mask:var(--hex) repeat,linear-gradient(90deg,transparent,#000 60%); -webkit-mask-composite:source-in; mask:var(--hex) repeat,linear-gradient(90deg,transparent,#000 60%); mask-composite:intersect}
.ceo-hero h1{font-size:26px; font-weight:800; letter-spacing:-.02em}
.ceo-hero .sub,.ceo-hero .asof{color:#B9C8DE}

/* ---------- Tables ---------- */
.tbl{border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums}
.tbl th{font-size:11px; letter-spacing:.06em; background:var(--subtle); border-bottom:none; white-space:nowrap}
.tbl th:first-child{border-radius:10px 0 0 10px} .tbl th:last-child{border-radius:0 10px 10px 0}
.tbl td{padding:12px; border-bottom:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--hover)}
.tbl .mono,.mono{font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:-.01em}

/* ---------- Tags, tabs, chips ---------- */
.tag{gap:6px; font-size:11.5px; padding:3px 10px; border-radius:999px; white-space:nowrap}
.tabs{display:inline-flex; gap:2px; padding:3px; background:var(--subtle); border:1px solid var(--line); border-radius:999px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
.tabs .tab{padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--muted); border-radius:999px; border:none; margin:0; white-space:nowrap}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.active{color:var(--ink); background:var(--card); box-shadow:0 1px 3px rgba(14,26,44,.12); border:none}
.tabs .tab.active::after{display:none}

/* ---------- Forms & modals ---------- */
input,select,textarea{font-family:inherit}
.modal,.modal-card,.mbox{border-radius:20px}

/* ---------- Phone ---------- */
@media(max-width:820px){
  .sidebar{top:0; bottom:0; left:0; border-radius:0 22px 22px 0}
  .main{margin-left:0; padding-right:0}
  .topbar{padding-inline:16px}
  .content{padding-inline:16px}
  .search input{width:200px}
}

/* ---------- CEO dashboard v2 ---------- */
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 2px 12px}
.sec-h h3{font-size:18px; font-weight:700; letter-spacing:-.01em}
.sec-h span{font-size:12.5px; color:var(--muted)}
.stat .val .of{font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0}
.ceo-sum{display:flex; align-items:center; gap:24px; color:#fff; margin-bottom:22px}
.ceo-sum .hero-body{flex:1; min-width:0}
.hero-eyebrow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9FB3D1; font-weight:600}
.hero-eyebrow b{color:#FF7370; font-weight:700}
.ceo-sum h2{font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:10px; line-height:1.3; max-width:40ch}
.ceo-sum h2 em{font-style:normal; color:#FF8D8A}
.hero-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.hero-chips span{font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.1); color:#E3EAF5; display:inline-flex; align-items:center; gap:6px}
.hero-chips i{width:7px; height:7px; border-radius:50%; display:inline-block}
.ring{position:relative; width:124px; height:124px; flex:none}
.ring svg{width:100%; height:100%}
.ring .rv{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.ring .rv b{font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1}
.ring .rv span{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#B9C8DE; margin-top:4px}
.ceo-split{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); align-items:start}
.approval-row{display:flex; align-items:center; gap:12px; padding:12px 10px; margin:0 -10px; border-bottom:1px solid var(--line); border-radius:12px; cursor:pointer; transition:background .12s}
.approval-row:last-child{border-bottom:none}
.approval-row:hover{background:var(--hover)}
.ar-ic{width:38px; height:38px; border-radius:12px; background:var(--blue-soft); color:var(--navy); display:grid; place-items:center; flex:none}
.ar-ic svg{width:17px; height:17px}
.ar-main{flex:1; min-width:0}
.ar-main .t{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ar-main .s{font-size:12px; color:var(--muted); margin-top:2px}
.ar-amt{font-family:var(--font-display); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.risk-row{display:flex; gap:12px; align-items:flex-start; padding:10px 8px; margin:0 -8px; border-radius:10px; cursor:pointer}
.risk-row:hover{background:var(--hover)}
.risk-row .t{font-size:13.5px; font-weight:600}
.risk-row .s{font-size:12px; color:var(--muted); margin-top:2px}
.hx{width:12px; height:13px; flex:none; margin-top:4px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hx.red{background:var(--red)} .hx.amber{background:var(--amber)} .hx.green{background:var(--green)}
.dept-card{--t:var(--green); position:relative; isolation:isolate; overflow:hidden; cursor:pointer; border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--t) 7%,var(--card)),var(--card) 60%); border:1px solid color-mix(in srgb,var(--t) 16%,var(--line)); box-shadow:var(--shadow); transition:transform .18s,box-shadow .18s}
.dept-card.t-amber{--t:var(--amber)} .dept-card.t-red{--t:var(--red)}
.dept-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px -14px color-mix(in srgb,var(--t) 55%,transparent)}
.dept-card .dh{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.dept-card .dh b{font-size:14px; font-weight:700; line-height:1.25}
.dept-card .dv .n{font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.03em}
.dept-card .dv .u{font-size:12.5px; color:var(--muted)}
.dept-card .dl{font-size:12.5px; color:var(--ink); line-height:1.45; flex:1}
.dept-card .df{display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:9px; margin-top:4px}
.dept-card .lk{color:color-mix(in srgb,var(--t) 80%,var(--ink)); font-weight:600; white-space:nowrap}
.stage-row{display:grid; grid-template-columns:150px 1fr 34px 86px; align-items:center; gap:12px; padding:9px 0; font-size:13px}
.stage-row span{color:var(--muted)}
.stage-row .track{height:10px; border-radius:6px; background:var(--track); overflow:hidden}
.stage-row .track i{display:block; height:100%; border-radius:6px}
.stage-row .cl-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px}
.stage-row b{text-align:right} .stage-row small{color:var(--muted); text-align:right; font-size:12px}
.ceo-row .bar i{background:var(--navy)!important}
@media(max-width:1100px){.ceo-split{grid-template-columns:1fr}}
@media(max-width:700px){.ceo-sum{flex-direction:column; align-items:flex-start} .ceo-sum h2{font-size:19px} .ring{width:100px; height:100px} .stage-row{grid-template-columns:110px 1fr 28px}.stage-row small{display:none}}
/* executive summaries */
.exec-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.exec-search{margin:0}
.exec-search input{width:260px}
.exec-sel{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 14px; font-size:13px; color:var(--ink); box-shadow:var(--shadow)}
.exec-tbl td{vertical-align:top}
.exec-tbl .et{font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap}
.exec-tbl .ed{font-size:11.5px; color:var(--muted); margin-top:2px}
.exec-tbl .es{font-size:13px; line-height:1.5; min-width:320px; max-width:560px}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); flex:none}
@media(max-width:700px){.exec-search input{width:100%} .exec-search{flex:1 1 100%} .exec-tbl .es{min-width:240px}}

/* ---------- Main Dashboard v2 ---------- */
.main-hero{display:flex; align-items:center; gap:24px; color:#fff; margin-bottom:16px}
.main-hero .hero-body{flex:1; min-width:0}
.main-hero h2{font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:10px; line-height:1.3; max-width:44ch}
.main-hero h2 em{font-style:normal; color:#FF8D8A}
.hero-logo{flex:none; background:#fff; border-radius:18px; padding:14px 18px; box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.hero-logo img{height:54px; display:block}
.hero-mark{flex:none; position:relative; margin-right:6px}
.hero-mark img{height:118px; width:auto; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.hx.navy{background:var(--navy)}
.note{background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:12px; padding:11px 14px; font-size:12.5px; color:var(--amber-ink); line-height:1.5}
.today-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 8px; margin:0 -8px; border-bottom:1px solid var(--line); border-radius:10px; cursor:pointer}
.today-row:last-child{border-bottom:none}
.today-row:hover{background:var(--hover)}
.today-row .t{font-size:13.5px; font-weight:600} .today-row .s{font-size:12px; color:var(--muted); margin-top:2px}
.today-row b{font-family:var(--font-display); font-size:18px; white-space:nowrap}
.act-row{display:flex; align-items:flex-start; gap:11px; padding:9px 8px; margin:0 -8px; border-radius:10px; cursor:pointer}
.act-row:hover{background:var(--hover)}
.act-row .t{flex:1; font-size:13px; line-height:1.4}
.act-row .w{font-size:11.5px; color:var(--muted); white-space:nowrap}
.legend{display:flex; gap:14px; font-size:11.5px; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:6px} .legend i{width:9px; height:9px; border-radius:3px; display:inline-block}
.brand-foot{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:22px; align-items:start;
  background:linear-gradient(120deg,var(--sb-bg2),var(--sb-bg)); color:#C9D6EA; border-radius:20px; padding:24px 26px; margin-top:8px; box-shadow:var(--shadow-lg)}
.brand-foot::after{content:""; position:absolute; inset:0 0 0 auto; width:40%; z-index:-1; background:rgba(255,255,255,.06); -webkit-mask:var(--hex) repeat; mask:var(--hex) repeat}
.bf-brand{display:flex; gap:12px; align-items:center}
.bf-logo{background:#fff; border-radius:10px; padding:6px 9px; display:inline-flex} .bf-logo img{height:26px; display:block}
.bf-brand b{display:block; color:#fff; font-family:var(--font-display); font-size:17px}
.bf-brand span{font-size:12px; color:#9FB3D1}
.brand-foot small{display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:6px}
.brand-foot p{font-size:12.5px; line-height:1.5}
.bf-certs{display:flex; flex-wrap:wrap; gap:6px} .bf-certs span{background:rgba(255,255,255,.1); border-radius:999px; padding:2px 9px; font-size:11px; color:#E3EAF5}
.bf-line{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; font-size:11.5px; color:#9FB3D1}
@media(max-width:900px){.brand-foot{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.main-hero{flex-direction:column; align-items:flex-start} .main-hero h2{font-size:19px} .hero-logo,.hero-mark{display:none} .brand-foot{grid-template-columns:1fr}}

/* ---------- SHEQ & ESG Portal ---------- */
.sheq-tabs{margin-bottom:18px}
#sheqView .eyebrow,.modal .eyebrow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:6px}
#sheqView .sub,.modal .sub{font-size:12.5px; color:var(--muted)}
.sq-intro{display:grid; grid-template-columns:1.15fr 1fr .9fr; gap:16px; margin-bottom:22px}
.sq-intro h3{font-size:17px; margin-bottom:8px}
.sq-intro p{font-size:13.5px; line-height:1.6; color:var(--ink)}
.esg-l{display:flex; gap:10px; margin-top:10px; font-size:12.5px; line-height:1.45}
.esg-l > b{width:26px; height:28px; flex:none; display:grid; place-items:center; background:var(--navy); color:#fff; font-family:var(--font-display); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.esg-l strong{display:block} .esg-l span{color:var(--muted)}
.sq-part{background:linear-gradient(140deg,var(--sb-bg2),var(--sb-bg)); color:#fff; border:none}
.sq-part .eyebrow{color:#FF7370} .sq-part h3{color:#fff}
.sq-part ul{margin:4px 0 16px 18px; font-size:13px; line-height:1.9; color:#DCE5F2}
.sq-ind{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.sq-ind-h{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px} .sq-ind-h > div{display:flex; flex-direction:column} .sq-ind-h b{font-size:16px} .sq-ind-h span{font-size:12px; color:var(--muted)}
.sq-ind-h i{flex:none; width:14px; height:14px; border-radius:50%; margin-top:3px}
.sq-col.lead .sq-ind-h i{background:var(--green)} .sq-col.lag .sq-ind-h i{background:var(--red)}
.sq-panel{border-radius:16px; padding:12px; border:1px solid var(--line); border-top-width:4px}
.sq-col.lead .sq-panel{background:var(--green-soft); border-color:color-mix(in srgb,var(--green) 45%,transparent); border-top-color:var(--green)}
.sq-col.lag .sq-panel{background:var(--red-soft); border-color:color-mix(in srgb,var(--red) 45%,transparent); border-top-color:var(--red)}
.sq-col.lead .stat .val{color:var(--green-ink)} .sq-col.lag .stat .val{color:var(--red-ink)}
.sq-ind .stat{min-height:104px}
.sq-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0 14px}
.sq-grid .fld.wide{grid-column:1/-1}
.sq-form-card h3{font-size:18px} .sq-form-card > .sub{margin:4px 0 14px}
.sq-types{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:16px}
.sq-type{cursor:pointer} .sq-type input{position:absolute; opacity:0}
.sq-type span{display:block; border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--subtle); transition:.15s}
.sq-type span b{display:block; font-size:13.5px} .sq-type span small{font-size:12px; color:var(--muted)}
.sq-type input:checked + span{border-color:var(--red); background:var(--red-soft)}
.sq-type input:focus-visible + span{outline:2px solid var(--red)}
.sq-checks{display:flex; flex-direction:column; justify-content:center; gap:8px; font-size:13px}
.sq-checks label{display:flex; gap:8px; align-items:center; font-size:13px!important; color:var(--ink)!important; font-weight:500!important}
.sq-checks input{width:auto!important}
.sq-actions{display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:6px}
.sq-msg{font-size:12.5px; margin-right:auto} .sq-msg.err{color:var(--red-ink)} .sq-msg.ok{color:var(--green-ink)}
.sq-check{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:6px 0 12px}
.sq-ci{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13px}
.sq-ci:last-child{border-bottom:none} .sq-ci:nth-child(even){background:var(--subtle)}
.crit-b{font-size:10px; color:var(--red-ink); background:var(--red-soft); border-radius:999px; padding:1px 7px; margin-left:4px; font-weight:600}
.sq-pf{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; background:var(--card); flex:none}
.sq-pf button{border:none; background:none; font:inherit; font-size:12px; font-weight:600; color:var(--muted); padding:4px 11px; border-radius:999px; cursor:pointer}
.sq-pf button.pass.on{background:var(--green); color:#fff} .sq-pf button.fail.on{background:var(--red); color:#fff} .sq-pf button.na.on{background:var(--grey-ink); color:#fff}
.sq-score{font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:10px}
.sq-score.bad{color:var(--red-ink)}
.sq-steps{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.sq-steps span{font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--blue-soft); color:var(--navy)}
.sq-kv{display:grid; grid-template-columns:120px 1fr; gap:6px 12px; font-size:13px; margin-bottom:12px}
.sq-kv span{color:var(--muted)}
.sq-block{background:var(--subtle); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.5}
.sq-block label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:8px}
.sq-block label:first-child{margin-top:0} .sq-block p{white-space:pre-wrap}
.xp{font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap}
.xp-red{background:var(--red-soft); color:var(--red-ink)} .xp-amber{background:var(--amber-soft); color:var(--amber-ink)} .xp-green{background:var(--green-soft); color:var(--green-ink)} .xp-none{color:var(--muted)}
.sq-cb{display:flex; gap:8px; align-items:center; padding:6px 0; font-size:13.5px}
.esg-sec{margin-bottom:8px} .esg-h{display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; margin:10px 0 8px}
.esg-h b{width:26px; height:28px; display:grid; place-items:center; background:var(--navy); color:#fff; font-family:var(--font-display); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sq-grp{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px}
.sq-csv{display:flex; flex-wrap:wrap; gap:8px}
.pyr{margin:0 auto 6px; background:var(--navy); color:#fff; border-radius:8px; padding:8px 12px; display:flex; justify-content:space-between; font-size:12.5px}
.pyr:nth-child(2){background:var(--red)} .pyr:nth-child(3){background:var(--amber)} .pyr:nth-child(4){background:var(--navy)} .pyr:nth-child(5){background:var(--grey-ink)}
@media(max-width:1100px){.sq-intro{grid-template-columns:1fr} .sq-ind{grid-template-columns:1fr}}
@media(max-width:700px){.sq-ci{flex-direction:column; align-items:flex-start} .sq-kv{grid-template-columns:1fr}}

/* SHEQ reports: stacked month bars and figure strips */
.sq-vbars{display:flex; align-items:flex-end; gap:6px; height:200px; padding-top:18px}
.sq-vcol{flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px}
.sq-vcol b{font-size:11px; color:var(--muted); font-weight:600}
.sq-vcol span{font-size:10.5px; color:var(--muted); white-space:nowrap}
.sq-vstack{width:min(28px,80%); display:flex; flex-direction:column-reverse; border-radius:6px 6px 2px 2px; overflow:hidden; min-height:2px}
.sq-vstack i{display:block; min-height:2px}
.sq-mini{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0 4px}
.sq-mini > div{background:var(--subtle); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.sq-mini b{display:block; font-family:var(--font-display); font-size:20px} .sq-mini span{font-size:11.5px; color:var(--muted)}
@media(max-width:700px){.sq-mini{grid-template-columns:repeat(2,1fr)}}

/* Fleet health: incident stepper */
.fh-steps{display:flex; gap:0; margin:16px 0 4px; overflow-x:auto}
.fh-step{flex:1; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; font-size:11.5px; color:var(--muted); text-align:center}
.fh-step::before{content:""; position:absolute; top:7px; left:-50%; right:50%; height:3px; background:var(--track)}
.fh-step:first-child::before{display:none}
.fh-step i{width:16px; height:16px; border-radius:50%; background:var(--card); border:3px solid var(--track); position:relative; z-index:1}
.fh-step.done i{background:var(--green); border-color:var(--green)} .fh-step.done::before{background:var(--green)}
.fh-step.now i{background:var(--card); border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft)} .fh-step.now span{color:var(--ink); font-weight:600}
@media(max-width:1300px){.fh-stats.g5{grid-template-columns:repeat(3,1fr)}}