/* The iVolution X look, copied from PIM (process-analyst-v2/public/styles.css and docs/brand/tokens.md)
   by way of the approved prototype (artifacts/skil-x-app-prototype.html, version 10). Copied, not linked.
   One light look, as PIM has. No green anywhere (her rule, 10 September 2026). */
:root{
  color-scheme:light;
  --bg:#E8E8E0;            /* off-white ground */
  --panel:#FFFFFF;
  --row-alt:#E8E8E0;       /* every other table row: the book's own pairing */
  --ink:#051438;           /* Dark Blue: headings, values, the rail */
  --body:#4D555B;          /* Charcoal: running text */
  --muted:#6F99AD;         /* Greyish Blue: small-caps labels */
  --line:#CDDBE2;          /* hairline */
  --accent:#3777BC;        /* Corporate Blue: the one action colour */
  --accent-strong:#2F66A3; /* Corporate Blue, hovered, and as text on a tint */
  --accent-soft:#E3EFF3;   /* Skies at 40% on white */
  --skies:#A2D1DD;
  --bad:#A8463A; --bad-soft:#F4E6E3;
  --warn:#B9862B; --warn-ink:#86611C; --warn-soft:#F6EEDC;
  --on-ink:#FFFFFF; --on-ink-soft:#E8E8E0; --on-ink-dim:rgba(162,209,221,.82);
  --rule-on-ink:rgba(162,209,221,.28); --hover-on-ink:rgba(162,209,221,.12);
  --head:'Manrope',system-ui,'Segoe UI',Arial,sans-serif;
  --text:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --arabic:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --radius-sm:4px; --radius-md:8px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--body); font-family:var(--text); font-size:15px; line-height:1.5; margin:0}
button{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.side button:focus-visible{outline-color:var(--skies)}

/* shell: the Dark Blue rail */
.shell{display:grid; grid-template-columns:244px minmax(0,1fr); min-height:100vh}
.side{background:var(--ink); color:var(--on-ink); padding-block:22px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; overflow-y:auto}
.brand{display:flex; flex-direction:column; gap:12px; padding-inline:20px; text-decoration:none; cursor:pointer}
.brand:focus-visible{outline:2px solid var(--on-ink); outline-offset:4px}
.wordmark{display:block; height:22px; width:auto; aspect-ratio:655.95/113.03; align-self:flex-start}
.brandrule{height:1px; background:var(--rule-on-ink)}
.brand b{font-family:var(--head); font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--on-ink); line-height:1.1}
.brand span{font-size:12px; color:var(--on-ink-dim); margin-top:-8px}
.navgroup{display:flex; flex-direction:column}
.navlab{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--on-ink-dim); padding-inline:20px; margin-bottom:6px}
.navbtn{display:flex; justify-content:space-between; align-items:center; gap:8px; text-align:start; background:transparent; border:0; border-inline-start:2px solid transparent; border-radius:0; padding:8px 18px; color:var(--on-ink-soft); font-size:14px; font-weight:400; cursor:pointer}
.navbtn:hover{background:var(--hover-on-ink); color:var(--on-ink)}
.navbtn.on{border-inline-start-color:var(--skies); background:var(--hover-on-ink); color:var(--on-ink); font-weight:600}
.navbtn.sub{padding-inline-start:32px; font-size:13px}
.v2{font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--warn); border:1px solid currentColor; border-radius:var(--radius-sm); padding:0 5px; white-space:nowrap; vertical-align:middle}
.main{padding-inline:32px; padding-block:26px 64px; display:flex; flex-direction:column; gap:20px; min-width:0}
.notice{border:1px dashed var(--muted); border-radius:var(--radius-md); padding:7px 14px; font-size:13px; color:var(--body)}
.notice::before{content:"Prototype"; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); margin-inline-end:10px}
.legend{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--body); align-items:center}

