/* ============================================================================
   FLR Hub. The Speeding Report's Apple look (grouped backgrounds, translucent
   bars, system type, FLR navy as the tint); light and dark follow the device.
   ========================================================================== */
:root{
  color-scheme:light dark;
  --bg:#f2f2f7; --surface:#ffffff; --raised:#ffffff; --sheet-bg:#f2f2f7;
  --fill:rgba(118,118,128,.12); --fill-2:rgba(118,118,128,.2); --press:rgba(118,118,128,.14);
  --ink:#101116; --ink-2:#55575f; --ink-3:#6b6d75;
  --sep:rgba(60,60,67,.2);
  --tint:#00098b; --tint-fill:#00098b; --tint-press:#1a24a8; --on-tint:#ffffff; --tint-soft:rgba(0,9,139,.08);
  --red:#d70015; --red-soft:rgba(215,0,21,.07); --badge:#d70015;
  --green:#1d6b33; --green-soft:rgba(52,199,89,.14);
  --mat:rgba(242,242,247,.72); --mat-edge:rgba(0,0,0,.09); --blur:saturate(180%) blur(22px);
  --scrim:rgba(8,10,24,.32);
  --toast:rgba(28,28,30,.86); --on-toast:#ffffff;
  --skeleton:rgba(118,118,128,.1); --skeleton-hi:rgba(118,118,128,.2);
  --sh-card:0 0 0 .5px rgba(0,0,0,.03),0 1px 2px rgba(16,18,40,.04),0 6px 20px rgba(16,18,40,.05);
  --sh-card-hover:0 0 0 .5px rgba(0,0,0,.04),0 2px 4px rgba(16,18,40,.05),0 16px 36px rgba(16,18,40,.1);
  --sh-sheet:0 28px 80px rgba(16,18,40,.3),0 2px 8px rgba(16,18,40,.1);
  --sh-icon:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(16,18,40,.12);
  --sh-icon-lift:inset 0 0 0 .5px rgba(0,0,0,.08),0 14px 28px rgba(16,18,40,.22);
  --mat-tip:rgba(255,255,255,.86); --sh-tip:0 14px 40px rgba(16,18,40,.18),0 0 0 .5px rgba(0,0,0,.06);
  --focus:#1a24a8;
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --folder:rgba(118,118,128,.16); --folder-edge:rgba(0,0,0,.06); --folder-open:rgba(255,255,255,.72);
  --r-card:22px; --r-group:12px; --r-btn:12px; --r-sheet:22px; --r-icon:14px;
  --ease-out:cubic-bezier(.25,1,.5,1);
  --hair:1px;
}
@media (min-resolution:2dppx){:root{--hair:.5px}}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --surface:#1c1c1e; --raised:#2c2c2e; --sheet-bg:#1c1c1e;
    --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.32); --press:rgba(118,118,128,.28);
    --ink:#f5f5f7; --ink-2:#aeaeb2; --ink-3:#98989f;
    --sep:rgba(84,84,88,.6);
    --tint:#9aa2ff; --tint-fill:#4550f0; --tint-press:#5b65ff; --on-tint:#ffffff; --tint-soft:rgba(154,162,255,.16);
    --red:#ff453a; --red-soft:rgba(255,69,58,.14); --badge:#e3122e;
    --green:#5bd87a; --green-soft:rgba(48,209,88,.16);
    --mat:rgba(18,18,20,.72); --mat-edge:rgba(255,255,255,.1);
    --scrim:rgba(0,0,0,.5);
    --folder:rgba(118,118,128,.3); --folder-edge:rgba(255,255,255,.1); --folder-open:rgba(44,44,46,.72);
    --toast:rgba(58,58,60,.9);
    --skeleton:rgba(118,118,128,.16); --skeleton-hi:rgba(118,118,128,.28);
    --sh-card:0 0 0 .5px rgba(255,255,255,.07);
    --sh-card-hover:0 0 0 .5px rgba(255,255,255,.12),0 16px 36px rgba(0,0,0,.55);
    --sh-sheet:0 30px 90px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.08);
    --sh-icon:inset 0 0 0 .5px rgba(255,255,255,.12);
    --sh-icon-lift:inset 0 0 0 .5px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.65);
    --mat-tip:rgba(44,44,46,.84); --sh-tip:0 16px 44px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.1);
    --focus:#b3b9ff;
  }
}
@media (prefers-contrast:more){
  :root{ --ink-2:var(--ink); --ink-3:var(--ink); --sep:rgba(60,60,67,.6); --mat:var(--bg); --mat-edge:var(--ink-3); --sh-card:0 0 0 1px var(--ink-3);
    --mat-tip:var(--raised); --sh-tip:0 0 0 1px var(--ink-3); --folder-open:var(--raised); }
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip;background:var(--bg);color:var(--ink);
  font:400 17px/1.47 var(--font-text);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
html.sheet-open{overflow:hidden}
main{flex:1 0 auto}
.wrap{width:100%;max-width:960px;margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
.defs{position:absolute;width:0;height:0;overflow:hidden}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:var(--tint)}
.display{margin:0;font:700 34px/1.12 var(--font-display);letter-spacing:-.022em;text-wrap:balance}
@media (min-width:700px){.display{font-size:40px}}

/* ---------------------------------------------------------------- bar: material fades in as content passes under it */
.bar{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.bar::before{content:"";position:absolute;inset:0;background:var(--mat);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 calc(-1 * var(--hair)) 0 var(--mat-edge);opacity:var(--bar-mat,0)}
.bar-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.brand{display:flex;align-items:center;gap:9px;margin:0;font:600 17px/1 var(--font-text);letter-spacing:-.02em}
.mark{display:block;flex:none;aspect-ratio:143/164}
.bar-mark{height:30px;view-transition-name:flr-mark}
.brand-name{color:var(--ink)}
/* the bar's trailing controls: Hub settings (administrators only) and the account */
.bar-trail{display:flex;align-items:center;gap:10px}
.iconbtn{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--fill);color:var(--ink-2);
  transition:transform .28s var(--ease-out),background-color .15s,color .15s}
.iconbtn svg{width:21px;height:21px}
.iconbtn:active{transform:scale(.92);transition-duration:.1s}
@media (hover:hover){.iconbtn:hover{background:var(--fill-2);color:var(--ink)}}
.avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;padding:0;border:0;border-radius:50%;background:var(--tint-soft);
  color:var(--tint);font:600 14px/1 var(--font-text);letter-spacing:.01em;cursor:pointer;transition:transform .28s var(--ease-out),background-color .15s}
