/* My Assure (16/10/2026): the menu and the sign-in page. Assure's look, as Assure ALM wears it (src\ALM\alm.css):
   navy brand, green for the one primary action, white cards on the tint page, light and dark. ASCII only. */
:root{
  --sans:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --navy:#0D4071; --navy-2:#1A5599; --navy-deep:#08274A; --green:#7CB342; --green-press:#689F38;
  --ground:#F4F8FB; --card:#FFFFFF; --card2:#F8FBFD; --border:#E3EAF3; --border2:#C9D4E2;
  --text:#1A2841; --text2:#5C6B80; --title:#0D4071; --link:#1A5599; --focus:#1E88E5;
  --chip:#EEF3F8; --soon:#5C6B80; --red:#A32D2D; --red-soft:#FFEBEE; --ok-soft:#E8F5E9;
  --shadow:0 1px 2px rgba(13,64,113,.06),0 6px 18px rgba(13,64,113,.06); --shadow-2:0 16px 34px rgba(13,64,113,.13);
  /* service colours, light: each 4.5:1 or more on white (WCAG AA for the tiles' small text) */
  --c-blue:#1E63B5; --c-teal:#1F7A86; --c-green:#427A25; --c-purple:#5B3FA0; --c-orange:#C2541B; --c-amber:#8A5A00; --c-sky:#1F6A9C; --c-navy:#0D4071;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#051A31; --card:#08274A; --card2:#0A2C52; --border:#163A63; --border2:#2A5584;
  --text:#E8EEF6; --text2:#A9B8CC; --title:#FFFFFF; --link:#8CC4F5; --focus:#6AB4F2;
  --chip:#0E3560; --soon:#7E92AE; --red:#F19A9A; --red-soft:rgba(163,45,45,.28); --ok-soft:rgba(124,179,66,.16);
  --shadow:none; --shadow-2:0 16px 34px rgba(0,0,0,.45);
  --c-blue:#6AB4F2; --c-teal:#5BC0CC; --c-green:#A5D46F; --c-purple:#B9A3F0; --c-orange:#F39A6B; --c-amber:#F0C66A; --c-sky:#7CC3F0; --c-navy:#8CC4F5;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#051A31; --card:#08274A; --card2:#0A2C52; --border:#163A63; --border2:#2A5584;
  --text:#E8EEF6; --text2:#A9B8CC; --title:#FFFFFF; --link:#8CC4F5; --focus:#6AB4F2;
  --chip:#0E3560; --soon:#7E92AE; --red:#F19A9A; --red-soft:rgba(163,45,45,.28); --ok-soft:rgba(124,179,66,.16);
  --shadow:none; --shadow-2:0 16px 34px rgba(0,0,0,.45);
  --c-blue:#6AB4F2; --c-teal:#5BC0CC; --c-green:#A5D46F; --c-purple:#B9A3F0; --c-orange:#F39A6B; --c-amber:#F0C66A; --c-sky:#7CC3F0; --c-navy:#8CC4F5;
  color-scheme:dark;
}
/* High contrast (17/10/2026, Steven: "a WCAG compliant variation"): every text colour 7:1 or more on its ground
   (WCAG 2.2 AAA), borders and focus drawn solid black, links underlined. Chosen in the header, or by the system's
   "more contrast" setting when nothing is chosen. The navy and green stay Assure's, darkened. */