/* type */
h1{font-family:var(--head); color:var(--ink); font-size:clamp(24px,3.2vw,30px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0; text-wrap:balance}
h2{font-family:var(--head); color:var(--ink); font-size:18px; font-weight:700; margin:0; letter-spacing:-.01em; text-wrap:balance}
h3{font-family:var(--head); color:var(--ink); font-size:15px; font-weight:700; margin:0}
p{margin:0}
.lede{color:var(--body); max-width:70ch}
.note{font-size:13px; color:var(--body)}
.lab{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.crumbs{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}

/* team header + the tab strip */
.teamhead{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; align-items:flex-end}
.steps{display:flex; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:thin}
.stepbtn{display:flex; align-items:center; gap:8px; white-space:nowrap; background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; padding:10px 16px; margin-bottom:-1px; color:var(--body); font-size:14px; font-weight:500; cursor:pointer}
.stepbtn:hover{color:var(--ink)}
.stepbtn.on{background:var(--panel); border-bottom-color:var(--accent); color:var(--ink); font-weight:600}
.dot{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--line); color:var(--body); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums}
.stepbtn.done .dot{background:var(--accent-soft); color:var(--accent-strong)}
.stepbtn.on .dot{background:var(--accent); color:#fff}
.who{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; color:var(--body)}
.who b{color:var(--ink); font-weight:600}

/* blocks */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px; display:flex; flex-direction:column; gap:12px; min-width:0}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px}
.panel.flush{padding:0; gap:0}
.panel.flush h2.pad{padding:18px 20px 10px}
.panel.flush th:first-child,.panel.flush td:first-child{padding-inline-start:20px}
.panel.flush th:last-child,.panel.flush td:last-child{padding-inline-end:20px}
.split{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start}
.field{display:flex; flex-direction:column; gap:4px}
.val{border-radius:var(--radius-sm); padding:8px 12px; background:var(--bg); color:var(--ink); font-size:14px}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.stats{display:flex; flex-wrap:wrap; gap:12px 40px}
.stat{display:flex; flex-direction:column; gap:2px}
.stat b{font-family:var(--head); color:var(--ink); font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.05}
.stat span{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.quote{font-family:var(--head); color:var(--ink); font-size:clamp(20px,2.8vw,26px); font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0}
.lead{border-color:var(--accent)}

/* chips, tags, levels */
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:var(--radius-sm); padding:2px 8px; border:1px solid var(--line); color:var(--body); background:var(--panel); white-space:nowrap}
.chip.a{background:var(--accent-soft); color:var(--accent-strong); border-color:transparent}
.chip.d{background:var(--panel); color:var(--accent-strong); border-color:var(--accent)}
.chip.r{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.chip.y{background:var(--warn-soft); color:var(--warn-ink); border-color:transparent}
.tag{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius-sm); padding:1px 6px; white-space:nowrap; border:1px solid transparent}
.tag.rule{background:var(--ink); color:#fff; border-color:var(--ink)}
.tag.model{color:var(--accent-strong); border:1px dashed var(--accent)}
.tag.you{color:var(--body); border-color:var(--line); background:var(--bg)}
.tag.form{color:var(--ink); background:var(--skies); border-color:var(--skies)}
/* the four levels read as a depth of blue, darkest at the top, as PIM's value classes do */
.lv{font-size:12px; font-weight:600; border-radius:var(--radius-sm); padding:1px 8px; white-space:nowrap; border:1px solid transparent}
.lv0{background:var(--panel); color:var(--body); border-color:var(--line)}
.lv1{background:var(--accent-soft); color:var(--accent-strong)}
.lv2{background:var(--skies); color:var(--ink)}
.lv3{background:var(--ink); color:#fff}

/* tables: banded rows, no line under every row */
.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:start; padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--panel)}
td{padding:11px 10px; color:var(--body); vertical-align:top}
tr:nth-child(even) td{background:var(--row-alt)}
td.n,th.n{text-align:end; font-variant-numeric:tabular-nums}
td.n{color:var(--ink); font-weight:600}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--accent-soft)}
tr.sel td{background:var(--accent-soft)}
tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
tr.out td{color:var(--muted)}
tr.out td b{color:var(--body)}
td b{color:var(--ink); font-weight:600}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:start}
.matrix tfoot td{font-weight:700; color:var(--ink); border-top:1px solid var(--line); background:var(--panel)}