.avatar:active{transform:scale(.92);transition-duration:.1s}
.avatar-lg{width:72px;height:72px;font-size:27px;cursor:default}

/* ---------------------------------------------------------------- sign-in */
.signin{display:grid;place-items:center;padding-block:max(40px,env(safe-area-inset-top,0px)) 24px}
.signin-card{width:min(100%,400px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.signin-mark{height:84px;margin-bottom:10px}
#signin .signin-mark{view-transition-name:flr-mark}
.lede{margin:0 0 18px;max-width:34ch;color:var(--ink-2);font-size:17px;line-height:1.4;text-wrap:balance}
.signin-foot{margin:14px 0 0;padding-top:18px;border-top:var(--hair) solid var(--sep);width:100%;color:var(--ink-2);font-size:15px}
.signin .form{width:100%}

/* ---------------------------------------------------------------- grouped rows (inset grouped lists) */
.form{display:flex;flex-direction:column;gap:12px;text-align:left}
.group{width:100%;background:var(--surface);border-radius:var(--r-group);box-shadow:var(--sh-card);overflow:hidden}
.sheet .group{background:var(--raised)}
.row{position:relative;display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;cursor:text;transition:background-color .15s}
.row + .row::before{content:"";position:absolute;top:0;left:16px;right:0;height:var(--hair);background:var(--sep)}
.row:focus-within{background:var(--tint-soft)}
.row-label{flex:0 0 102px;color:var(--ink);font-size:17px}
.row input{flex:1;min-width:0;height:48px;padding:0;border:0;background:transparent;font-size:17px;letter-spacing:-.006em;outline:none}
.row input::placeholder{color:var(--ink-3);opacity:1}
.row[aria-invalid="true"] .row-label{color:var(--red)}
.row-button{width:100%;justify-content:center;border:0;background:transparent;font-size:17px;cursor:pointer}
.row-button:active{background:var(--press)}
.row-button.danger{color:var(--red)}
.hint,.field-error{margin:-4px 16px 0;font-size:13px;line-height:1.35;color:var(--ink-3)}
.field-error{color:var(--red)}
.form-error,.form-ok{display:flex;align-items:flex-start;gap:8px;margin:0;padding:11px 14px;border-radius:var(--r-group);font-size:15px;line-height:1.35}
.form-error{background:var(--red-soft);color:var(--red)}
.form-error svg{flex:none;width:18px;height:18px;margin-top:1px}
.form-ok{background:var(--green-soft);color:var(--green)}
@media (max-width:380px){.row-label{flex-basis:88px;font-size:16px}}

/* ---------------------------------------------------------------- buttons: feedback on press, not on release */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border:0;
  border-radius:var(--r-btn);font:600 17px/1 var(--font-text);letter-spacing:-.012em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .28s var(--ease-out),background-color .15s,opacity .15s}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn-primary{background:var(--tint-fill);color:var(--on-tint)}
@media (hover:hover){.btn-primary:hover{background:var(--tint-press)}}
.btn-block{width:100%;margin-top:4px}
.btn[aria-busy="true"]{pointer-events:none;opacity:.85}
.spin{display:none;width:20px;height:20px}
.btn[aria-busy="true"] .spin{display:block;animation:spin .8s steps(8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{appearance:none;display:inline;padding:6px 4px;border:0;border-radius:6px;background:none;color:var(--tint);font:400 15px/1.3 var(--font-text);cursor:pointer}
.link:active{opacity:.55}

/* ---------------------------------------------------------------- home */
.home{position:relative;isolation:isolate;padding-block:18px 32px}
/* A quiet FLR diamond behind the home screen; never intercepts tool controls. */
.home::before{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  top:72px;right:max(-100px,calc((100vw - 1200px)/2));
  width:min(64vw,680px);aspect-ratio:1;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:linear-gradient(145deg,rgba(0,9,139,.075),rgba(0,9,139,.015));
}
@media (prefers-color-scheme:dark){
  .home::before{background:linear-gradient(145deg,rgba(0,9,139,.33),rgba(0,9,139,.045))}
}
@media (max-width:600px){
  .home::before{top:100px;right:-140px;width:360px;opacity:.6}
}
@media (prefers-contrast:more),(forced-colors:active){
  .home::before{display:none}
}
.home-head{display:flex;flex-direction:column;gap:2px;margin-bottom:28px}
.eyebrow{margin:0;color:var(--ink-2);font:600 15px/1.3 var(--font-text);letter-spacing:-.006em}
.section-label{margin:0 0 12px;color:var(--ink-2);font:600 15px/1.3 var(--font-text);letter-spacing:-.006em}
.waiting-card{max-width:560px;margin:0 0 28px;padding:20px 22px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-card)}
.waiting-title{margin:0;font:650 19px/1.3 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.waiting-text{margin:8px 0 0;max-width:58ch;color:var(--ink-2);font-size:16px;line-height:1.5}
.waiting-meta{margin:12px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.4}
/* Tools as app icons, as on a home screen: the name under each icon, the description in a card that rises from the
   icon on hover (a long press on touch screens, keyboard focus too). */
.tiles{display:flex;flex-wrap:wrap;gap:24px 20px;margin:0;padding:0;list-style:none}
.tile{position:relative;width:112px}
.tile-link{display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:6px;border-radius:18px;color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tile-link:focus-visible{outline-offset:4px}
.app-icon{display:grid;place-items:center;width:88px;height:88px;flex:none;border-radius:22.5%;color:#fff;box-shadow:var(--sh-icon);
  background:linear-gradient(160deg,#8e8e93 0%,#48484a 100%);transition:transform .34s var(--ease-out),box-shadow .3s var(--ease-out)}
.app-icon svg{width:46px;height:46px}
.app-icon--estimator{background:linear-gradient(160deg,#3a47e0 0%,#00098b 78%)}
.app-icon--speeding{background:linear-gradient(160deg,#ff8a3d 0%,#e3122e 78%)}
.app-icon--annual-leave{background:linear-gradient(160deg,#4fd46a 0%,#17853a 78%)}
.app-icon--fitters{background:linear-gradient(160deg,#35c4d8 0%,#0a6f8c 78%)}
.app-icon--onboarding{background:linear-gradient(160deg,#a58bff 0%,#5326c4 78%)}
.app-icon--orders{background:linear-gradient(160deg,#ffc247 0%,#d9620b 78%)}
.app-icon--capacity{background:linear-gradient(160deg,#ff6f9f 0%,#c0175c 78%)}
.app-icon--proximity{background:linear-gradient(160deg,#5ac8fa 0%,#0a4fb5 78%)}
.app-icon--warehouse{background:linear-gradient(160deg,#e0a96d 0%,#8a4f1d 78%)}
.app-icon--surveyors{background:linear-gradient(160deg,#d27bff 0%,#6a1fa8 78%)}
.app-icon--maintenance{background:linear-gradient(160deg,#8c9bb8 0%,#3b4763 78%)}
.app-icon--market{background:linear-gradient(160deg,#ff9f5a 0%,#c2410c 78%)}
@media (hover:hover){.tile-link:hover .app-icon{transform:translateY(-3px) scale(1.04);box-shadow:var(--sh-icon-lift)}}
.tile-link:active .app-icon{transform:scale(.92);transition-duration:.12s}
.tile-name{max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font:500 13px/1.25 var(--font-text);letter-spacing:-.004em;color:var(--ink);text-align:center;text-wrap:balance}

.tile-tip{--tip-dx:0px;--tip-y:-6px;--tip-s:.9;position:absolute;z-index:30;top:calc(100% + 10px);left:50%;width:252px;padding:12px 14px 11px;
  border-radius:14px;background:var(--mat-tip);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh-tip);color:var(--ink);
  transform-origin:calc(50% - var(--tip-dx)) 0;transform:translateX(calc(-50% + var(--tip-dx))) translateY(var(--tip-y)) scale(var(--tip-s));
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .3s var(--ease-out),visibility 0s linear .16s}
.tile-tip::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* a bridge, so the pointer can move onto the card */
.tile.tip-up .tile-tip{--tip-y:6px;top:auto;bottom:calc(100% + 10px);transform-origin:calc(50% - var(--tip-dx)) 100%}
.tile.tip-up .tile-tip::before{top:auto;bottom:-14px}
@media (hover:hover){
  .tile:not(.tip-off):hover .tile-tip{--tip-y:0px;--tip-s:1;opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .2s ease .35s,transform .34s var(--ease-out) .35s,visibility 0s linear .35s}
}
.tile:not(.tip-off):has(.tile-link:focus-visible) .tile-tip,.tile.show-tip .tile-tip{--tip-y:0px;--tip-s:1;opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .2s ease,transform .34s var(--ease-out),visibility 0s}
.tile.tip-off .tile-tip{transition:opacity .12s ease,transform .2s ease,visibility 0s linear .12s}   /* Escape: hide at once, until the pointer or focus moves on */
.tip-title{margin:0 0 3px;font:600 15px/1.3 var(--font-text);letter-spacing:-.01em}
.tip-text{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.4}
.tip-go{display:flex;align-items:center;gap:3px;margin:9px 0 0;padding-top:8px;border-top:var(--hair) solid var(--sep);color:var(--tint);
  font:600 13px/1.2 var(--font-text);letter-spacing:-.004em}
.tip-go svg{width:14px;height:14px}
@media (max-width:480px){
  .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 6px}
  .tile{width:auto}
  .app-icon{width:62px;height:62px}
  .app-icon svg{width:33px;height:33px}
  .tile-name{font-size:12px}
}

/* Folders (Super Admins): a frosted square holding small copies of its apps' icons, as on an iPhone. A tap opens it over
   the home screen, grown out of the icon (hub.js). */
.tile--folder .tile-link{width:100%;margin:0;padding-inline:0;border:0;background:none;font:inherit;cursor:pointer}
.folder-icon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:7%;padding:13%;place-items:stretch;
  background:var(--folder);box-shadow:inset 0 0 0 .5px var(--folder-edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.folder-icon .app-icon{width:auto;height:auto;aspect-ratio:1;border-radius:24%;box-shadow:none;transition:none;transform:none!important}
.folder-icon .app-icon svg{width:64%;height:64%}
.folder{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
.folder::backdrop{background:transparent}
.folder-scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.folder-panel{position:absolute;inset:0;width:min(calc(100% - 32px),460px);height:fit-content;margin:auto;padding:24px 22px 30px;border-radius:40px;
  background:var(--folder-open);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh-sheet);outline:none}
.folder-title{margin:0 44px 22px;text-align:center;font:700 26px/1.2 var(--font-display);letter-spacing:-.02em}
.folder-close{position:absolute;top:22px;right:20px}
.folder-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 8px;justify-items:center}
.folder-tiles .tile{width:100%;max-width:112px}
@media (max-width:480px){
  .folder-panel{padding:20px 14px 24px;border-radius:34px}
  .folder-title{font-size:23px;margin-bottom:18px}
  .folder-close{top:18px;right:14px}
  .folder-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .folder-tiles .app-icon{width:68px;height:68px}
  .folder-tiles .app-icon svg{width:36px;height:36px}
}

.tile--loading .tile-link{pointer-events:none}
.tile--loading .app-icon{color:transparent;background:var(--skeleton);box-shadow:none}
.tile--loading .tile-name{width:70%;height:13px;border-radius:5px;background:var(--skeleton)}
@media (prefers-reduced-motion:no-preference){
  .tile--loading .app-icon,.tile--loading .tile-name{
    background:linear-gradient(90deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.notice{margin:18px 2px 0;color:var(--ink-2);font-size:15px}

/* ---------------------------------------------------------------- what needs you (Hub migration 2.3): badges and the panel
   Counts only. On a wide screen the tools sit on the left and the panel fills the rest of the row; narrower, the panel
   goes under the tools; on a phone its lines are shorter and the small icons go. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Websites staff use every day (web-apps.js), among the apps: each in its own brand colour with its official mark in white. */
.app-icon--outlook{background:linear-gradient(160deg,#2f95ea 0%,#0b4aa2 78%)}
.app-icon--monday{background:linear-gradient(160deg,#8a8aff 0%,#4b3fd6 78%)}
.app-icon--hubspot{background:linear-gradient(160deg,#ff9b74 0%,#e8512b 78%)}
.app-icon--sharepoint{background:linear-gradient(160deg,#2bc4b6 0%,#036c70 78%)}
.app-logo{display:block;width:52%;height:52%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}

.home-grid{display:flex;flex-direction:column;gap:36px}
@media (min-width:900px){
  .home-grid.with-attn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:start}
  .home-grid.with-attn .tiles{display:grid;grid-template-columns:repeat(3,112px);gap:24px 16px}
}
.app-icon{position:relative}
.badge{position:absolute;top:-7px;right:-8px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--badge);color:#fff;
  font:700 13px/24px var(--font-text);letter-spacing:0;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2.5px var(--bg)}
.attn{min-width:0;max-width:640px}
.attn-list{margin:0;padding:0;list-style:none;background:var(--surface);border-radius:var(--r-group);box-shadow:var(--sh-card);overflow:hidden}
.attn-list > li{position:relative}
.attn-list > li + li::before{content:"";position:absolute;z-index:1;top:0;left:62px;right:0;height:var(--hair);background:var(--sep)}
.attn-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px 10px 16px;color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s}
.attn-row:active{background:var(--press);transition-duration:0s}
@media (hover:hover){.attn-row:hover{background:var(--fill)}}
.attn-row:focus-visible{outline-offset:-3px;border-radius:var(--r-group)}
.attn-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;color:#fff;box-shadow:var(--sh-icon);
  background:linear-gradient(160deg,#8e8e93 0%,#48484a 100%)}
.attn-icon svg{width:20px;height:20px}
.attn-icon--estimator{background:linear-gradient(160deg,#3a47e0 0%,#00098b 78%)}
.attn-icon--speeding{background:linear-gradient(160deg,#ff8a3d 0%,#e3122e 78%)}
.attn-icon--annual-leave{background:linear-gradient(160deg,#4fd46a 0%,#17853a 78%)}
.attn-icon--settings{background:var(--fill);color:var(--ink-2);box-shadow:none}
.attn-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.attn-title{font:600 16px/1.3 var(--font-text);letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.attn-sub{color:var(--ink-2);font-size:13.5px;line-height:1.35}
.attn-chev{width:14px;height:14px;flex:none;color:var(--ink-3)}
.attn .short{display:none}
.attn-none{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px}
.attn-ok{width:26px;height:26px;flex:none;color:var(--green)}
.attn-foot{margin:10px 2px 0;color:var(--ink-3);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}
.attn-foot:empty{display:none}
.attn-sk{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px}
.attn-sk .sk-icon{width:34px;height:34px;flex:none;border-radius:9px;background:var(--skeleton)}
.attn-sk .sk-lines{flex:1;height:30px;border-radius:6px;background:var(--skeleton);max-width:70%}
@media (prefers-reduced-motion:no-preference){
  .attn-sk .sk-icon,.attn-sk .sk-lines{background:linear-gradient(90deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
}
@media (max-width:480px){
  .attn{max-width:none}
  .attn-icon,.attn-sk .sk-icon{display:none}
  .attn .long{display:none}
  .attn .short{display:inline}
  .attn-list > li + li::before{left:16px}
  .attn-row,.attn-none,.attn-sk{min-height:58px}
  .badge{top:-6px;right:-7px;min-width:22px;height:22px;border-radius:11px;font-size:12.5px;line-height:22px;padding:0 6px}
}

.foot{padding-block:8px max(20px,env(safe-area-inset-bottom,0px))}
.foot p{margin:0;color:var(--ink-3);font-size:13px;text-align:center}
.noscript{margin:0 20px 20px;color:var(--ink-2);text-align:center}

/* ---------------------------------------------------------------- sheets: a spring moves --y; drag the top edge to dismiss */
.sheet{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
.sheet::backdrop{background:transparent}
.sheet .scrim{position:absolute;inset:0;background:var(--scrim);opacity:0}
.sheet .panel{--y:100vh;position:absolute;left:0;right:0;bottom:0;margin-inline:auto;width:min(100%,540px);max-height:calc(100% - 28px - env(safe-area-inset-top,0px));
  overflow:auto;overscroll-behavior:contain;background:var(--sheet-bg);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--sh-sheet);
  padding-bottom:max(22px,env(safe-area-inset-bottom,0px));transform:translate3d(0,var(--y),0);will-change:transform}
@media (min-width:700px) and (min-height:560px){
  .sheet .panel{top:50%;bottom:auto;border-radius:var(--r-sheet);max-height:calc(100% - 64px);padding-bottom:24px;transform:translate3d(0,calc(-50% + var(--y)),0)}
}
.sheet.dragging .panel{cursor:grabbing}
.sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:22px 16px 10px 20px;background:var(--sheet-bg);touch-action:none;cursor:grab}
.grabber{position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--fill-2)}
.sheet-title{flex:1;margin:0;font:700 22px/1.2 var(--font-display);letter-spacing:-.018em}
.close{display:grid;place-items:center;width:30px;height:30px;flex:none;padding:0;border:0;border-radius:50%;background:var(--fill);color:var(--ink-2);cursor:pointer;
  transition:transform .28s var(--ease-out),background-color .15s}
.close:active{transform:scale(.9);transition-duration:.1s}
.close svg{width:16px;height:16px}
.sheet-body{padding:6px 20px 0}
.sheet-lede{margin:0 0 4px;color:var(--ink-2);font-size:15px;line-height:1.4}
.who{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0 22px;text-align:center}
.who .avatar-lg{margin-bottom:8px}
.who-name{margin:0;font:650 20px/1.25 var(--font-display);letter-spacing:-.017em}
.who-email{margin:0;color:var(--ink-2);font-size:15px;overflow-wrap:anywhere}
.chip{margin:8px 0 0;padding:4px 11px;border-radius:999px;background:var(--fill);color:var(--ink-2);font:600 13px/1.3 var(--font-text)}
.sheet .hint{margin-top:8px}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;margin:0;padding:11px 18px;border-radius:999px;
  background:var(--toast);color:var(--on-toast);font:600 15px/1.2 var(--font-text);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transform:translateX(-50%);box-shadow:0 10px 30px rgba(0,0,0,.2);white-space:nowrap}

/* ---------------------------------------------------------------- page-to-page: coming back from a tool slides the hub in from the left */
@view-transition{navigation:auto;types:flr-pop}
@media (prefers-reduced-motion:no-preference){
  html:active-view-transition-type(flr-pop)::view-transition-old(root){animation:.5s cubic-bezier(.32,.72,0,1) both flr-pop-out;z-index:1}
  html:active-view-transition-type(flr-pop)::view-transition-new(root){animation:.5s cubic-bezier(.32,.72,0,1) both flr-pop-in}
  html:active-view-transition-type(flr-swap)::view-transition-group(flr-mark){animation-duration:.5s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
}
@keyframes flr-pop-out{to{transform:translateX(100%)}}
@keyframes flr-pop-in{from{transform:translateX(-30%);filter:brightness(.94)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .btn,.avatar,.close,.app-icon{transition:none}
  .tile-tip,.tile.tip-up .tile-tip{--tip-y:0px;--tip-s:1}
}
@media (prefers-reduced-transparency:reduce){
  :root{--mat:var(--bg);--mat-tip:var(--raised);--blur:none;--toast:#1c1c1e}
}

/* ---------------------------------------------------------------- Maintenance's shortcut under the tools: one quiet line */
.shortcut{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);
  box-shadow:var(--sh-card);color:var(--ink-2);font:500 14.5px/1.3 var(--font-text);text-decoration:none;transition:background .15s}
.shortcut b{color:var(--tint);font-weight:600}
.shortcut-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;color:#fff;background:linear-gradient(160deg,#8c9bb8 0%,#3b4763 78%);box-shadow:var(--sh-icon)}
.shortcut-icon svg{width:18px;height:18px}
.shortcut-chev{width:13px;height:13px;flex:none;color:var(--ink-3)}
@media (hover:hover){.shortcut:hover{background:var(--fill)}}
.shortcut:active{background:var(--press);transition-duration:0s}
@media (max-width:480px){.shortcut{display:flex;margin-top:24px}}