:root[data-theme="contrast"]{
  --navy:#00274D; --navy-2:#003A80; --navy-deep:#001A33; --green:#285F10; --green-press:#1E480B;
  --ground:#FFFFFF; --card:#FFFFFF; --card2:#F2F2F2; --border:#1A1A1A; --border2:#000000;
  --text:#000000; --text2:#222222; --title:#00274D; --link:#003A80; --focus:#000000;
  --chip:#FFFFFF; --soon:#333333; --red:#8B0000; --red-soft:#FFE5E5; --ok-soft:#E5F2DD;
  --shadow:none; --shadow-2:none;
  --c-blue:#0B4A94; --c-teal:#0D5E68; --c-green:#285F10; --c-purple:#4A2F8A; --c-orange:#9A3A0B; --c-amber:#7A5000; --c-sky:#0B5C8F; --c-navy:#00274D;
  color-scheme:light;
}
@media (prefers-contrast: more){ :root:not([data-theme]){
  --navy:#00274D; --navy-2:#003A80; --navy-deep:#001A33; --green:#285F10; --green-press:#1E480B;
  --ground:#FFFFFF; --card:#FFFFFF; --card2:#F2F2F2; --border:#1A1A1A; --border2:#000000;
  --text:#000000; --text2:#222222; --title:#00274D; --link:#003A80; --focus:#000000;
  --chip:#FFFFFF; --soon:#333333; --red:#8B0000; --red-soft:#FFE5E5; --ok-soft:#E5F2DD;
  --shadow:none; --shadow-2:none;
  --c-blue:#0B4A94; --c-teal:#0D5E68; --c-green:#285F10; --c-purple:#4A2F8A; --c-orange:#9A3A0B; --c-amber:#7A5000; --c-sky:#0B5C8F; --c-navy:#00274D;
  color-scheme:light;
}}
:root[data-theme="contrast"] .tile, :root[data-theme="contrast"] .svc, :root[data-theme="contrast"] .grp, :root[data-theme="contrast"] .card{border-width:2px; border-left-width:5px}
:root[data-theme="contrast"] .tag{border:1px solid #000; color:#000}
:root[data-theme="contrast"] .svc li > a, :root[data-theme="contrast"] .grp li > a, :root[data-theme="contrast"] .back, :root[data-theme="contrast"] .tile .tn{text-decoration:underline; text-underline-offset:3px}
:root[data-theme="contrast"] :focus-visible{outline:3px solid #000; outline-offset:2px; box-shadow:0 0 0 5px #FFF}
:root[data-theme="contrast"] .top :focus-visible{outline-color:#FFF; box-shadow:0 0 0 5px #000}
:root[data-theme="contrast"] .page h1:focus-visible{outline:none; box-shadow:none}
:root[data-theme="contrast"] .btn-ghost{border-color:#FFF}
:root[data-theme="contrast"] .btn-primary{color:#FFF}
@media (prefers-contrast: more){ :root:not([data-theme]) .btn-primary{color:#FFF} }
@media (forced-colors: active){ .tile, .svc, .grp, .tag, .btn{border:1px solid CanvasText} }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

/* view as (17/10/2026): staff see My Assure as a client. Assure's box standard: square, thick left stripe, thin bottom stripe */
.viewas{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--c-navy); border-bottom:2px solid var(--c-navy); border-radius:4px; padding:16px 18px; margin:20px 0 0}
.viewas h2{margin:0; font-size:16px; color:var(--title)}
.viewas > p{margin:4px 0 12px; color:var(--text2); font-size:14px}
.va-list{list-style:none; margin:0; padding:0}
.va-list li{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--border)}
.va-name{font-weight:600; min-width:190px; color:var(--text)}
.va-btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.va-btns .btn{padding:6px 12px; font-size:13px}
.va-here{color:var(--text2); font-size:13px}
.viewas select{font:inherit; font-size:13px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:6px 8px}
.viewas.on{border-left-color:var(--c-orange); border-bottom-color:var(--c-orange)}
.va-on{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between}
.va-on p{margin:0; color:var(--text)}
.va-acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.va-acts .btn{padding:7px 14px; font-size:13px}

/* top bar */
.top{background:var(--navy); color:#fff}
.top .in{max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none}
.brand img{height:46px; width:auto; display:block}
.brand .name{font-weight:700; font-size:20px; letter-spacing:.01em}
.brand .name b{color:var(--green)}
.top .sp{flex:1}
.who{display:flex; align-items:center; gap:12px; font-size:14px; color:#DCE6F2; flex-wrap:wrap; justify-content:flex-end}
.who select{font:inherit; font-size:14px; color:var(--text); background:#fff; border:1px solid var(--border2); border-radius:6px; padding:5px 8px}
.who a{color:#fff}
.btn-ghost{color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:4px; padding:5px 10px; font:inherit; font-size:13px; cursor:pointer; text-decoration:none}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.theme{font:inherit; font-size:13px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:6px; padding:4px 6px}
.top .theme{background:#fff; color:#1A2841}
.signin .theme{margin-top:14px; display:block; margin-left:auto; margin-right:auto}

/* the page */
main{max-width:1180px; margin:0 auto; padding:26px 20px 60px}
.hello h1{margin:0; font-size:26px; color:var(--title)}
.hello p{margin:6px 0 0; color:var(--text2)}
.quick{display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 26px}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:4px; padding:10px 16px; font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent}
/* Assure green with Assure's deep navy text: 6:1 (white on this green is 2.5:1, below WCAG AA) */
.btn-primary{background:var(--green); color:var(--navy-deep)}
.btn-primary:hover{background:var(--green-press)}
.btn-line{background:var(--card); color:var(--title); border-color:var(--border2)}
.btn-line:hover{border-color:var(--navy-2)}

/* Cards in the Assure console's own style (17/10/2026, Steven: the curved boxes "look too ai"): square-cornered
   panels with a thin border, the service colour as a thick left edge and a thin bottom edge (Steven 17/10), a plain coloured icon, rows split by rules. */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; align-items:start}
.svc, .grp{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--svc); border-bottom:2px solid var(--svc); border-radius:4px; display:flex; flex-direction:column}
.svc h2, .grp h2{margin:0; padding:12px 16px; font-size:15px; font-weight:600; color:var(--title); display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); background:var(--card2)}
.svc h2 .ico{color:var(--svc); display:flex; flex:none}
.svc h2 .ico svg{width:20px; height:20px}
.svc p{margin:0; padding:10px 16px; color:var(--text2); font-size:13px; border-bottom:1px solid var(--border)}
.svc ul, .grp ul{list-style:none; margin:0; padding:0}
.svc li + li, .grp li + li{border-top:1px solid var(--border)}
/* child selectors only: a row's own label and tag keep their own look */
.svc li > a, .svc li > .row, .grp li > a, .grp li > .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px; font-size:14px; text-decoration:none}
.grp li > a, .grp li > .row{padding:11px 16px; font-size:15px}
.svc li > a, .grp li > a{color:var(--text); font-weight:500}
.svc li > a:hover, .grp li > a:hover{background:var(--card2); color:var(--title)}
.svc li .lbl, .grp li .lbl{min-width:0}
.svc li > a .go, .grp li > a .go{color:var(--text2); font-size:12px; white-space:nowrap; flex:none}
.svc li > .row.off, .grp li > .row.off{color:var(--soon)}
.svc li > .row .tag, .grp li > .row .tag{flex:none}
.tag{font-size:11px; font-weight:600; letter-spacing:.02em; border-radius:3px; padding:2px 7px; background:var(--chip); color:var(--text2); white-space:nowrap; border:1px solid var(--border)}
.s-blue{--svc:var(--c-blue)} .s-teal{--svc:var(--c-teal)} .s-green{--svc:var(--c-green)} .s-purple{--svc:var(--c-purple)}
.s-orange{--svc:var(--c-orange)} .s-amber{--svc:var(--c-amber)} .s-sky{--svc:var(--c-sky)} .s-navy{--svc:var(--c-navy)}

/* the full-page menu: five tiles, each opening its own page (16/10/2026) */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.tile{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-left:5px solid var(--svc); border-bottom:2px solid var(--svc); border-radius:4px; text-decoration:none; color:var(--text)}
.tile:hover{border-color:var(--border2); border-left-color:var(--svc); border-bottom-color:var(--svc); background:var(--card2)}
.tile .th{display:flex; align-items:center; gap:12px; padding:18px 20px 8px}
.tile .ico{color:var(--svc); display:flex; flex:none}
.tile .ico svg{width:28px; height:28px}
.tile .tt{font-size:18px; font-weight:700; color:var(--title); line-height:1.25}
.tile .tb{color:var(--text2); font-size:14px; flex:1; padding:0 20px 16px}
.tile .tn{display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--svc); padding:10px 20px; border-top:1px solid var(--border)}
.back{display:inline-flex; align-items:center; gap:6px; color:var(--link); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:14px}
.back .bi svg{width:16px; height:16px; display:block}
.ph{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border)}
.ph .ico{color:var(--svc); display:flex; flex:none}
.ph .ico svg{width:36px; height:36px}
.ph h1{margin:0; font-size:24px; color:var(--title)}
.ph p{margin:2px 0 0; color:var(--text2)}
.lead{margin:0 0 18px}
.groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; align-items:start}
.page h1:focus{outline:none}

.notice{background:var(--card); border:1px solid var(--border); border-radius:4px; padding:22px; max-width:640px}
.notice h2{margin:0 0 8px; color:var(--title)}
.foot{margin-top:34px; color:var(--text2); font-size:12.5px}

/* sign-in */
.signin{min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:linear-gradient(160deg,var(--navy-deep),var(--navy) 60%,var(--navy-2))}
.card{background:var(--card); border-radius:6px; box-shadow:var(--shadow-2); width:100%; max-width:420px; padding:30px 30px 24px}
.card .logo{display:block; margin:0 auto 6px; height:104px; width:auto}
.card h1{text-align:center; margin:0 0 4px; font-size:22px; color:var(--title)}
.card .sub{text-align:center; color:var(--text2); margin:0 0 20px; font-size:14px}
.ms{width:100%; justify-content:center; background:#fff; color:#1A2841; border:1px solid var(--border2); padding:11px}
.ms:hover{border-color:var(--navy-2)}
.or{display:flex; align-items:center; gap:10px; color:var(--text2); font-size:12px; margin:16px 0}
.or:before,.or:after{content:""; flex:1; height:1px; background:var(--border)}
label{display:block; font-size:13px; font-weight:600; margin:10px 0 4px; color:var(--text)}
input[type=email],input[type=password]{width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--border2); border-radius:4px; background:var(--card); color:var(--text)}
.card .btn-primary{width:100%; justify-content:center; margin-top:16px}
.err{background:var(--red-soft); color:var(--red); border-radius:4px; padding:9px 12px; font-size:13.5px; margin:0 0 12px}
.small{font-size:12.5px; color:var(--text2); text-align:center; margin-top:16px}

@media (max-width:640px){
  .top .in{flex-wrap:wrap}
  .brand img{height:38px}
  .who{width:100%; justify-content:flex-start}
  .hello h1{font-size:22px}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:0}
  .groups{grid-template-columns:1fr}
}

/* The Assure App Tracker page (17/10/2026, Steven: "the menus more to the left and the other 2/3 ... the dashboard"):
   the menu and saved reports in a left column, the dashboard (appdash.js) beside it. The page widens for it. Chart
   colours: three series validated for colour-blind separation and contrast on each theme's card (the dataviz checks):
   light on white, dark on Assure's dark card, and darker steps for high contrast (3:1 or more on white). */
:root{ --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s0:#8A97A8; --grid:#E3EAF3; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s0:#7E92AE; --grid:#163A63; } }
:root[data-theme="dark"]{ --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s0:#7E92AE; --grid:#163A63; }
:root[data-theme="contrast"]{ --s1:#256abf; --s2:#d0531f; --s3:#13875d; --s0:#555555; --grid:#8C8C8C; }
@media (prefers-contrast: more){ :root:not([data-theme]){ --s1:#256abf; --s2:#d0531f; --s3:#13875d; --s0:#555555; --grid:#8C8C8C; } }
body.wide main{max-width:1560px}
.apps-split{display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr); gap:18px; align-items:start}
.apps-menu{display:flex; flex-direction:column; gap:14px; min-width:0}
.apps-dash{min-width:0}
.grp li > .row.here{color:var(--title); font-weight:600; background:var(--card2)}
.ad-reports h2{margin:0; padding:12px 16px; font-size:15px; font-weight:600; color:var(--title); border-bottom:1px solid var(--border); background:var(--card2)}
.ad-reports li{display:flex; align-items:center}
.ad-reports li > a{flex:1; min-width:0}
.ad-reports li > a[aria-current]{background:var(--card2); color:var(--title); font-weight:600}
.ad-del{font:inherit; font-size:12px; color:var(--red); background:none; border:0; padding:8px 12px; cursor:pointer}
.ad-small{display:block; font-size:13px; color:var(--text2)}
.ad-small.pad{padding:10px 16px; margin:0}
.ad-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.ad-head h2{margin:0; font-size:20px; color:var(--title)}
.ad-scope{margin:4px 0 0; color:var(--text2); font-size:13.5px}
.ad-acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ad-acts .btn, .ad-saveform .btn, .ad-linkrow .btn{padding:7px 12px; font-size:13px}
.ad-csv{display:inline-flex; gap:6px; align-items:center}
.ad-csv select, .ad-filters select, .ad-saveform input, .ad-linkrow input{font:inherit; font-size:13.5px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:6px 8px}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ad-filters{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; padding:10px 0 14px; border-bottom:1px solid var(--border); margin-bottom:14px}
.ad-filters label{margin:0; font-size:12.5px; font-weight:600; color:var(--text2); display:flex; flex-direction:column; gap:4px}
.ad-msg{font-size:13px; color:var(--text2)}
.ad-report{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--c-green); border-bottom:2px solid var(--c-green); border-radius:4px; padding:10px 14px; margin-bottom:12px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}
.ad-report b{color:var(--title)}
.ad-chg{color:var(--c-orange)}
.ad-linkrow{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.ad-linkrow input{min-width:260px; max-width:100%}
.ad-saveform{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-radius:4px; padding:10px 14px; margin-bottom:12px}
.ad-saveform label{margin:0}
.ad-saveform input{min-width:240px}
.ad-hint{flex-basis:100%; margin:0; font-size:12.5px; color:var(--text2)}
.ad-bodyall{transition:opacity .15s}
.ad-busy{opacity:.55}
.ad-err{background:var(--red-soft); color:var(--red); border-radius:4px; padding:10px 12px; font-size:14px}
.ad-note{background:var(--card); border:1px solid var(--border); border-radius:4px; padding:10px 14px; margin-bottom:14px; color:var(--text2)}
.ad-none{color:var(--text2); font-size:13.5px; margin:4px 0}
.ad-stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:14px}
.ad-stats.one{grid-template-columns:minmax(160px,260px)}
.ad-stat{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--c-navy); border-bottom:2px solid var(--c-navy); border-radius:4px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0}
.ad-sl{font-size:12.5px; font-weight:600; color:var(--text2)}
.ad-sv{font-size:26px; font-weight:600; color:var(--title); line-height:1.2}
.ad-ss{font-size:12px; color:var(--text2)}
.ad-spark{margin-top:4px; display:block}
.ad-spark path{fill:none; stroke:var(--s0); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}
.ad-spark circle{fill:var(--s1)}
.ad-card{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--svc,var(--c-navy)); border-bottom:2px solid var(--svc,var(--c-navy)); border-radius:4px; margin-bottom:14px; min-width:0}
.ad-card.c-blue{--svc:var(--c-blue)} .ad-card.c-purple{--svc:var(--c-purple)} .ad-card.c-teal{--svc:var(--c-teal)} .ad-card.c-green{--svc:var(--c-green)}
.ad-card.c-amber{--svc:var(--c-amber)} .ad-card.c-orange{--svc:var(--c-orange)} .ad-card.c-navy{--svc:var(--c-navy)} .ad-card.c-sky{--svc:var(--c-sky)}
.ad-card > header{padding:10px 14px; border-bottom:1px solid var(--border); background:var(--card2)}
.ad-card h3{margin:0; font-size:15px; color:var(--title)}
.ad-card > header p{margin:2px 0 0; font-size:12.5px; color:var(--text2)}
.ad-body{padding:12px 14px}
.ad-h4{margin:12px 0 6px; font-size:13.5px; color:var(--title)}
.ad-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}
.ad-two > .ad-card{margin-bottom:14px}
.ad-chart{position:relative; width:100%; min-height:40px}
.ad-svg{display:block; max-width:100%; height:auto; overflow:visible}
.ad-svg:focus{outline:none}
.ad-svg:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.ad-grid{stroke:var(--grid); stroke-width:1}
.ad-axis{stroke:var(--border2); stroke-width:1}
.ad-tick{fill:var(--text2); font-size:11px; font-variant-numeric:tabular-nums}
.ad-cat{fill:var(--text); font-size:12px}
.ad-val{fill:var(--text); font-size:12px; font-weight:600}
.ad-end{fill:var(--text); font-size:11.5px; font-weight:600}
.ad-line{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.ad-line.s1{stroke:var(--s1)} .ad-line.s2{stroke:var(--s2)} .ad-line.s3{stroke:var(--s3)}
.ad-dot{stroke:var(--card); stroke-width:2}
.ad-dot.s1, .ad-fill.s1{fill:var(--s1)} .ad-dot.s2, .ad-fill.s2{fill:var(--s2)} .ad-dot.s3, .ad-fill.s3{fill:var(--s3)} .ad-fill.s0{fill:var(--s0)}
.ad-cross{stroke:var(--text2); stroke-width:1}
.ad-bar{cursor:default}
.ad-bar:focus{outline:none}
.ad-bar.on .ad-fill{opacity:.82}
.ad-bar:focus-visible .ad-fill{stroke:var(--focus); stroke-width:2}
.ad-legend{list-style:none; margin:0 0 6px; padding:0; display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text)}
.ad-legend li{display:flex; align-items:center; gap:6px}
.ad-key{display:inline-block; width:14px; height:2px; border-radius:1px; background:var(--s0); vertical-align:middle}
.ad-key.s1{background:var(--s1)} .ad-key.s2{background:var(--s2)} .ad-key.s3{background:var(--s3)}
.ad-legend .ad-key{height:3px}
.ad-tip{position:absolute; z-index:5; pointer-events:none; background:var(--card); color:var(--text); border:1px solid var(--border2); border-radius:4px; padding:6px 9px; font-size:12.5px; box-shadow:var(--shadow-2); white-space:nowrap}
.ad-tip-h{font-size:11.5px; color:var(--text2); margin-bottom:2px}
.ad-tip-r{display:flex; align-items:center; gap:6px}
.ad-tip-r b{color:var(--title)}
.ad-tv{margin-top:8px}
.ad-tv summary{cursor:pointer; font-size:12.5px; color:var(--link); font-weight:600}
.ad-tw{overflow-x:auto; margin-top:6px}
.ad-t{width:100%; border-collapse:collapse; font-size:13px}
.ad-t th{text-align:left; font-weight:600; color:var(--text2); font-size:12px; padding:6px 8px; border-bottom:1px solid var(--border2); white-space:nowrap}
.ad-t td{padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top}
.ad-t .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ad-inbar{display:inline-block; width:60px; height:8px; background:var(--chip); border-radius:2px; margin-right:8px; vertical-align:middle; overflow:hidden}
.ad-inbar span{display:block; height:100%; background:var(--s1); border-radius:0 2px 2px 0}
.ad-foot{font-size:12px; color:var(--text2); margin:6px 0 0}
.ad-stats.three{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* the SLA's open clocks: a dot and a word, never the colour alone */
.ad-st{display:inline-flex; align-items:center; gap:6px; font-weight:600; white-space:nowrap; color:var(--text)}
.ad-sd{width:9px; height:9px; border-radius:50%; flex:none; background:var(--text2)}
.ad-st.ok .ad-sd{background:var(--green)} .ad-st.risk .ad-sd{background:var(--c-amber)} .ad-st.bad .ad-sd{background:var(--red)}
/* (18/10/2026) on hold: the clock paused while APaaS waits on the client; a hollow dot and the word */
.ad-st.hold .ad-sd{background:transparent; box-shadow:inset 0 0 0 2px var(--c-navy)}
.ad-hold{font-size:12px; color:var(--text2); margin-top:2px}
/* Client Management (clients.js, 17/10/2026) */
.cm-links{margin:0 0 12px; font-size:13px; color:var(--text2)}
.cm-form{display:flex; flex-direction:column; gap:10px}
.cm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.cm-f{display:flex; flex-direction:column; gap:4px; min-width:0}
.cm-f label, .cm-fs legend{margin:0; font-size:12.5px; font-weight:600; color:var(--text2)}
.cm-form input:not([type="checkbox"]), .cm-form textarea{font:inherit; font-size:13.5px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:6px 8px; min-width:0; max-width:100%}
.cm-form textarea{resize:vertical}
.cm-form input:focus-visible, .cm-form textarea:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
.cm-fs{border:1px solid var(--border); border-radius:4px; padding:8px 12px 10px; margin:0; min-width:0}
.cm-fs .btn{padding:6px 12px; font-size:13px; margin-top:6px}
.cm-checks{display:flex; flex-wrap:wrap; gap:6px 16px}
.cm-chk{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text); margin:0}
.cm-hint{display:block; font-size:12px; color:var(--text2); margin:0}
.cm-save{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cm-save .btn{padding:7px 12px; font-size:13px}
.cm-logo{min-height:60px; display:flex; align-items:center; margin-bottom:8px}
.cm-logo img{max-height:80px; max-width:100%; background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:6px}
.cm-ct input, .cm-svt input{width:100%; min-width:80px}
.cm-svt td.num input{max-width:130px; text-align:right}
.cm-acts{white-space:nowrap}
.cm-acts .btn{padding:4px 10px; font-size:12.5px}
.cm-off{font-size:11.5px; font-weight:600; color:var(--text2); background:var(--chip); border-radius:4px; padding:1px 6px}
.cm-term{border-top:1px solid var(--border); padding-top:10px; margin-top:10px}
.cm-inline{padding:4px 0 6px}
.cm-inline input{max-width:420px}
.cm-acts .ad-del{padding:4px 8px}
/* the vendor list (vendors.js, 18/10/2026) */
.vd-n{display:inline-block; font-size:11px; font-weight:600; color:var(--text2); background:var(--chip); border:1px solid var(--border); border-radius:3px; padding:0 5px; margin-left:2px}
.vd-sep{color:var(--text2)}
.vd-scroll{max-height:560px; overflow:auto}
.vd-sugg .vd-name{font:inherit; font-size:13.5px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:5px 7px; min-width:160px; width:100%}
.vd-sugg input[type="checkbox"]{width:18px; height:18px; accent-color:var(--navy)}
.vd-sm{padding:2px 8px; font-size:12px; margin-left:6px}
.vd-ign{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px}
.ad-filters input{font:inherit; font-size:13.5px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:6px 8px}
.cm-acts select{font:inherit; font-size:12.5px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:4px 6px}
.rq-vnote{display:block; font-size:12px; color:var(--text2)}
/* the request form's editor (18/10/2026) */
.cm-fq td, .cm-fq th{vertical-align:middle}
.cm-fq input[type="checkbox"]{width:18px; height:18px; accent-color:var(--navy)}
.cm-q{border:1px solid var(--border); border-left:4px solid var(--c-green); border-radius:4px; padding:10px 12px; margin:0 0 10px; display:flex; flex-direction:column; gap:8px}
.cm-q.off{border-left-color:var(--border2); flex-direction:row; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--text2)}
.cm-q.off .btn{padding:4px 10px; font-size:12.5px}
.cm-q select{font:inherit; font-size:13.5px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:6px 8px}
.cm-flab{font-size:12.5px; font-weight:600; color:var(--text2)}
.print-only{display:none}
/* Request an application (request.js, 18/10/2026, Steven: "add client logo make it look progessional, use apaas assures colour
   scheme"): Assure navy and green, the house box (square corners, a thick left edge and a thin bottom edge), the client's logo on
   a white plate so it reads on every theme */
.apps-req{justify-content:center; padding:12px 16px; font-size:15px}
.apps-req svg{width:18px; height:18px; flex:none}
.apps-req[aria-current]{outline:2px solid var(--navy); outline-offset:2px}
.rq{display:flex; flex-direction:column; gap:14px}
.rq-head{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--navy); border-bottom:2px solid var(--green); border-radius:4px; overflow:hidden}
.rq-brand{display:flex; align-items:center; gap:18px; padding:18px 20px; flex-wrap:wrap}
.rq-logo{flex:none; width:132px; height:72px; display:flex; align-items:center; justify-content:center; background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:8px}
.rq-logo img{max-width:100%; max-height:100%; display:block; object-fit:contain}
.rq-mono{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:4px; background:var(--navy); color:#FFFFFF; font-size:22px; font-weight:700; letter-spacing:.02em}
.rq-ttl{flex:1; min-width:220px}
.rq-kicker{margin:0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-green)}
.rq-ttl h2{margin:2px 0 4px; font-size:22px; color:var(--title)}
.rq-lead{margin:0; color:var(--text2); font-size:14px; max-width:62ch}
.rq-pick{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--text2)}
.rq-pick select{font:inherit; font-size:14px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:7px 9px; min-width:220px}
.rq-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); border-top:1px solid var(--border); background:var(--card2)}
.rq-steps li{display:flex; gap:10px; padding:12px 16px; font-size:13px; color:var(--text2)}
.rq-steps li + li{border-left:1px solid var(--border)}
.rq-steps b{display:block; color:var(--title); font-size:13.5px}
.rq-sn{flex:none; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#FFFFFF; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.rq-tabs{display:flex; gap:0; border-bottom:2px solid var(--border); flex-wrap:wrap}
.rq-tabs button{font:inherit; font-size:14px; font-weight:600; color:var(--text2); background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; padding:10px 16px; cursor:pointer}
.rq-tabs button[aria-selected="true"]{color:var(--title); border-bottom-color:var(--green)}
.rq-tabs button:hover{color:var(--title)}
.rq-form{display:flex; flex-direction:column; gap:14px}
.rq-fs{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--navy); border-bottom:2px solid var(--navy); border-radius:4px; margin:0; padding:0 0 14px; min-width:0}
.rq-fs legend{float:left; width:100%; margin:0 0 14px; padding:10px 16px; font-size:15px; font-weight:600; color:var(--title); background:var(--card2); border-bottom:1px solid var(--border)}
.rq-grid{clear:both; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px 18px; padding:0 16px}
.rq-f{display:flex; flex-direction:column; gap:5px; min-width:0}
.rq-f.wide{grid-column:1 / -1}
.rq-lbl{font-size:13.5px; font-weight:600; color:var(--text)}
.rq-req, .rq-opt{font-size:11px; font-weight:600; border-radius:3px; padding:1px 6px; margin-left:4px; vertical-align:1px}
.rq-req{background:var(--navy); color:#FFFFFF}
.rq-opt{background:var(--chip); color:var(--text2); border:1px solid var(--border)}
.rq-help{font-size:12.5px; color:var(--text2)}
.rq-f input:not([type="radio"]):not([type="checkbox"]), .rq-f select, .rq-f textarea{font:inherit; font-size:14px; color:var(--text); background:var(--card); border:1px solid var(--border2); border-radius:4px; padding:8px 10px; min-width:0; max-width:100%; width:100%}
.rq-f textarea{resize:vertical}
.rq-f.bad input, .rq-f.bad select, .rq-f.bad textarea, .rq-f.bad .rq-choices{border-color:var(--red); box-shadow:0 0 0 1px var(--red)}
.rq-ferr{font-size:12.5px; font-weight:600; color:var(--red)}
.rq-ferr:empty{display:none}
.rq-choices{display:flex; flex-wrap:wrap; gap:8px; border-radius:4px}
.rq-choice{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border2); border-radius:4px; padding:7px 12px; font-size:14px; cursor:pointer; background:var(--card)}
.rq-choice:has(input:checked){border-color:var(--navy); background:var(--card2); box-shadow:inset 3px 0 0 var(--green)}
.rq-choice input{accent-color:var(--navy); margin:0}
.rq-sum{background:var(--red-soft); color:var(--red); border-left:5px solid var(--red); border-radius:4px; padding:10px 14px; font-size:14px}
.rq-sum ul{margin:4px 0 0; padding-left:18px}
.rq-acts{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.rq-done{background:var(--card); border:1px solid var(--border); border-left:5px solid var(--green); border-bottom:2px solid var(--green); border-radius:4px; padding:16px 18px}
.rq-done h3{margin:0 0 4px; font-size:17px; color:var(--title)}
.rq-done p{margin:0 0 12px; color:var(--text2)}
.rq-done:focus{outline:none}
.rq-bulk{display:flex; flex-direction:column; gap:14px}
.rq-step{display:flex; gap:12px; background:var(--card); border:1px solid var(--border); border-left:5px solid var(--navy); border-bottom:2px solid var(--navy); border-radius:4px; padding:14px 16px}
.rq-step > div{flex:1; min-width:0}
.rq-step h3{margin:0 0 4px; font-size:15px; color:var(--title)}
.rq-step p{margin:0 0 10px; font-size:13.5px; color:var(--text2)}
.rq-cols{margin-top:10px}
.rq-cols summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--link)}
.rq-drop{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:2px dashed var(--border2); border-radius:4px; padding:14px; background:var(--card2)}
.rq-drop.on{border-color:var(--green); background:var(--ok-soft)}
.rq-drop input[type="file"]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.rq-drop:focus-within label{outline:2px solid var(--focus); outline-offset:2px}
.rq-fname{font-size:13.5px; color:var(--text2)}
.rq-rows tr.bad td{background:var(--red-soft)}
.rq-errs{margin:4px 0 0; padding-left:16px; font-size:12.5px; color:var(--text)}
.rq-warn, .rq-why{display:block; font-size:12.5px; color:var(--text2); margin-top:2px}
.rq-id{font-family:Consolas,'Courier New',monospace; white-space:nowrap}
.rq-count{margin:0; font-size:13.5px; color:var(--text2)}
:root[data-theme="contrast"] .rq-head, :root[data-theme="contrast"] .rq-fs, :root[data-theme="contrast"] .rq-step, :root[data-theme="contrast"] .rq-done{border-width:2px; border-left-width:5px}
:root[data-theme="contrast"] .rq-tabs button[aria-selected="true"]{text-decoration:underline; text-underline-offset:4px}
@media (max-width:600px){ .rq-steps li + li{border-left:0; border-top:1px solid var(--border)} .rq-logo{width:100px; height:56px} }
@media (forced-colors: active){ .ad-card, .ad-stat, .ad-report{border:1px solid CanvasText} .ad-line{stroke:CanvasText} .ad-fill{fill:CanvasText} .rq-head, .rq-fs, .rq-step, .rq-done, .rq-choice{border:1px solid CanvasText} .rq-sn, .rq-req{forced-color-adjust:none} }
@media (max-width:900px){ .apps-split{grid-template-columns:1fr} }
/* PDF: the browser's print, laid out as a report: the dashboard alone, full width, light, nothing that needs a click */
@media print{
  @page{size:A4 landscape; margin:12mm}
  :root{ --ground:#FFFFFF; --card:#FFFFFF; --card2:#F4F7FA; --border:#C9D4E2; --border2:#9AA9BC; --text:#000000; --text2:#333333; --title:#0D4071; --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s0:#8A97A8; --grid:#E3EAF3; color-scheme:light }
  body{background:#FFFFFF}
  .top, .back, .ph, .apps-menu, .no-print, .viewas, .foot, .notice{display:none !important}
  main{max-width:none; padding:0}
  .apps-split{display:block}
  .print-only{display:block}
  .ad-printhead h1{margin:0 0 2px; font-size:18px; color:#0D4071}
  .ad-printhead p{margin:0 0 10px; font-size:12px; color:#333333}
  .ad-head .ad-scope, .ad-head h2{display:none}
  .ad-card, .ad-stat, .ad-two{break-inside:avoid}
  .ad-tv{display:none}
  .ad-tv[open]{display:block}
  .ad-tip{display:none !important}
  a{color:#000000; text-decoration:none}
}