/* buttons + inputs */
.btn{font-size:13px; font-weight:600; border-radius:var(--radius-md); padding:7px 14px; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff}
.btn:hover{background:var(--accent-strong); border-color:var(--accent-strong)}
.btn.ghost,.btn.quiet{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn.ghost:hover,.btn.quiet:hover{border-color:var(--muted); background:var(--panel)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.filters{display:flex; flex-wrap:wrap; gap:6px}
.fbtn{font-size:12px; font-weight:600; border-radius:var(--radius-sm); padding:5px 11px; border:1px solid var(--line); background:var(--panel); color:var(--body); cursor:pointer}
.fbtn:hover{border-color:var(--muted)}
.fbtn.on{background:var(--ink); color:#fff; border-color:var(--ink)}
select,input[type=text],textarea{font:inherit; font-size:14px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; width:100%}
input[type=checkbox]{accent-color:var(--accent); width:16px; height:16px; margin:3px 0 0}
textarea{resize:vertical; min-height:62px}
.flash{font-size:13px; font-weight:600; color:var(--accent-strong)}

/* detail pane */
.detail{position:sticky; top:16px}
.reason{border-inline-start:3px solid var(--skies); padding-block:4px; padding-inline-start:12px; color:var(--body); font-size:14px}
.kv{display:grid; grid-template-columns:minmax(110px,max-content) 1fr; gap:8px 14px; font-size:14px}
.kv dt{color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding-top:3px}
.kv dd{margin:0; color:var(--body)}
.list{margin:0; padding-inline-start:20px; display:flex; flex-direction:column; gap:6px; color:var(--body)}

/* arabic: the whole block turns right to left */
.rtl{direction:rtl; font-family:var(--arabic); font-size:15px; line-height:1.8; text-align:start}
.rtl .lab{letter-spacing:0; text-transform:none; font-size:13px; font-weight:600; color:var(--ink)}
.rtl h2,.rtl h3,.rtl .btn,.rtl input,.rtl textarea{font-family:var(--arabic)}
.ar{font-family:var(--arabic); direction:rtl; unicode-bidi:isolate}
.msg{white-space:pre-line}

/* the phone: what the manager and the employee see */
.phonewrap{display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start}
.phone{width:min(100%,390px); background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 14px 34px -22px rgba(5,20,56,.45)}
.phonebar{background:var(--ink); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.phonebar .wordmark{height:15px}
.phonebar span{font-family:var(--head); font-size:13px; font-weight:700; color:var(--on-ink); direction:ltr}
.phonebody{padding:18px 18px 22px; display:flex; flex-direction:column; gap:14px}
.progress{height:4px; background:var(--bg); border-radius:2px; overflow:hidden}
.progress i{display:block; height:100%; background:var(--accent)}
.opts{display:flex; flex-wrap:wrap; gap:6px}
.opt{border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px 11px; font-size:14px; color:var(--body); background:var(--panel); cursor:pointer; font-family:inherit}
.opt:hover{border-color:var(--muted)}
.opt.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.pnav{display:flex; justify-content:space-between; gap:10px}
.thanks{font-family:var(--arabic); color:var(--ink); font-size:20px; font-weight:600; text-align:center; padding-block:30px}
.side-note{flex:1 1 260px; display:flex; flex-direction:column; gap:12px; max-width:460px}

/* the report: a Dark Blue cover, as the brand book's reports have */
.doc{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; max-width:860px}
.cover{position:relative; overflow:hidden; background:var(--ink); color:var(--on-ink); padding:28px clamp(18px,5vw,56px) 34px; display:flex; flex-direction:column; gap:10px}
.cover .wordmark{height:20px; margin-bottom:18px}
.cover .lab{color:var(--on-ink-dim)}
.cover h1{color:var(--on-ink); max-width:24ch; position:relative}
.cover .xmark{position:absolute; inset-inline-end:-34px; bottom:-46px; height:170px; width:auto; aspect-ratio:137.02/107.75; opacity:.9}
.docbody{padding:30px clamp(18px,5vw,56px) 38px; display:flex; flex-direction:column; gap:20px}
.docbody p{max-width:68ch}
.doc h2{font-size:17px; margin-bottom:4px}
.doc [contenteditable="true"]{outline:1px dashed var(--accent); outline-offset:4px; border-radius:2px}
.frozen{font-size:13px; font-weight:600; color:var(--accent-strong); border:1px solid var(--accent); background:var(--panel); border-radius:var(--radius-md); padding:6px 12px}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .detail{position:static}
}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; padding-block:16px 12px; gap:12px}
  .brand{padding-inline:16px}
  .navgroup{flex-direction:row; flex-wrap:wrap; gap:2px; padding-inline:8px}
  .navlab{width:100%; margin:4px 0 2px; padding-inline:8px}
  .navbtn,.navbtn.sub{padding:6px 10px; border-inline-start:0; border-bottom:2px solid transparent}
  .navbtn.on{border-bottom-color:var(--skies)}
  .main{padding-inline:16px}
  .cover .xmark{height:120px; bottom:-36px}
}
@media (prefers-reduced-motion:no-preference){ .navbtn,.stepbtn,.fbtn,.btn,.opt{transition:background .15s, border-color .15s, color .15s} }

/* ---- the app: what the prototype did not need ---- */
.side .wordmark{height:22px}
.side .signout{margin-top:auto; padding-inline:20px; display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--on-ink-dim)}
.side .signout button{align-self:flex-start; background:transparent; border:1px solid var(--rule-on-ink); color:var(--on-ink-soft); border-radius:var(--radius-sm); padding:4px 10px; font-size:12px; cursor:pointer}
.side .signout button:hover{background:var(--hover-on-ink); color:var(--on-ink)}

/* sign-in: a Dark Blue ground with one white card, as PIM's start page */
.gate{min-height:100vh; background:var(--ink); display:grid; place-items:center; padding:24px 16px}
.gate .card{width:min(100%,400px); background:var(--panel); border-radius:var(--radius-md); padding:28px 26px; display:flex; flex-direction:column; gap:14px}
.gate .wordmark{height:24px; margin-bottom:6px}
.gate h1{font-size:24px}

