/* DIMS portal pages: the login page and the admin console. The landing page has its own style sheet (landing.css); the workspace has styles.css and shell.css.
   Palette: the six colours of the DIMS profile (Navy, Teal, Gold, Orange, Cloud, Slate) and the signals Verified and Finding. The token names of the old look (ink, ink-2, copper, blue, stone, amber) are kept,
   because pages and scripts use them; only their values are DIMS. On a light surface the main action is teal with white letters (4.7 to 1); on navy it is orange with navy letters (5.6 to 1).
   Screens are flat: the glossy finish belongs to the logo only. */
:root{--navy:#12263A;--teal:#087F8C;--gold:#E9B833;--orange:#F47B20;--cloud:#F4F7F8;--slate:#526675;
 --ink:#12263A;--ink-2:#17304A;--copper:#087F8C;--copper-dark:#065962;--blue:#087F8C;--stone:#F4F7F8;--line:#DCE4E8;--muted:#526675;--amber:#E9B833;--ok:#1F7A4D;--bad:#B3261E;--teal-soft:#E7F2F3;
 --display:"Rubik Display",Rubik,Arial,sans-serif;--body:Rubik,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:light}body{margin:0;font:16px/1.5 var(--body);color:var(--ink);background:#fff}
a{color:inherit}button,input,select{font:inherit;color:inherit}:focus-visible{outline:3px solid rgba(8,127,140,.55);outline-offset:2px}
h1,h2,h3,p{margin:0}.display{font-family:var(--display)}
.eyebrow{font:700 .74rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-dark)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 22px;font-weight:700;text-decoration:none;cursor:pointer;background:var(--copper);color:#fff;min-height:48px}
.btn:hover{background:var(--copper-dark)}
.btn.o{background:var(--orange);color:var(--navy)}.btn.o:hover{background:#FF8D36}   /* the main action on navy */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:0}.brand img{height:34px;width:auto;display:block}

.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 1px 2px rgba(18,38,58,.04),0 12px 32px rgba(18,38,58,.06)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;margin-bottom:14px}.card .ic svg{width:22px;height:22px;fill:none;stroke:var(--copper-dark);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{font:700 1.15rem var(--display);margin-bottom:6px}.card p{color:var(--muted);font-size:.95rem}
.card.dark{background:var(--ink-2);color:#fff;border:0}.card.dark p{color:#b6c8d3}.card.dark .ic{background:rgba(255,255,255,.12)}.card.dark .ic svg{stroke:#fff}

/* login page */
.lg{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.lg-l{position:relative;color:#fff;background:var(--ink);overflow:hidden;padding:0 48px 64px;display:flex;flex-direction:column;justify-content:flex-start}
.lg-l>.brand{margin:0 -48px;padding:26px 48px;background:var(--ink)}   /* a solid navy strip over the photographs for the logo: the Brand Guidelines keep photographs out of the clear space around it */
.lg-l>.brand+div{margin-top:auto}.lg-l>div:last-child{margin-top:22px}   /* the headline sits in the lower half, under the sector captions of the upper photos, and the note under it, above the captions of the lower ones */
.lg-l::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,38,58,.88),rgba(18,38,58,.62) 55%,rgba(18,38,58,.9))}.lg-l>*{position:relative;z-index:2}.lg-l::before{z-index:1}
.lg-l .brand img{height:48px}.lg-l .eyebrow{color:var(--gold)}
.lg-bg{position:absolute!important;z-index:0;inset:0;display:grid;gap:3px}
.lg-bg figure{margin:0;position:relative;overflow:hidden}.lg-bg img{width:100%;height:100%;object-fit:cover;display:block}
.lg-bg figcaption{position:absolute;left:14px;bottom:12px;font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(18,38,58,.78);padding:7px 10px;border-radius:6px;border-left:3px solid var(--gold)}
#lg[data-look=a] .lg-bg{grid-template:1fr 1fr/1fr 1fr}
#lg[data-look=b] .lg-bg{grid-template:1fr/repeat(4,1fr)}#lg[data-look=b] figcaption{writing-mode:vertical-rl;transform:rotate(180deg);left:12px;bottom:14px}
#lg[data-look=c] .lg-bg{display:block}#lg[data-look=c] figure{position:absolute;inset:0;opacity:0;animation:lgfade 24s infinite}
#lg[data-look=c] figure:nth-child(2){animation-delay:6s}#lg[data-look=c] figure:nth-child(3){animation-delay:12s}#lg[data-look=c] figure:nth-child(4){animation-delay:18s}
@keyframes lgfade{0%{opacity:0}4%,25%{opacity:1}29%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#lg[data-look=c] figure{animation:none}#lg[data-look=c] figure:first-child{opacity:1}}
#lg[data-look=d] .lg-bg{grid-template:2fr 1fr/1fr 1fr 1fr}#lg[data-look=d] figure:first-child{grid-column:1/-1}
.lg-l h1{font:800 clamp(2.4rem,4.4vw,4.1rem)/1.04 var(--display);letter-spacing:-.012em;max-width:13ch;margin:12px 0 18px;text-wrap:balance}
.lg-l p{max-width:46ch;color:#d3dee5}
.lg-r{display:flex;flex-direction:column;padding:26px 36px;background:var(--cloud)}
.lg-top{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.lg-top select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-weight:600}
.pill{border-radius:99px;background:var(--teal-soft);border:1px solid #BFDDE0;color:var(--copper-dark);padding:6px 12px;font-size:.78rem;font-weight:700}
/* the card has the 45 degree corner of the D; a clipped shape clips its own shadow, so the shadow is on the wrapper */
.lg-wrap{margin:auto;width:min(100%,460px);filter:drop-shadow(0 22px 34px rgba(18,38,58,.16))}
.lg-card{background:#fff;padding:34px;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.lg-card h2{font:800 2rem var(--display);margin:8px 0 6px;letter-spacing:-.008em}.lg-card .sub{color:var(--muted);margin-bottom:22px}
.fld{margin-bottom:16px}.fld label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px}
.fld input[type=text],.fld input[type=password]{width:100%;border:1px solid #b9c7cf;border-radius:12px;padding:14px;font-size:1rem;min-height:52px;background:#fff}
.pw{position:relative}.pw button{position:absolute;right:8px;top:8px;border:0;background:#eef2f4;border-radius:8px;padding:8px 12px;font-weight:700;font-size:.8rem;cursor:pointer}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 18px;font-size:.9rem}.row label{display:flex;gap:8px;align-items:center}.row a{color:var(--copper-dark);font-weight:700}
.err{min-height:22px;color:var(--bad);font-weight:600;margin-bottom:10px}.info{color:var(--muted);font-size:.88rem;margin-top:8px}
.go{width:100%;border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.go:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.back{display:inline-block;margin-top:20px;color:var(--muted);text-decoration:none;font-weight:600}.back:hover{color:var(--ink)}
.lg-foot{text-align:center;color:var(--muted);font-size:.8rem;padding-top:16px}

@media (max-width:980px){.lg{grid-template-columns:1fr}.lg-l{min-height:220px;padding:0 24px 20px}.lg-l>.brand{margin:0 -24px;padding:16px 24px}.lg-l h1{font-size:2.1rem}.lg-l p{display:none}.lg-r{padding:20px}.lg-bg figcaption{display:none}}   /* the photo strip is too small for captions: they would sit under the headline */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* the pictures need to stay visible: darken mainly behind the text */
.lg-l::before{background:linear-gradient(90deg,rgba(18,38,58,.82) 0%,rgba(18,38,58,.5) 55%,rgba(18,38,58,.12) 100%),linear-gradient(180deg,rgba(18,38,58,.5),rgba(18,38,58,0) 30%,rgba(18,38,58,0) 70%,rgba(18,38,58,.6))}

/* the login page follows the dark setting of the device (the admin console is light only) */
@media (prefers-color-scheme:dark){
  .lg-r{color-scheme:dark;background:#0D1B29;color:#F4F7F8}
  .lg-wrap{filter:none}
  .lg-card{background:#12263A}
  .lg-card .sub,.lg .info,.lg .lg-foot,.lg .back{color:#AFC0CC}.lg .back:hover{color:#fff}
  .lg-top select{background:#12263A;border-color:#27425C;color:#F4F7F8}
  .lg .pill{background:#17304A;border-color:#27425C;color:#4CC3D1}
  .lg-r .eyebrow{color:#4CC3D1}.lg-l .eyebrow{color:var(--gold)}
  .lg .fld input[type=text],.lg .fld input[type=password]{background:#0D1B29;border-color:#3A5670;color:#F4F7F8}
  .lg .pw button{background:#17304A;color:#F4F7F8}
  .lg .row a{color:#4CC3D1}
  .lg .err{color:#FFA39B}
  .lg .go{background:var(--orange);color:var(--navy)}.lg .go:hover{background:#FF8D36}.lg .go:focus-visible{outline-color:var(--navy)}
}