:root{--nav:#111b25;--accent:#0f766e;--bg:#eef2f5;--line:#d4dce3}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#17212b;font:14px/1.45 system-ui,sans-serif}
header{min-height:72px;background:var(--nav);padding:0 24px;display:flex;align-items:center;justify-content:space-between;color:#fff}
header>a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:18px}
header img{width:42px;height:42px}
header>a strong{color:#78d5cb}
header small{display:block;letter-spacing:.15em;font-size:11px}
#session{display:flex;align-items:end;gap:10px;max-width:100%}
#session label{min-width:0}
#session select{max-width:100%;min-width:0}
#session a{color:#fff}
.home-link{border:1px solid #607482;border-radius:5px;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:8px}
button,input,select,textarea{font:inherit;min-height:40px;border:1px solid #aeb9c4;border-radius:5px;padding:8px;background:#fff}
textarea{min-height:90px;resize:vertical}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #0b6b63;outline-offset:3px}
.primary{background:var(--accent);color:#fff;font-weight:700}
main{max-width:1400px;margin:auto;padding:24px}
.panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px}
.login{max-width:460px;margin:7vh auto}
.login>img{max-width:280px}
.login form,dialog form{display:grid;gap:13px}
.login label,dialog label{display:grid;gap:5px;font-weight:650}
.title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}
.title h1,.title h2{margin:0}
.table{overflow:auto;max-width:100%}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
dialog{border:0;border-radius:9px;width:min(520px,calc(100% - 30px))}
dialog::backdrop{background:rgb(7 18 28/.62)}
dialog.wide{width:min(850px,calc(100% - 30px))}
dialog form>div{display:flex;justify-content:flex-end;gap:8px}
dl{display:grid;grid-template-columns:max-content 1fr;gap:7px 16px}
dt{font-weight:700}
dd{margin:0}
.record{border:1px solid var(--line);border-radius:6px;padding:10px;margin:8px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.record-opens{cursor:pointer}
.record-opens:hover{background:#f3fbf9}
.record-opens:focus-visible{outline:3px solid #0b6b63;outline-offset:-3px}
.actions,.control-tabs{display:flex;flex-wrap:wrap;gap:8px}
.queue{max-height:58vh;overflow:auto}
.queue-record>div:first-child{display:grid;gap:3px}
#controlsDialog form{display:grid;gap:16px;min-width:0}
#controlsDialog form>h2,#controlsDialog form>p{margin:0}
#controlsDialog .control-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;justify-content:stretch}
#controlsDialog .control-tabs button{width:100%;min-width:0;text-align:center}
#controlsDialog .queue{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;max-height:48vh;padding:2px;overflow:auto}
#controlsDialog .queue>.record{display:block;min-width:0;margin:0;padding:13px;overflow-wrap:anywhere}
#controlsDialog .queue-record>header{margin:-13px -13px 12px;padding:11px 13px;background:#e9f1f4;border-bottom:1px solid #c7d5dc;border-radius:6px 6px 0 0}
#controlsDialog .queue-record h3{margin:0;font-size:1rem;line-height:1.3;color:#173642}
#controlsDialog .queue-record-body{display:grid;gap:5px}
#controlsDialog .queue-record-body p{margin:0;color:#394b55}
#controlsDialog .queue-record-body p:last-child{display:inline-flex;width:max-content;max-width:100%;padding:2px 8px;border-radius:999px;background:#e8f5ef;color:#175b3b;font-size:.86rem;font-weight:700}
#controlsDialog .queue-record-actions{justify-content:flex-start;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
#controlsDialog .dialog-actions{display:flex;justify-content:flex-end;padding-top:2px;border-top:1px solid var(--line)}
#controlsDialog .dialog-actions button{min-width:110px}
.link{background:none;border:0;color:#075e58;text-decoration:underline;padding:0;min-height:auto}
#banner:not(:empty){padding:10px 24px;background:#dff6ea;font-weight:650}
@media(max-width:650px){header{padding:12px;display:block}header>a{margin-bottom:10px}#session{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}#session label{grid-column:1/-1}#session select{width:100%}.title{align-items:flex-start;flex-direction:column}main{padding:14px}dl{grid-template-columns:1fr}.record{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Product-aware familiarity composition: visual structure varies but Vault
   permissions, lifecycle actions and API contracts remain invariant. */
html[data-layout="desktop-task-pane"] #workspace{display:grid;grid-template-columns:210px minmax(0,1fr);gap:10px}
html[data-layout="desktop-task-pane"] #workspace>.title{grid-column:1/-1}
html[data-layout="desktop-task-pane"] #workspace>.panel{grid-column:2}
html[data-layout="desktop-task-pane"] #workspace>.panel::before{content:"Document tasks";display:block;position:absolute;margin-left:-220px;font-weight:700}
html[data-layout="desktop-task-pane"] th,html[data-layout="desktop-task-pane"] td{padding-block:5px}

html[data-layout="app-control-panel"] #workspace>.title{background:var(--panel);padding:12px 18px;border-bottom:1px solid var(--line)}
html[data-layout="app-control-panel"] #workspace>.panel{border:0;border-radius:0}
html[data-layout="app-control-panel"] #rows tr{border-left:3px solid transparent}
html[data-layout="app-control-panel"] #rows tr:focus-within{border-left-color:var(--accent)}

html[data-layout="workspace-desk"] main{max-width:1520px}
html[data-layout="workspace-desk"] #workspace>.panel{box-shadow:0 1px 5px rgb(15 23 42/.1)}
html[data-layout="workspace-desk"] #rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:10px}
html[data-layout="workspace-desk"] #rows tr{display:grid;border:1px solid var(--line);padding:8px}

html[data-layout="role-centre"] #workspace>.title{border-bottom:3px solid var(--accent)}
html[data-layout="role-centre"] #workspace>.panel{display:grid;grid-template-columns:minmax(0,1fr) 280px}
html[data-layout="role-centre"] #workspace>.panel>.title{grid-column:1/-1}
html[data-layout="role-centre"] #workspace>.panel::after{content:"Record facts and governance actions appear in the selected record.";grid-column:2;grid-row:2;padding:16px;background:var(--surface-raised)}
html[data-layout="role-centre"] .table{grid-column:1;grid-row:2}

html[data-layout="role-centre-tabs"] #workspace>.panel{border-radius:0;border-top:4px solid var(--accent)}
html[data-layout="role-centre-tabs"] th{background:var(--nav);color:#fff}
html[data-layout="role-centre-tabs"] th,html[data-layout="role-centre-tabs"] td{padding-block:6px}

html[data-layout="cockpit-menu"] #workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px}
html[data-layout="cockpit-menu"] #workspace>.title{grid-column:1/-1}
html[data-layout="cockpit-menu"] #workspace>.panel{grid-column:2}
html[data-layout="cockpit-menu"] #workspace::before{content:"Vault modules\\A Documents\\A Governance centre\\A Evidence packages";white-space:pre-line;padding:16px;background:var(--panel);border:1px solid var(--line)}
html[data-layout="cockpit-menu"] .panel,html[data-layout="cockpit-menu"] button{border-radius:1px}

html[data-layout="cloud-accounting"] main{max-width:1560px}
html[data-layout="cloud-accounting"] #workspace>.panel{box-shadow:0 2px 12px rgb(15 23 42/.09)}
html[data-layout="cloud-accounting"] .primary{border-radius:999px}

html[data-layout="small-business"] #workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px}
html[data-layout="small-business"] #workspace>.title{grid-column:1/-1}
html[data-layout="small-business"] #workspace>.panel{grid-column:2}
html[data-layout="small-business"] #workspace::before{content:"Documents\\A Uploads\\A Reviews\\A Sharing";white-space:pre-line;padding:14px;background:var(--panel)}
html[data-layout="small-business"] .primary{border-radius:999px}

@media(max-width:850px){
  html[data-layout] #workspace{display:block}
  html[data-layout] #workspace>.panel{display:block}
  html[data-layout] #workspace::before,html[data-layout] #workspace>.panel::before,html[data-layout] #workspace>.panel::after{display:none}
  html[data-layout="workspace-desk"] #rows{display:table-row-group}
  html[data-layout="workspace-desk"] #rows tr{display:table-row}
}
@media(max-width:650px){#controlsDialog .control-tabs,#controlsDialog .queue{grid-template-columns:1fr}#controlsDialog .dialog-actions button{width:100%}}