:root{--bar:0px}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;background:#F3F6F8;color:#0A0F24}
a{color:#00667D}
button{font-family:inherit}
input::placeholder{color:#5F6B7B}
:focus-visible{outline:3px solid #28C0DA;outline-offset:2px}
.is-hidden{display:none!important}
.screen{display:none}
.screen.on{display:block}
body.booting .screen{display:none}
#boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#F3F6F8;color:#4A5668;z-index:5}
body:not(.booting) #boot{display:none}
#boot .mark{width:118px;height:52px;background:url(mark.png) center/contain no-repeat;animation:bootfloat 2.6s ease-in-out infinite;will-change:transform}
#boot .shade{width:78px;height:9px;margin-top:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,4,22,.16),rgba(0,4,22,0));animation:bootshade 2.6s ease-in-out infinite}
#boot .bar{position:relative;width:118px;height:3px;margin-top:26px;border-radius:2px;background:#D7DEE5;overflow:hidden}
#boot .bar::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:2px;background:#28C0DA;animation:bootbar 1.4s ease-in-out infinite}
#boot .text{margin-top:14px;font-family:'Lato','Hanken Grotesk',system-ui,sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em;color:#4A5668}
#boot .text i{font-style:normal;animation:bootdot 1.4s infinite}
#boot .text i:nth-child(2){animation-delay:.2s}
#boot .text i:nth-child(3){animation-delay:.4s}
@keyframes bootfloat{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-9px) rotate(2.5deg)}}
@keyframes bootshade{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.62);opacity:.45}}
@keyframes bootbar{0%{left:-40%}100%{left:100%}}
@keyframes bootdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.logo{display:block;width:180px;height:32px;background:url(logo.png) left center/contain no-repeat}
.photo{position:absolute;right:0;bottom:0;width:130%;aspect-ratio:16/9;background:url(signin.jpg) center/cover no-repeat}
.btn[disabled],.lnk[disabled]{opacity:.55;cursor:progress!important}
body.busy{cursor:progress}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* pieces that change state (same values as the static artboards) */
.tab{box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 10px 14px 10px 16px; border-radius: 10px 0 0 10px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15.5px; line-height: 1.3; text-align: left; cursor: pointer;background: #EAF0F3; border: 1px solid #D7DEE5; border-right-color: transparent; color: #4A5668; font-weight: 500; box-shadow: none}
.tab .tabico{color:#5F6B7B}
.tab:hover{background:#DFE8ED}
.tab[aria-current="true"]{background: #FFFFFF; border: 1px solid #D7DEE5; border-right-color: #FFFFFF; color: #000416; font-weight: 600; box-shadow: inset 4px 0 0 #28C0DA}
.tab[aria-current="true"] .tabico{color:#00667D}
.chip{box-sizing: border-box; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 22px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;background: #FFFFFF; color: #0A0F24; border: 1px solid #C5CFD9}
.chip:hover{border-color:#74869A}
.chip[aria-pressed="true"]{background: #000416; color: #FFFFFF; border: 1px solid #000416}
.showchip{box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;background: #FFFFFF; color: #5F6B7B; border: 1px dashed #74869A}
.showchip[aria-pressed="true"]{background: #D4F1F6; color: #00566A; border: 1px solid #8FD0DD}
.showchip[aria-pressed="false"] .tick{display:none!important}
.sw{box-sizing: border-box; position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;background: #A9B6C3;transition:background-color .15s}
.sw[aria-checked="true"]{background: #00667D}
.sw .knob{position: absolute; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 4, 22, 0.35);left:3px;transition:left .15s}
.sw[aria-checked="true"] .knob{left:25px}
.pv{box-sizing:border-box;display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:99px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.4)}
.pv:hover{background:rgba(255,255,255,.14)}
.pv[aria-pressed="true"]{background:#28C0DA;border-color:#28C0DA;color:#000416}
[data-vline]{border-bottom:1px solid #D7DEE5}
[data-vline]:last-child{border-bottom:0}
#u-list>[data-row]:last-child,#a-list>[data-row]:last-child,#s-list>[data-row]:last-child{border-bottom:0!important}

/* environment banner (shown everywhere except production; the script fills it in and sets --bar to its height) */
#envbar{position:sticky;top:0;z-index:30;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;min-height:40px;padding:8px 16px;background:#F5A524;color:#1F1300;font-size:13.5px;font-weight:600;line-height:1.35;text-align:center}
#envbar .envtag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;padding:3px 8px;border-radius:5px;background:#1F1300;color:#F5A524}
#envbar b{font-weight:800}
#envbar a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
#envbar a:hover{color:#000000}

/* the small (?) next to each view option, and the one tooltip box it fills in */
.tip{box-sizing:border-box;flex:none;width:18px;height:18px;padding:0;border-radius:50%;border:1px solid #C5CFD9;background:#FFFFFF;color:#5F6B7B;font-size:11px;font-weight:700;line-height:1;cursor:help;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s,background-color .12s}
.tip:hover,.tip:focus-visible,.tip.open{border-color:#00667D;color:#00667D;background:#E2F6FA}
#tipbox{position:fixed;z-index:60;box-sizing:border-box;width:280px;max-width:calc(100vw - 24px);background:#000416;color:#FFFFFF;border-radius:10px;padding:11px 13px;font-size:13.5px;font-weight:400;line-height:1.45;box-shadow:0 12px 32px rgba(0,4,22,.28);pointer-events:none;animation:fade .12s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* hover and pressed feedback */
.btn{transition:background-color .12s,border-color .12s}
.btn-primary:hover{background:#00566A!important;border-color:#00566A!important}
.btn-ghost:hover{background:#F3F6F8!important;border-color:#9FB1C1!important}
.btn-danger:hover{background:#FDF1F0!important;border-color:#C98780!important}
.btn-dangerfill:hover{background:#74170F!important;border-color:#74170F!important}
.btn-onnavy:hover{background:rgba(255,255,255,.14)!important}
.btn-cyan:hover{background:#56CFE4!important;border-color:#56CFE4!important}
.lnk:hover span{text-decoration:underline}
.lnk .chev{display:inline-flex;transition:transform .15s}
.lnk[aria-expanded="true"] .chev{transform:rotate(180deg)}
.atab:hover{color:#FFFFFF!important}
.newfolder:hover{background:#E2F6FA!important;border-color:#00667D!important}
#a-drop.over{background:#E2F6FA!important;border-color:#00667D!important}

/* overlays */
#scrim,#mscrim{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,4,22,.46)}
#scrim{z-index:90}
#mscrim{z-index:96}
#ed-panel:focus{outline:none}
#drawer{position:fixed;top:0;right:0;bottom:0;z-index:95;width:520px;max-width:100vw;display:flex;animation:slidein .18s ease-out}
.modal{position:fixed;z-index:97;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:460px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;background:#FFFFFF;border-radius:16px;box-shadow:0 24px 64px rgba(0,4,22,.32);padding:26px 28px 24px 28px}
select.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5668' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select:focus-visible,input[type=date]:focus-visible{border-color:#00667D}
#toast{position:fixed;z-index:99;left:50%;bottom:28px;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);background:#000416;color:#FFFFFF;border-radius:12px;padding:13px 18px;font-size:15px;line-height:1.45;box-shadow:0 12px 32px rgba(0,4,22,.32);animation:rise .18s ease-out}
#toast.bad{background:#8A1F17}
@media (min-width:1000px){body.drawer-open #toast{left:calc((100vw - 520px) / 2)}}
@media (max-width:999px){body.drawer-open #toast{top:12px;bottom:auto}}
@keyframes slidein{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* The pages are fluid on their own (gutters tighten, rows wrap). These are the refinements that need a breakpoint. */
@media (max-width:959px){
  [data-r="formbody"]{align-items:center}
  /* option D (validated 9 Oct 2026): the photo is a band at the top - the wall logo and the people around it - fading into the ground; the cards sit on plain ground */
  [data-r="brand"]{display:none!important}
  [data-r="split"]{background:transparent!important}
  [data-r="split"]::before{content:'';position:absolute;left:0;top:0;right:0;height:360px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(243,246,248,.55) 0%,rgba(243,246,248,.25) 45%,rgba(243,246,248,.85) 80%,#F3F6F8 100%),url(signin-focus.jpg) center top/cover no-repeat}
  [data-r="form"]{background:transparent!important;position:relative;z-index:1}
  [data-r="formbody"] [data-r="choice"]{box-shadow:0 10px 28px rgba(0,4,22,.10)}
  [data-r="formbody"]{padding-bottom:40px!important}
}
@media (max-width:900px){
  [data-r="tabs"]{flex:1 1 100%!important;padding-top:0!important;margin-right:0!important}
  [data-r="tabslabel"]{padding-left:2px!important}
  [data-r="tablist"]{flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important}
  .tab{width:auto!important;min-height:44px!important;border-radius:10px!important;border-right-color:#D7DEE5!important;background:#FFFFFF}
  .tab[aria-current="true"]{border-color:#00667D!important;box-shadow:inset 0 -3px 0 #28C0DA!important}
  .newfolder{width:auto!important}
  [data-r="foot"]{padding-left:0!important}
}
@media (max-width:640px){
  .logo{width:135px;height:24px}
  h1{font-size:30px!important}
  [data-r="help-long"]{display:none}
  [data-r="help-short"]{display:inline!important}
  [data-r="who"]{display:none!important}
  [data-r="adminbar"] [data-r="bar"]{column-gap:14px!important}
  [data-r="adminbar"] [data-r="bar"]{flex-wrap:nowrap!important}
  [data-r="atabs"]{gap:18px!important;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-padding:0 8px}
  [data-r="atabs"]::-webkit-scrollbar{display:none}
  [data-r="adminbar"] .btn{padding:0 11px!important}
  [data-r="adminbar"] .btn span{display:none}
  [data-r="col"]{padding-top:24px!important;padding-bottom:56px!important}
  [data-r="search"]{flex:1 1 100%!important}
  [data-r="cardhead"]{padding:16px!important}
  [data-r="docrow"]{padding:16px!important}
  [data-r="docact"]{width:100%!important}
  [data-r="docact"] .btn{flex:1 1 0!important}
  [data-r="adminrow"]{padding:14px 16px!important;gap:12px!important}
  [data-r="adminrow"] [data-r="tile"]{display:none!important}
  [data-r="drop"]{margin:16px 16px 6px 16px!important}
  [data-r="drop"] .btn{width:100%!important}
  [data-r="logrow"]{padding:14px 16px!important}
  [data-r="logfilters"]>div{flex:1 1 calc(50% - 6px)!important;min-width:0}
  [data-r="logfilters"] select,[data-r="logfilters"] input[type=date]{width:100%!important}
  [data-r="logfilters"]>div:last-child{flex:1 1 100%!important;padding-bottom:0!important}
  [data-r="subrow"]{padding:14px 16px!important}
  [data-r="subadd"]{padding:14px 16px!important}
  [data-r="subadd"] .btn{width:100%!important}
  [data-r="showrow"]{padding:14px 16px 0 16px!important}
  [data-r="viewcard"]>div{padding-left:16px!important;padding-right:16px!important}
  [data-r="viewcols"]{grid-template-columns:minmax(0,1fr) 68px 68px!important;column-gap:8px!important}
  [data-r="viewwhat"]{font-size:11.5px!important;letter-spacing:.05em!important}
  [data-r="viewhead"]{font-size:13px!important;line-height:1.2!important;hyphens:manual}
  [data-r="viewhow"]{display:none!important}
  [data-r="viewcols"] .btn{padding:0 11px!important}
  [data-r="viewcols"] .btn span{display:none}
  .helppop{position:fixed!important;left:16px!important;right:16px!important;top:62px!important;width:auto!important;max-width:none!important}
  #toast{bottom:16px;width:auto;left:16px;right:16px;transform:none;animation:none}
}