/* 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}

/* 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}
}