form.stack{display:flex; flex-direction:column; gap:14px}
input[type=email],input[type=password],input[type=number],input[type=date]{font:inherit; font-size:14px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; width:100%}
label.lab{display:block}
.err{font-size:13px; font-weight:600; color:var(--bad); min-height:1em}
.err:empty{display:none}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px 20px}
.newteam{max-width:760px}

.stepbtn:disabled{color:var(--muted); cursor:not-allowed; opacity:.7}
.empty{color:var(--body); font-size:14px; padding:18px 20px}
.muted{color:var(--muted)}
a.navbtn,a.btn{text-decoration:none}
a.btn{display:inline-block}
.navbtn[aria-disabled="true"]{cursor:default; opacity:.75}
.navbtn[aria-disabled="true"]:hover{background:transparent; color:var(--on-ink-soft)}
.gatecol{width:min(100%,400px); display:flex; flex-direction:column; gap:22px}
.gatecol > .wordmark{height:26px}
.gate .card{width:100%}
@media (max-width:760px){
  .side .signout{margin-top:0; flex-direction:row; align-items:center; gap:12px; padding-inline:16px}
}
@media (max-width:760px){
  .shell{grid-template-rows:auto 1fr}
}

/* ---- outside the app, by link: the manager's form ---- */
body.outside{background:var(--bg)}
.outbar{background:var(--ink); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.outbar .wordmark{height:16px}
.outbar span{font-family:var(--head); font-size:13px; font-weight:700; color:var(--on-ink); direction:ltr}
.outmain{max-width:640px; margin:0 auto; padding:22px 16px 60px}
.outform{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 20px; display:flex; flex-direction:column; gap:22px}
.outform section{display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--line); padding-top:18px}
.outform h1{font-size:24px}
body.rtl .outform,body.rtl .thanks{font-family:var(--arabic)}
body.rtl .outform .lab{letter-spacing:0; text-transform:none; font-size:14px; font-weight:600; color:var(--ink)}
body.rtl h1,body.rtl h2,body.rtl .btn,body.rtl input,body.rtl .opt{font-family:var(--arabic)}
.chkrow{gap:6px; padding-bottom:10px; border-bottom:1px dashed var(--line)}
.chkrow input{margin-top:6px}
label.check{display:flex; gap:8px; align-items:center; font-size:14px; color:var(--ink)}
label.check input{margin:0}
.filebtn{cursor:pointer; align-self:flex-start}
.sendrow{justify-content:space-between}
a.stepbtn{text-decoration:none}
.stepbtn[aria-disabled="true"]{color:var(--muted); cursor:not-allowed; opacity:.7}
.panel a{color:var(--accent-strong)}
a.chip{text-decoration:none}
a.stepbtn{text-decoration:none}
.stepbtn[aria-disabled="true"]{color:var(--muted); cursor:not-allowed; opacity:.7}
.panel a{color:var(--accent-strong)}
a.chip{text-decoration:none}

/* ---- the employee form ---- */
.opts.stacked{flex-direction:column; align-items:stretch}
.opts.stacked .opt{text-align:start}
.opt .hint{font-weight:400; opacity:.8; font-size:13px}
.example{background:var(--bg); border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:4px; font-size:14px}
.outform .progress{margin-bottom:-6px}
.outform .val{font-weight:600}
td.acts{white-space:nowrap; text-align:end}
td.acts .btn{padding:4px 9px; font-size:12px}
.flash.pad{display:block; padding:8px 20px}

/* ---- the report on screen ---- */
.doc .cover img.wordmark{height:20px; width:auto; margin-bottom:18px; align-self:flex-start}
.doc .cover img.xmark{position:absolute; inset-inline-end:-34px; bottom:-46px; height:170px; width:auto; opacity:.9}
.doc.rtl .cover img.wordmark{align-self:flex-end}
.doc table{font-size:13.5px}
.doc .item{margin:0 0 4px}
.doc textarea{width:100%; font:inherit; line-height:1.6}
.doc.rtl textarea,.doc.rtl{font-family:var(--arabic)}
details{border-top:1px solid var(--line); padding-block:8px}
details summary{cursor:pointer}
pre.instr{white-space:pre-wrap; font-size:12px; background:var(--bg); padding:10px; border-radius:var(--radius-sm); max-height:320px; overflow:auto}

/* Sorting: tick boxes for confirming several patterns at once. */
th.pick, td.pick { width: 28px; padding-left: 10px; padding-right: 0; text-align: center; cursor: default; }
td.pick input, th.pick input { width: 16px; height: 16px; margin: 0; cursor: pointer; }