/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

  body {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

  /* Scrollbar — thin, subtle, professional */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
/* Card — the primary surface container */
.card {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* KPI Card — dashboard metric card */
.kpi-card {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
}
/* Status badge */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
/* Button base */
/* Input */
.input {
  height: 2.5rem;
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(79 70 229 / 0.3);
}
.input-error {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.input-error:focus {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  --tw-ring-color: rgb(220 38 38 / 0.3);
}
/* Data table */
.table-header {
  position: sticky;
  top: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.table-row {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.table-row:hover {
  background-color: rgb(238 242 255 / 0.4);
}
.table-cell {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
/* Alert banner */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
/* Live indicator */
.live-dot {
  height: 0.5rem;
  width: 0.5rem;
}
@keyframes pulse-live {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}
.live-dot {
  animation: pulse-live 2s ease-in-out infinite;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
/* App shell layout */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.app-sidebar {
  display: flex;
  width: 15rem;
  min-width: 240px;
  flex-direction: column;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.app-topnav {
  display: flex;
  height: 4rem;
  align-items: center;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.app-main {
  flex: 1 1 0%;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.app-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
/* Sidebar nav item */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.nav-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.nav-item-active {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-32 {
  bottom: -8rem;
}
.-left-24 {
  left: -6rem;
}
.-right-24 {
  right: -6rem;
}
.-top-24 {
  top: -6rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-\[-5\%\] {
  bottom: -5%;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[60\] {
  z-index: 60;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[620px\] {
  height: 620px;
}
.h-\[680px\] {
  height: 680px;
}
.h-full {
  height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[480px\] {
  width: 480px;
}
.w-\[620px\] {
  width: 620px;
}
.w-\[680px\] {
  width: 680px;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[64px\] {
  min-width: 64px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink {
  flex-shrink: 1;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.animate-none {
  animation: none;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rounded {
  border-radius: 0.5rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.75rem;
}
.rounded-xl {
  border-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-border {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-teal-300\/10 {
  border-color: rgb(94 234 212 / 0.1);
}
.border-teal-300\/15 {
  border-color: rgb(94 234 212 / 0.15);
}
.border-transparent {
  border-color: transparent;
}
.border-l-error {
  --tw-border-opacity: 1;
  border-left-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-l-success {
  --tw-border-opacity: 1;
  border-left-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.border-l-surface-subtle {
  --tw-border-opacity: 1;
  border-left-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-l-warning {
  --tw-border-opacity: 1;
  border-left-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-error {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-error\/10 {
  background-color: rgb(220 38 38 / 0.1);
}
.bg-info {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-info\/10 {
  background-color: rgb(2 132 199 / 0.1);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-primary-light {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
  background-color: rgb(79 70 229 / 0.2);
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-success\/10 {
  background-color: rgb(5 150 105 / 0.1);
}
.bg-surface-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-teal-300\/70 {
  background-color: rgb(94 234 212 / 0.7);
}
.bg-teal-400\/15 {
  background-color: rgb(45 212 191 / 0.15);
}
.bg-text-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-warning\/10 {
  background-color: rgb(217 119 6 / 0.1);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-\[hsl\(168\2c 80\%\2c 28\%\)\] {
  --tw-gradient-from: hsl(168,80%,28%) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(168 80% 28% / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[hsl\(168\2c 55\%\2c 18\%\)\] {
  --tw-gradient-to: hsl(168,55%,18%) var(--tw-gradient-to-position);
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-2xl {
  font-size: 1.75rem;
  line-height: 2rem;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-base {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.375rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lining-nums {
  --tw-numeric-figure: lining-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-error {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-info {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-success {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-text {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-text-muted {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-text-secondary {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-zinc-100 {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-50 {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.opacity-30 {
  opacity: 0.3;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-teal-400\/20 {
  --tw-ring-color: rgb(45 212 191 / 0.2);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}


/* ══════════════════════════════════════════════════════════════════
   Control Tower Performance — the mock-up's own stylesheet, carried
   across verbatim so the dashboard and the approved design stay in
   step. Class vocabulary (.statp .panel .tile .mrow .dual .pair .g2
   .g3 .g4 .cells) is the contract; the React tree emits the same DOM.
   ══════════════════════════════════════════════════════════════════ */
/* ============================================================
   Control Tower — Performance tab · v1 mockup
   Design language carried from the live CT + ct-v5-mockup.html
   ============================================================ */
:root{
  /* --- surfaces, carried verbatim from v5 --- */
  --bg:#eef1f9; --card:#fff; --line:#dfe4f2; --line2:#eef0f8;
  --ink:#141a33; --ink2:#3d4668; --ink3:#5d6480;
  --indigo:#3b39d4; --navy:#0b1b54;
  --g:#0e7a59; --a:#9c5c06; --r:#c0392f;
  --gbg:#e4f5ee; --abg:#fdf1dc; --rbg:#fde9e6; --ibg:#e9ecfb;
  --afill:#d7a13c; --gfill:#4fa08b;   /* fills, not text — they carry no contrast duty */

  /* --- chart series: pastel, no red, never the UI accent --- */
  --c1:#5b7cc9; --c2:#4fa08b; --c3:#c9a24f; --c4:#8b7cc4; --c5:#6b8ea3; --c6:#b2846a;
  --c1f:rgba(91,124,201,.20); --c2f:rgba(79,160,139,.20); --c3f:rgba(201,162,79,.22);
  --c4f:rgba(139,124,196,.20); --c5f:rgba(107,142,163,.20); --c6f:rgba(178,132,106,.20);
  --graphite:#6b7285;
  /* the series palette is for lines and bars, where nothing sits on top of it.
     The earnings split writes white INSIDE the fill, so it needs its own darker
     set: white on --c3 was 2.40:1. Same hues, all now ≥4.6:1. */
  /* edit 23.3 — the six earnings components were all mid-tone at similar
     lightness, so the bands read as one blur. These are pastel and, more
     to the point, spread across the wheel: blue, green, amber, violet,
     coral, grey. Light enough that the share printed inside each band
     needs dark ink rather than white. */
  --e1:#9dc3ea; --e2:#8fd8bf; --e3:#f6cf87; --e4:#c4b2e6; --e5:#f3a9a0; --e6:#cfd3da;

  --rail:60px;
  --r-card:14px;
  --sh:0 1px 3px rgba(20,26,51,.06);
  --sh2:0 6px 24px rgba(20,26,51,.10);
  --ease:cubic-bezier(.22,.9,.28,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:12.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;
}
/* browser surfaces themed from the palette */
::-moz-selection{background:#d9dcfa;color:var(--ink)}
::selection{background:#d9dcfa;color:var(--ink)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:#c3cade transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#c3cade;border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#a8b1cb;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;font-variant-numeric:inherit}
svg text{font-variant-numeric:tabular-nums lining-nums}

/* ---------------- top nav ---------------- */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px 0}
.brand{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card);
  border-radius:12px;padding:9px 13px;flex:none}
.brand .mark{width:19px;height:19px;border-radius:5px;background:var(--indigo);display:grid;place-items:center}
.brand .mark svg{width:11px;height:11px}
.brand b{font-size:12.5px;letter-spacing:.06em;color:var(--navy)}
.brand span{font-size:12.5px;letter-spacing:.06em;color:var(--ink3)}
.nav{flex:1;display:flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:var(--card);
  border-radius:999px;padding:5px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:1;text-align:center;white-space:nowrap;padding:9px 14px;border-radius:999px;
  color:var(--ink2);text-decoration:none;font-size:12.5px;font-weight:500;transition:background .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:var(--line2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--indigo);color:#fff;font-weight:600}
.nav a[aria-current="page"]:hover{background:#3230bd}
.tbtn{flex:none;width:38px;height:38px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink2);transition:background .15s var(--ease)}
.tbtn:hover{background:var(--line2)}
.tbtn svg{width:16px;height:16px}
.logout{flex:none;display:flex;align-items:center;gap:8px;border:1.5px solid #f6d5d0;background:#fff6f4;
  color:var(--r);border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.logout svg{width:14px;height:14px}

/* ---------------- shell ----------------
   EDIT 4.6 — Rider performance folded into Order performance, so there is one
   page and no sub-tab rail at all. */
.shell{display:block;padding:14px 20px 60px}
.page{min-width:0;max-width:1680px}

/* ---------------- filter bar ---------------- */
/* edit v2-fix52.3 — the bar was sticky at top:14px, so while scrolling the
   cards showed through that 14px gap above it ("81s vs previous" peeked out).
   The STRIP is sticky at top:0 and carries the page background plus the 14px
   of padding, so nothing can appear above the bar. */
/* edit v2-fix92.1 — THE FILTER BAR IS NOT STICKY ON A PHONE.

   92.1 reports that the sticky bar covers the panel under it and asks for
   "a sticky strip with the page background and 12px padding, so content
   scrolls under it cleanly". I implemented exactly that first and MEASURED IT
   MAKING THE REPORTED FAULT WORSE: the band is opaque, so 12px more padding
   hides 12px more content. At 390px, scrollY 769, the "On-time performance"
   title went from clipped by 55px to clipped by 77px.
   
   The check in 92.3 is "nothing hides behind the filter bar". No padding
   satisfies that, because a sticky bar covering content as you scroll past it
   is what sticky MEANS. Only two things satisfy it: a bar that is not sticky,
   or one with no height.
   
   So on a phone it scrolls with the page. The trade, stated: the filters are
   no longer permanently on screen at phone width — they are one tap behind
   the "Filters" button, which now scrolls away with everything else. That
   seems the right way round on a 844px screen where the strip was costing
   108px (13%) to keep one button visible, and where fix 91's focus view puts
   the metrics that matter at the top anyway. If the bar should stay pinned,
   the covering comes back and the most I can do is make the band shorter.
   
   The 12px padding is kept: once the bar is not sticky it is simply the gap
   between the controls and the first panel, which is what it looks like. */
.fstrip{position:sticky;top:0;z-index:30;background:var(--bg);padding-top:14px}
@media(max-width:760px){
  .fstrip{position:static;padding-bottom:12px;z-index:auto}
}
.fbar{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:8px;
  /* Audit F3 — the bar sat flush against the first row while every other
     section boundary on the page is 22px, so it read as part of the panel
     below it rather than as its own control layer. */
  margin-bottom:22px}
.fgrp{display:flex;align-items:center;gap:8px;min-width:0}
.flab{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);font-weight:600;flex:none}
.msel{position:relative;flex:none}
.msel>button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:9px;padding:7px 10px;cursor:pointer;max-width:250px;transition:border-color .15s var(--ease)}
.msel>button:hover{border-color:#c3cade}
.msel>button .chips{display:flex;gap:4px;overflow:hidden}
.chip{background:var(--ibg);color:var(--indigo);border-radius:6px;padding:2px 7px;font-size:12.5px;
  font-weight:600;white-space:nowrap}
.caret{width:12px;height:12px;flex:none;stroke:var(--ink3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pop{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh2);padding:6px;z-index:60;display:none}
.pop.open{display:block}
.pop label{display:flex;align-items:center;gap:12px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px}
.pop label:hover{background:var(--line2)}
.pop input{accent-color:var(--indigo);width:14px;height:14px;flex:none}

/* duration cycle */
.cycle{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--card);flex:none}
.cycle button.nav{border:0;background:none;padding:7px 8px;cursor:pointer;color:var(--ink3);display:grid;place-items:center}
.cycle button.nav:hover{color:var(--indigo)}
/* edit v2-fix106.2.3 — › stops at the period ending yesterday. */
.cycle button.nav:disabled{color:var(--line);cursor:default}
.cycle button.nav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cycle .val{min-width:104px;min-height:26px;text-align:center;font-size:12.5px;font-weight:600;
  color:var(--ink);padding:0 4px;cursor:pointer;border:0;background:none}
.cycle .val:hover{color:var(--indigo)}

/* segmented */
.seg{display:inline-flex;background:var(--line2);border-radius:9px;padding:3px;gap:4px;flex:none;
  transition:opacity .15s var(--ease)}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:600;
  color:var(--ink2);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.seg button:hover:not([aria-pressed="true"]):not(:disabled){background:#e3e7f3}
.seg button[aria-pressed="true"]{background:var(--indigo);color:#fff;box-shadow:0 1px 2px rgba(20,26,51,.16)}
.seg[aria-disabled="true"]{opacity:.42;pointer-events:none}
.seg button:disabled{cursor:not-allowed}

/* switch */
.sw{display:flex;align-items:center;gap:8px;cursor:pointer;flex:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:26px}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .tr{width:36px;height:20px;border-radius:999px;background:#d5dae8;position:relative;flex:none;
  transition:background .17s var(--ease)}
.sw .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(20,26,51,.25);transition:transform .17s var(--ease)}
.sw input:checked+.tr{background:#7fb3c4}
.sw input:checked+.tr::after{transform:translateX(16px)}
.sw input:focus-visible+.tr{outline:2px solid var(--indigo);outline-offset:2px}
.sw span.t{font-size:12.5px;font-weight:400;color:var(--ink2);white-space:nowrap}
.sw input:checked~span.t{color:var(--ink);font-weight:600}

.fspacer{flex:1}
.stamp{font-size:12.5px;color:var(--ink3);white-space:nowrap;display:flex;align-items:center;gap:8px;flex:none}
.dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex:none}
.morebtn{display:none}
/* edit 24.4 — `.morebtn` is the phone-only Filters button: it is display:none
   until the 900px breakpoint. Chart controls need to be visible at every width,
   so they get their own class rather than borrowing that one. */
.chipbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:9px;padding:6px 11px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap;
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.chipbtn:hover{border-color:var(--ink3)}
.chipbtn[aria-pressed="true"]{border-color:var(--indigo);background:#eef1fb;color:var(--navy)}
/* edit v2-fix106.2.1 — the Previous period chip while either window loads:
   disabled, with a small spinner where the lavender swatch sits. */
.chipbtn:disabled{cursor:progress;opacity:.7}
.chipspin{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);
  border-top-color:var(--indigo);display:inline-block;animation:vdlsp .8s linear infinite}
@media (prefers-reduced-motion:reduce){.chipspin{animation:none}}
/* the metric multi-select */
.mpop{position:relative;display:inline-block}
.mpop .sheet{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:260px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 32px rgba(11,27,84,.16);padding:7px;max-height:320px;overflow:auto}
.mpop .sheet label{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  cursor:pointer;font-size:12.5px;color:var(--ink);white-space:nowrap}
.mpop .sheet label:hover{background:var(--line2)}
.mpop .sheet .hd{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);padding:6px 9px 4px}

/* scope caption */
.scope{margin:11px 2px 0;font-size:12.5px;color:var(--ink3)}
/* the page had no headings at all: every card title is a span inside a button.
   These carry the outline for assistive tech without altering the render. */
.vh{position:absolute;font-size:inherit;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.scope b{color:var(--ink2);font-weight:600}
/* ---------------- spacing scale ----------------
   One rhythm for the whole page. Cards inside a group sit at --sg; a new group
   of meaning starts at --sb. Before iteration 4 every interval was 12px, which
   is why nothing read as grouped. */
:root{
  --sg:12px;          /* within a group — cards that belong together      */
  --sb:22px;          /* between groups — a new idea starts here          */
  --pad:18px;         /* card padding                                     */
}

/* ---------------- grids ---------------- */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg);align-items:stretch}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg);align-items:stretch}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sg);align-items:stretch}
/* top band — promise metrics on the left half, live state on the right (edits 4.3, 4.4) */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sg);align-items:stretch}
.bandL{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sg);align-items:stretch}
.bandR{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sg);align-items:stretch}
.mt12{margin-top:var(--sg)}
.mtb{margin-top:var(--sb)}

/* ---------------- metric tile + panel ----------------
   One anatomy, two sizes: title, figure, target, caption, delta — in that order,
   packed from the top so a row of unequal cards shares its first three
   horizontals instead of drifting. */
.tile,.panel{position:relative;display:flex;flex-direction:column;height:100%;max-width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:var(--pad);text-align:left;width:100%;
  transition:box-shadow .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
button.tile,button.panel{cursor:pointer}
button.tile:hover,button.panel:hover{box-shadow:var(--sh2);border-color:#cdd5ea;transform:translateY(-1px)}
button.tile:active,button.panel:active{transform:translateY(0)}
.tile .nm,.panel .nm{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.01em;
  margin:0 0 10px}
.tile .body{display:block}
.tile .body.rows{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;gap:4px}

/* the figure. A metric with a recorded target is coloured by whether it is met —
   that colour is the whole signal now the rails are gone (edit 4.7). */
.fig{display:block;font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.022em;line-height:1.04}
.fig .u{display:inline;font-size:14px;font-weight:600;color:var(--ink2);margin-left:1px}
.panel .fig2{display:block;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.018em;line-height:1.06}
.panel .fig2 .u{display:inline;font-size:12.5px;font-weight:600;color:var(--ink2)}
/* Health state. These MUST outrank the ink defaults on every figure container:
   `.s-a` alone is one class (0,1,0) and loses to `.panel .fig2` (0,2,0), which is
   how iteration 4 shipped a health signal that computed correctly and never
   painted a pixel. Any new figure container has to be added here too. */
.fig.s-g,.panel .fig2.s-g,.mrow .rv.s-g,.dual .dm .v.s-g,.dual .ds b.s-g,.scard .m .v.s-g,.pair .v.s-g{color:var(--g)}
/* edit v2-fix56 — a value that is in range reads in dark ink, not green. Green
   is the healthy BAND's colour on the charts; using it for text as well made
   two different things share one role. Out of range is red, and amber is kept
   for a defined near-limit rule (only supply attainment has one). */
.fig.s-ok,.panel .fig2.s-ok,.mrow .rv.s-ok,.dual .dm .v.s-ok,.dual .ds b.s-ok,
.scard .m .v.s-ok,.pair .v.s-ok{color:#141A33}
.s-ok .u{color:var(--ink2)}
.fig.s-a,.panel .fig2.s-a,.mrow .rv.s-a,.dual .dm .v.s-a,.dual .ds b.s-a,.scard .m .v.s-a,.pair .v.s-a{color:var(--a)}
.fig.s-r,.panel .fig2.s-r,.mrow .rv.s-r,.dual .dm .v.s-r,.dual .ds b.s-r,.scard .m .v.s-r,.pair .v.s-r{color:var(--r)}
/* the unit suffix stays ink: it is small text and must clear 4.5:1 on its own,
   which a tinted-down state colour does not */
.s-g .u,.s-a .u,.s-r .u{color:var(--ink2)}
/* the target the colour is judged against, in words, under the figure it belongs
   to. Without it the colour is a code only someone who knows the thresholds can
   read — which is most of this page's value gone. */
.tgt{font-size:11px;color:var(--ink3);letter-spacing:.01em;margin-left:auto;white-space:nowrap}
.foot .tgt{align-self:flex-end}

.sub2{display:block;font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.4}
/* The foot sits directly under the figure it belongs to, not pinned to the card
   base. Pinning it aligned the deltas but tore a void through every short card
   in a row whose tallest member set the height. */
/* EDIT 8.4.2 — the closing line sits on the card's base so a row of cards ends
   on one horizontal. This reverses 8e.27, which unpinned it because a void
   opened in short cards; two rounds of "line these up for consistency" outrank
   that, and the rows are far more uniform now than they were at iteration 4. */
.foot{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;padding-top:10px;width:100%;margin-top:auto}
.trend{display:inline-flex;width:-moz-fit-content;width:fit-content;align-items:center;gap:4px;font-size:11px;font-weight:600}
.trend svg{width:10px;height:10px;fill:currentColor}
.trend.up{color:var(--g)} .trend.dn{color:var(--r)} .trend.nu{color:var(--ink3)}
.trend .vs{color:var(--ink3);font-weight:500}

/* two related percentages in one card — OTP+3 over OTP+5 */
/* edit v2-fix72.2 — four stacked rows, so the two halves of the on-time
   panels line up row for row: label, value, target, delta. */
.mrow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0}
.mrow .rtgt{font-size:11px;font-weight:400;color:var(--ink3);white-space:nowrap}
.mrow .foot{margin-top:2px}
.mrow .rk{font-size:12.5px;font-weight:600;color:var(--ink2);min-width:54px}
.mrow .rv{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.mrow .rv .u{display:inline;font-size:12.5px;font-weight:600;color:var(--ink2);margin-left:1px}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sb);align-items:start;margin-block:auto}
.mgrid .r1{flex-wrap:wrap;row-gap:4px}
/* edit v2-fix92.2 — this stacked the on-time pair at ANY width under 760px,
   which at 390px made both on-time panels 310px tall when the panel itself is
   350px wide: two columns of about 153px fit comfortably. Measured before:
   `grid-template-columns: 312px` (one column), panel 310px tall. The pair now
   stays side by side down to 360px and stacks only below that, where 153px
   columns genuinely stop working. */
@media(max-width:360px){.mgrid{grid-template-columns:1fr;gap:0}}
/* 72.2 — a solid 1px divider, 16px gap, columns top-aligned. */
.mgrid{gap:16px}
.mgrid .mrow+.mrow{border-top:0;margin-top:0;padding-top:0;padding-left:16px;border-left:1px solid #E3E7F0}
/* and the divider flips at the same width, or a side-by-side pair would
   carry the stacked layout's TOP border between its two columns. */
@media(max-width:360px){.mgrid .mrow+.mrow{border-left:0;padding-left:0;border-top:1px solid #E3E7F0;margin-top:12px;padding-top:12px}}

/* a leading figure with its companion share underneath — no rail (edit 4.7) */
.dual{display:block}
.dual .dm{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;width:100%}
.dual .dm .v{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.dual .dm .u{display:inline;font-size:12.5px;font-weight:600;color:var(--ink2);margin-left:1px}
/* the card's closing line: label left, figure right, pinned to the card's own
   base so cards in a row end on the same rail. No rule above it — the share
   belongs to the figure above, and a rule read as a second metric. */
.dual .ds{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:14px;font-size:12.5px;color:var(--ink3);font-weight:600}
.tile>.dual,.panel>.dual{margin-top:auto}
.tile>.dual .ds,.panel>.dual .ds{margin-top:0}
.dual .ds b{font-weight:600;font-size:12.5px;color:var(--ink2)}
.dual .ds b.s-g{color:var(--g)} .dual .ds b.s-a{color:var(--a)} .dual .ds b.s-r{color:var(--r)}

.eph-split{display:flex;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--line);margin-top:12px}
/* edit 23.3 — white on a pastel is unreadable; the ink darkens with the
   bands. */
.eph-split div{display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--navy)}
.eph-leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px;color:var(--ink3)}
.eph-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.pair{display:flex;gap:24px;flex-wrap:wrap;margin-block:auto}
.pair>span{display:block}
.pair .k{display:block;font-size:11px;color:var(--ink3);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.pair .v{display:block;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.014em;margin-top:3px}
.pair .v .u{display:inline;font-size:12.5px;font-weight:600;color:var(--ink2)}

/* ---------------- state panel: one big number over four states ----------------
   Orders and rider status, per the two named format screenshots (edits 4.3, 4.4). */
.statp{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden;width:100%;text-align:left;
  transition:box-shadow .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
button.statp{cursor:pointer}
button.statp:hover{box-shadow:var(--sh2);border-color:#cdd5ea;transform:translateY(-1px)}
.statp .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:var(--pad) var(--pad) 0}
/* the headline can carry a second figure on its right, divided from the first */
/* Both halves share one grid, so name / caption / figure / delta land on the
   same four rows no matter how long either caption runs. Reserving a line was
   not enough: at ~1100px the rider caption wrapped and dropped its figure 15px
   below its neighbour. The divider is drawn by the right column's own cells,
   and row-gap is 0 so the four segments read as one continuous rule. */
/* The divider is drawn once, down the whole headline. Putting a border on each
   right-hand cell made it four disconnected segments, because the cells are
   content-height and do not meet. */
.statp .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 calc(var(--pad)*2);
  width:100%;align-items:start;position:relative}
.statp .two::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--line)}
.statp .two>.hd{display:contents}
.statp .two>.hd>*{grid-column:1}
.statp .two>.hd.rhs>*{grid-column:2}
.statp .two>.hd>.lb{grid-row:1}
.statp .two>.hd>.mx{grid-row:2}
.statp .two>.hd>.big{grid-row:3}
.statp .two>.hd>.foot{grid-row:4}
/* one anatomy for both halves — name, optional line, figure, delta — so the
   headline reads the same way as every panel under it (edit 8.1.2) */
.statp .hd{display:flex;flex-direction:column;min-width:0}
.statp .hd .lb{font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.01em}
/* the caption line is always present, empty or not, so the two figures in a
   split headline sit on one baseline instead of 19px apart */
.statp .hd .mx{font-size:11px;color:var(--ink3);margin-top:4px;line-height:1.45;min-height:16px}
.statp .hd .big{margin-top:8px}
.statp .hd .foot{padding-top:8px;margin-top:0}
/* 6.3 — both panels' state cells stand the same height */
.statp .c{min-height:78px;display:flex;flex-direction:column;justify-content:center}
.statp .big{display:block;font-size:34px;font-weight:700;letter-spacing:-.028em;line-height:1.12;color:var(--ink)}
.statp .top>span{min-width:0}
.statp .cells{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px;padding:12px var(--pad) var(--pad);margin-top:auto}
.statp .c{border:1px solid #d9dff1;border-radius:10px;padding:11px 8px;background:#f7f9fe;text-align:center}
.statp .c .cv{display:block;font-size:20px;font-weight:700;letter-spacing:-.016em;color:var(--ink)}
.statp .c .ck{display:block;font-size:11px;color:var(--ink2);font-weight:500;margin-top:2px}
.statp .c .ck b{font-weight:700}
.statp .c .cx{display:block;font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.35}

/* ---------------- grade split: proportional segments ----------------
   Per "Rider grade distribution format" — one hue lightening across the bands,
   width is the share (edit 4.19). */
.gsplit{display:flex;gap:8px;margin-top:4px}
.gsplit .sg{border-radius:11px;padding:16px 10px;min-width:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;transition:filter .15s var(--ease)}
.gsplit .sg:hover{filter:brightness(.96)}
.gsplit .sg .gl{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.gsplit .sg .gp{font-size:14px;font-weight:700;letter-spacing:-.014em}
.gsplit .sg .gd{font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px}
.gsplit .sg .gd svg{width:8px;height:8px;fill:currentColor}
.gsplit .sg.thin{padding-left:4px;padding-right:4px}
.gsplit .sg.thin .gp,.gsplit .sg.thin .gd{display:none}
/* a data row under the bands, aligned to them — the legend made the reader match
   colours back to bands, which was the hard way to read one number */
.growlab{font-size:11px;color:var(--ink3);margin:12px 0 5px;letter-spacing:.03em}
.grow{display:flex;gap:8px}
.grow .gr{border-radius:8px;background:#f4f6fc;border:1px solid var(--line2);padding:7px 4px;
  text-align:center;font-size:12.5px;font-weight:700;color:var(--ink2);min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
@media(max-width:900px){.grow{flex-direction:column}.grow .gr{width:100%!important;text-align:left;padding-left:14px}}

/* ---------------- store cards (edit 5.1) ----------------
   Shown instead of the single-store page whenever two or more stores are
   selected. Worst health first — the point of the view is triage. */
.scards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg)}
@media(max-width:1024px){.scards{grid-template-columns:minmax(0,1fr)}}
.scard{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh);padding:var(--pad);width:100%;text-align:left;
  cursor:pointer;transition:box-shadow .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.scard:hover{box-shadow:var(--sh2);border-color:#cdd5ea;transform:translateY(-1px)}
.scard .sh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scard .code{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);
  background:var(--line2);border-radius:8px;padding:5px 10px}
.scard .hp{font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:5px 11px;white-space:nowrap}
.hp-s{background:var(--gbg);color:var(--g)} .hp-m{background:var(--abg);color:var(--a)} .hp-w{background:var(--rbg);color:var(--r)}
.scard .row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:540px){.scard .row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* edit v2-fix31 — the second row is now four across like the first, so the
   card reads as two even rows rather than a row of four over a row of two.
   The 540px rule above still drops both to two columns on a phone. */
.scard .row4b{margin-top:8px;padding-top:8px;border-top:1px dotted var(--line)}
.scard .m .k{display:block;font-size:11px;color:var(--ink3);font-weight:700;letter-spacing:.03em}
.scard .m .v{display:block;font-size:20px;font-weight:700;letter-spacing:-.016em;color:var(--ink);margin-top:2px}
.scard .m .v .u{font-size:11px;font-weight:500;color:var(--ink2)}
.scard .m .x{display:block;font-size:11px;color:var(--ink3);margin-top:3px}
.scard .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  border-top:1px dotted var(--line);padding-top:12px}
.scard .row2 .k{display:block;font-size:11px;color:var(--ink3);font-weight:500}
.scard .row2 .v{display:block;font-size:20px;font-weight:700;color:var(--ink);margin-top:2px}
.scard .row2 .x{display:block;font-size:11px;color:var(--ink3);margin-top:3px}
.scard .sf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px dotted var(--line);padding-top:12px;margin-top:auto}
.scard .fm{font-size:12.5px;color:var(--ink2)}
.scard .fm b{font-weight:600;color:var(--ink)}
.scard .fm span{color:var(--ink3)}
.scard .pin{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink3);background:var(--card)}
.scard .pin:hover{color:var(--indigo);border-color:#c3cade}
.scard .pin svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.backbar{display:flex;align-items:center;gap:12px;margin-top:12px}
.backbar button{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:7px 12px;
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink2)}
.backbar button:hover{border-color:#c3cade;color:var(--indigo)}
/* EDIT 5, Q8 — rider status is a live view; outside Today it stands down */
.statp.off{opacity:.55}
.statp.off .big{color:var(--ink3)}

/* ---------------- multi-metric comparison chart (edit 4.9) ---------------- */
.mcbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mcbar .lbl{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.mcsel{position:relative}
.mcsel>button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:9px;padding:7px 11px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink2);
  max-width:460px;transition:border-color .15s var(--ease)}
.mcsel>button:hover{border-color:#c3cade}
.mcsel .pop{min-width:238px}
.mcsel .chips{display:flex;gap:4px;overflow:hidden}
.axnote{font-size:11px;color:var(--ink3)}
.dsel{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink3);font-weight:600}
.dsel select{font:inherit;font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;
  color:var(--ink);border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:7px 10px;cursor:pointer}
.dsel select:hover{border-color:#c3cade}

/* chart card */
.cc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:var(--pad)}
.cc h3{margin:0 0 2px;font-size:12.5px;font-weight:600;color:var(--ink)}
.cc .cap{font-size:12.5px;color:var(--ink3);margin:0 0 11px}
.cc svg{display:block;width:100%;height:auto}
/* `.cc svg{width:100%}` outspecifies every small icon placed inside a chart card.
   Each one has to be re-pinned or it renders as a giant glyph (QA 8d.26). */
.cc .trend svg{display:inline-block;width:10px;height:10px}
.cc .caret{display:inline-block;width:12px;height:12px;flex:none}
.cc .gsplit svg,.cc .gd svg{display:inline-block;width:8px;height:8px}
.cc .seg svg,.cc .sw svg{display:inline-block;width:13px;height:13px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:5px;vertical-align:-1px}
.legend .ln{display:inline-block;width:13px;height:0;border-top:1.5px dashed var(--graphite);margin-right:5px;vertical-align:3px}
.note{font-size:11px;color:var(--ink3);margin-top:9px;line-height:1.5}

/* attainment bar */
.abar{margin-top:11px}
.abar .row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.abar .row b{font-size:12.5px}
.abar .tr{height:8px;border-radius:999px;background:var(--line2);overflow:hidden}
.abar .fl{height:100%;border-radius:999px;background:var(--c2)}

/* table */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
@media(max-width:900px){table.t{min-width:520px}}
table.t th{text-align:left;font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--line)}
table.t th.n,table.t td.n{text-align:right}
table.t td{padding:10px;border-bottom:1px solid var(--line2)}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:#fafbfe}
.grade{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:700}
.gA{background:var(--gbg);color:var(--g)} .gB{background:var(--ibg);color:var(--indigo)}
.gC{background:var(--abg);color:var(--a)} .gD{background:#eceef5;color:var(--ink2)}
.mask{color:var(--ink3);display:flex;align-items:center;gap:8px;margin-top:2px;font-size:12.5px}
.mask button{border:0;background:none;cursor:pointer;color:var(--ink3);display:grid;place-items:center;padding:2px}
.mask button:hover{color:var(--indigo)}
.mask svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(11,27,84,.30);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);z-index:90;backdrop-filter:blur(1.5px)}
.scrim.on{opacity:1;pointer-events:auto}
.dw{position:fixed;top:0;right:0;bottom:0;width:900px;max-width:95vw;background:var(--bg);z-index:100;
  transform:translateX(100%);transition:transform .22s var(--ease);overflow-y:auto;
  box-shadow:-10px 0 40px rgba(11,27,84,.16);display:flex;flex-direction:column}
.dw[hidden]{display:none}
.dw.on{transform:none}
.dw.narrow{width:560px} .dw.wide{width:1180px}
.dwhd{position:sticky;top:0;background:var(--bg);padding:18px 22px 13px;border-bottom:1px solid var(--line);z-index:5}
.dwhd .r1{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dwhd h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.dwhd .r1 p{margin:3px 0 0;font-size:12.5px;color:var(--ink3)}
.xbtn{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  cursor:pointer;display:grid;place-items:center;color:var(--ink2);transition:background .15s var(--ease)}
.xbtn:hover{background:var(--line2);color:var(--ink)}
.xbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.dwecho{display:flex;gap:24px;margin-top:13px;flex-wrap:wrap}
.dwecho .e .k{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.dwecho .e .v{font-size:20px;font-weight:700;letter-spacing:-.016em;margin-top:2px}
.dwecho .e .v .tin{font-size:11px;font-weight:600;color:var(--ink3);letter-spacing:0;margin-left:8px}
.dwecho .e .v .u{font-size:12.5px;font-weight:600;color:var(--ink2)}
.dwfl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line)}
.dwfl .lbl{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.dwbody{padding:18px 22px 40px;display:flex;flex-direction:column;gap:18px}
.blk{display:flex;flex-direction:column;gap:12px}
.blk>h4{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--indigo)}
/* Audit F2 — the dashed rule had 17px beneath it and nothing above, so a
   section's content ran straight into the divider. The break now breathes
   on both sides and matches the 22px rhythm the page uses between rows. */
.blk+.blk{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}

/* funnel */
.fun{display:flex;flex-direction:column;gap:12px}
.fun .st{display:flex;flex-direction:column;gap:8px}
.fun .bar{height:42px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 15px;min-width:210px;transition:filter .15s var(--ease)}
.fun .st:hover .bar{filter:brightness(.97)}
.fun .bar .bk{font-size:12.5px;font-weight:700;letter-spacing:.01em;flex:none}
.fun .bar .bv{font-size:14px;font-weight:700;letter-spacing:-.012em}
.fun .bar .bp{font-size:12.5px;font-weight:700;flex:none;min-width:52px;text-align:right}
.fun .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-left:3px;min-width:0}
.fun .meta .mx{font-size:12.5px;color:var(--ink3)}
.fun .drop{font-size:12.5px;color:var(--a);font-weight:600;background:var(--abg);border-radius:6px;padding:2px 8px}
.linkish{border:0;background:none;padding:0;color:var(--indigo);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-size:12.5px}
.linkish:hover{text-decoration-thickness:2px}
.ibtn{border:0;background:none;cursor:help;color:var(--ink3);padding:0;margin-left:2px;
  width:26px;height:26px;display:inline-grid;place-items:center;border-radius:7px;vertical-align:-7px}
.ibtn:hover{background:var(--line2);color:var(--ink2)}
.ibtn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}

.empty{border:1px dashed var(--line);border-radius:11px;padding:26px 20px;text-align:center;color:var(--ink3);
  font-size:12.5px;background:#fbfcfe}
.empty b{display:block;color:var(--ink2);font-size:12.5px;margin-bottom:4px}

.mwrap{position:fixed;inset:0;display:none;place-items:center;z-index:150;background:rgba(11,27,84,.32);
  backdrop-filter:blur(2px);padding:20px}
.mwrap.on{display:grid}
.modal{background:var(--card);border-radius:16px;box-shadow:0 24px 70px rgba(11,27,84,.28);
  width:min(760px,100%);max-height:90vh;overflow:auto;padding:22px}
.modal .mhd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.modal .mhd h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.012em}
.cals{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cal .chd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal .chd b{font-size:14px;font-weight:600}
.cal .chd button{border:0;background:none;cursor:pointer;color:var(--indigo);padding:4px;border-radius:7px;
  display:grid;place-items:center}
.cal .chd button:hover{background:var(--ibg)}
.cal .chd button:disabled{color:#c3cade;cursor:not-allowed;background:none}
.cal .chd svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal table{width:100%;border-collapse:collapse}
.cal th{font-size:11px;font-weight:600;color:var(--ink3);padding-bottom:8px;text-align:center}
.cal td{padding:1px;text-align:center}
.cal td button{width:100%;aspect-ratio:1;border:0;background:none;border-radius:50%;cursor:pointer;
  font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.cal td button:hover:not(:disabled){background:var(--line2)}
.cal td button:disabled{color:#bfc6da;cursor:not-allowed}
.cal td.in{background:var(--ibg)}
.cal td.s{border-radius:50% 0 0 50%}
.cal td.e{border-radius:0 50% 50% 0}
.cal td.s.e{border-radius:50%}
.cal td.s button,.cal td.e button{background:var(--indigo);color:#fff;font-weight:700}
.cal td.today button{box-shadow:inset 0 0 0 1.5px var(--indigo)}
.msave{margin-top:22px;width:100%;border:0;border-radius:999px;background:var(--indigo);color:#fff;
  padding:14px;font-size:14px;font-weight:700;cursor:pointer}
.msave:hover:not(:disabled){background:#3230bd}
.msave:disabled{background:#e4e7f6;color:var(--ink3);cursor:not-allowed}
.mhint{margin:12px 0 0;font-size:12.5px;color:var(--ink3);text-align:center}
.tipbox{position:fixed;pointer-events:none;z-index:200;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh2);padding:9px 11px;font-size:12.5px;opacity:0;
  transition:opacity .12s var(--ease);max-width:240px}
.tipbox.on{opacity:1}
.tipbox .tt{font-weight:700;margin-bottom:5px;color:var(--ink)}
.tipbox .tr2{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:3px}
.tipbox .tr2 .l{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.tipbox .tr2 i{width:8px;height:8px;border-radius:2px;display:inline-block}
.tipbox .tr2 b{font-weight:700}

/* ---------------- responsive ---------------- */
.burger{display:none}
@media(max-width:1200px){
  .nav{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
       -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
@media(max-width:1260px){
  .fgrp.opt{display:none}
  .fbar.open .fgrp.opt{display:flex}
  .morebtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
    border-radius:9px;padding:8px 12px;cursor:pointer;font-size:12.5px;font-weight:600}
  .morebtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
}
@media(max-width:1300px){
  /* the top band stops being two halves before the cards inside it get cramped */
  .band{grid-template-columns:minmax(0,1fr);gap:var(--sb)}
}
@media(max-width:1024px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandL,.bandR{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .topbar{padding:10px 12px 0}
  .nav,.brand span{display:none}
  .burger{display:grid}
  .shell{padding:12px 12px calc(40px + env(safe-area-inset-bottom,0px))}

  .page{max-width:100%}
  /* EDIT 4.18 — Filters stays pinned at the top of the bar whether the bar is
     open or shut, so the control never moves out from under the thumb. */
  .fbar{flex-wrap:wrap;gap:8px}
  .fbar .fgrp{display:none}
  .fbar.open .fgrp{display:flex;width:100%}
  .fbar .stamp,.fbar .fspacer{display:none}
  .morebtn{order:-1}
  .cals{grid-template-columns:1fr;gap:20px}
  .modal{padding:16px}
  .morebtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
    border-radius:9px;padding:7px 11px;cursor:pointer;font-size:12.5px;font-weight:600}
  .morebtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .g3,.g2,.g4,.band,.bandL,.bandR{grid-template-columns:minmax(0,1fr)}
  .statp .cells{--cols:2!important}
  .gsplit{flex-direction:column}
  .gsplit .sg{width:100%!important;flex-direction:row;justify-content:space-between;padding:12px 14px}
  .gsplit .sg.thin .gp,.gsplit .sg.thin .gd{display:flex}
  .dw,.dw.narrow,.dw.wide{width:100%;max-width:100%}
  .dwhd,.dwbody{padding-left:15px;padding-right:15px}
  .fun .st{flex-direction:column;align-items:stretch;gap:8px}
  .fun .bar{width:100%!important}
  /* Edit 13.2 — this carried a 640px floor from the mock-up, which forced a
     sideways drag on every phone chart however the box was sized. The chart
     scales to the frame instead; the scroll stays for anything still too wide. */
  .scrollx{overflow-x:auto}
  .scrollx svg{min-width:0;width:100%}
  :root{
  /* ---- Mobile audit M1 ----------------------------------------------------
     --sg is a COLUMN gap on desktop and never competes with card padding.
     Collapsed to one column it becomes the vertical rhythm, leaving cards 12px
     apart while carrying 18px of padding inside - the gap between two cards
     smaller than the gap between a card's edge and its own content. Re-floor it
     at the padding value and widen the group break to keep the 1.6x ratio. */
  --sg:18px;
  --sb:30px;
  }

  /* ---- Mobile audit M4 ----------------------------------------------------
     The desktop scale shipped to phones unchanged: 70 nodes at 11px and 83 at
     12.5px on a 390px screen, carrying sub-labels and deltas rather than
     decoration. Lift the floor only; the ratios above it are unchanged. */
  .vs,.sub2,.tgt,.statp .c .ck,.eph-leg{font-size:12.5px}
  .u,.nm,.rk,.chip,.ct-lb,.lb,.t,.seg button,.morebtn{font-size:12.5px}
  /* SVG <text> stays at 11px - chart axis labels are laid out against
     that metric and resizing them reflows the plot. */

  /* ---- Mobile audit M5 ----------------------------------------------------
     A drawer IS the screen on mobile, so scrolling off its end chained into the
     page behind it and dismissing could land the user somewhere they never
     navigated to. */
  .dwpane,.dw{overscroll-behavior:contain}

  /* ---- Mobile audit M2 ----------------------------------------------------
     A stood-down panel has, by definition, nothing to report. Side by side on
     desktop it costs nothing; stacked on a phone it was a full card sitting
     between the user and the first working metric, pushing that metric to
     y=659 on an 844px screen. The guidance is worth keeping - the card around
     it is not. Collapse to a single notice row. */
  .statp.off{height:auto;opacity:.72}
  .statp.off .big,.statp.off .mx{display:none}
  .statp.off .top{padding-bottom:10px}
  .statp.off .cells{padding-top:0;gap:0;--cols:1!important}
  .statp.off .ck{font-size:12.5px!important;line-height:1.45}

  /* Edit 16.10.1 — the eight Control Tower tab labels wrapped to three lines on
     a phone and none of them navigate anywhere in this dashboard. The mark and
     the updated stamp carry the header on their own. */
  nav [aria-current]{display:none}
  nav span[title]{display:none}

  /* Edit 16.10.2 — the open filter drawer stacked one control per line, so the
     set ran off the bottom of the screen. Two per line with tighter gutters
     keeps the whole set in view. */
  .fbar.open{gap:6px 8px}
  .fbar.open .fgrp{width:calc(50% - 4px);min-width:0}
  .fbar.open .fgrp.opt{width:calc(50% - 4px)}
  .fbar.open .fgrp .msel,.fbar.open .fgrp .cycle{min-width:0;flex:1}
  .fbar.open .fgrp .ct-lb{flex:none}
  .fbar.open .seg{width:100%}
  .fbar.open .seg button{flex:1}

}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
/* late overrides that depend on the markup above */

svg.dim rect.hc{opacity:.32;transition:opacity .12s var(--ease)}
svg.dim rect.hc.on{opacity:1}
rect.hb{transition:fill-opacity .12s var(--ease)}
/* EDIT 4.13 — the rider OTP bands read as one soft block until one is hovered */
rect.rb{fill-opacity:.45}
rect.rb:hover{fill-opacity:1}
.chart{position:relative}
.dwfl .cycle .val{min-width:96px;min-height:26px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
.blk .cc h3:empty{display:none}
.blk .cc h3:empty + .cap{margin-top:0}


/* ---- Mobile audit M3 ------------------------------------------------------
   Every control cleared WCAG 2.5.8's 24px, but that is the floor for any
   pointer. On a thumb the granularity toggle (30px) and the drawer's only exit
   (34px) were the two that mattered. Scoped to coarse pointers so desktop
   density is untouched. */
.linkish{min-height:24px}
@media(pointer:coarse){
  .seg button,.morebtn,.dwx,.dw .x,.dwpane .x,.linkish,.pill,.chipv,
  .fbar button,.fbar select,.dwfl button,.dwfl select{min-height:44px}
  .seg{padding:4px}
  .seg button{padding-block:0;display:inline-flex;align-items:center}
}

/* edit v2-fix7/12 — a figure that is a PLACEHOLDER, not a reading: greyed and
   set in italics so it cannot be mistaken for live data while the live APIs
   are not connected. Paired with a sub-line that says what it waits for. */
.fig.s-muted,.panel .fig2.s-muted,.statp .big.s-muted{
  color:var(--ink3);font-style:italic;opacity:.72}

/* edit v2-fix44.6 — the master stack: a text column and a chart column, the
   same grid on every row, so one hour sits in one pixel column down the whole
   stack (spec §6). The text column is fixed so the charts start at the same x. */
/* edit v2-fix82 — the text column set each row's height (79px of name, worst,
   chip and target) while the driver charts were 64px and 42px, so the charts
   floated mid-row and the gaps between them came out uneven (22px, 21px).
   Rows are top-aligned with equal 14px padding, so the gap between one chart
   and the next is 28px everywhere, and a dashed rule separates them. */
.mstack{display:grid;grid-template-columns:250px minmax(0,1fr);gap:10px;
  align-items:start;padding:14px 0}
.mstack+.mstack{border-top:1px dashed rgba(20,26,51,.14)}
.mstack:first-child{padding-top:0}
.mstack:last-child{padding-bottom:0}
.mstack-t{display:flex;flex-direction:column;gap:3px;padding:0}
/* 82.3 — the state and the target read as one line: "off target · ≥ 95%" */
.mstack-s{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mstack-n{font-size:12.5px;font-weight:600;color:var(--ink);display:flex;
  align-items:center;gap:6px}
.mstack-r{font-size:10px;font-weight:700;color:var(--ink3);background:var(--line2);
  border-radius:999px;min-width:17px;height:17px;display:inline-flex;
  align-items:center;justify-content:center}
/* .mstack-v removed by fix 82.2 — the "worst …" line is gone. */
.mstack-g{font-size:11px;color:var(--ink3)}
.mstack-c{font-size:10px;font-weight:700;letter-spacing:.03em;border-radius:999px;
  padding:2px 8px;width:-moz-max-content;width:max-content}
.mstack-c.ok{color:#2E7A4D;background:rgba(46,122,77,.10)}
.mstack-c.bad{color:#C2352B;background:rgba(194,53,43,.10)}
.mstack-ch{min-width:0}
@media(max-width:900px){
  .mstack{grid-template-columns:1fr;gap:2px}
  .mstack-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px}
}

/* edit v2-fix53 — the Riders online panel. Its title was in the right-aligned
   `.rt` block, which ran it into its meta; and on a period with no live view a
   grey em dash sat where a figure goes, reading as "still loading". The panel
   keeps the height of Total orders beside it so the row stays even. */
.statp.ronline{display:flex;flex-direction:column;padding:18px;opacity:1}
.ronline .ro-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ronline .ro-title{font-size:12.5px;font-weight:600;color:#3D4668}
.ronline .ro-meta{font-size:11px;font-weight:500;color:var(--ink3);white-space:nowrap}
.ronline .ro-body{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:12px 4px 4px}
.ronline .ro-msg{font-size:12.5px;line-height:1.5;color:var(--ink2);max-width:36ch}

/* edit v2-fix59 — the OTP + 3 by grade row. Cells were sized to the band
   segments above, so a narrow band crushed its own figure; they are now four
   equal columns on the same 16px gap the cards use, each labelled with its
   grade so the row reads without tracing a line up to the strip. */
.grow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:6px}
.gr4{font-size:12.5px;color:var(--ink2);background:var(--line2);border-radius:9px;
  padding:7px 10px;text-align:center;white-space:nowrap}
.gr4 b{color:var(--ink);font-weight:600}
@media(max-width:540px){.grow4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* the meta line sits flush with the panel's left edge, like every other label */
.growlab{padding-left:0}

/* edit v2-fix55 / fix 57 — one rhythm for the cards.
   55.2.5: every card is a column with its footer pinned to the bottom, so a
   row of cards that stretch to the tallest no longer leaves the delta floating
   mid-card (OR2A) or a gap above it (Supply attainment).
   57.1: 16px between cards both ways, replacing 12px across / 22px down.
   57.2: 18px padding on every panel, including the two `.statp` cards that
   had none and relied on their inner elements. */
.panel{display:flex;flex-direction:column}
.panel .foot{margin-top:auto;padding-top:10px}
.g2,.g3,.g4,.row4{gap:16px}
.g2.mtb,.g3.mtb,.g4.mtb,.mtb{margin-top:16px}
.statp{padding:18px}
/* 55.5 — the EPH split legend ran to two lines and set the row's height. */
.panel .legend{gap:6px 10px;font-size:11px}
.panel .legend span{white-space:nowrap}

/* edit v2-fix57.3 — the type scale, collapsed onto the stated pairs. The page
   was using fourteen size/weight combinations; these rules retire the three
   that are neither a value nor a heading. 650 and 10.5px were removed at
   source above; this catches the remaining 11/600 and 12.5/700 text, which are
   labels and table headers rather than figures. Values (.fig, .fig2, .rv, .big,
   .cv) keep their weight — they are the exception the table names. */
/* NOTE: a blanket font-weight:500 on these label classes was tried and
   REVERTED — it pushed eight compliant 12.5/400 elements to 12.5/500, adding an
   off-scale pair rather than removing one. The remaining 11/600 and 12.5/700
   text lives in specific rules that need retiring one at a time, which is the
   outstanding part of 57.3. */

/* edit v2-fix51 — the chip's tooltip. Same box as the charts' (.tipbox), but
   it holds one sentence rather than a value table, so it wraps and sets its
   own width instead of hugging a row. */
.tipbox.hint{max-width:252px;white-space:normal;line-height:1.45;
  font-size:12.5px;font-weight:400;color:var(--ink2);padding:9px 11px}

/* edit v2-fix61.5.2 — the rider modal's summary row carries five tiles (EPH
   joined the four), so it overrides .g4's four columns rather than wrapping
   one tile onto a line of its own. */
.g4.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:760px){.g4.g5{grid-template-columns:repeat(2,1fr)}}

/* edit v2-fix57.3 — the last pairs off the scale in the table, each fixed
   where it is set rather than by a blanket rule. A blanket weight was tried in
   iteration 29 and pushed eight COMPLIANT 12.5/400 elements off-scale, so this
   names its targets.
     · "All cities" is a <b> inside the filter popover: a label, not a value,
       so it takes the 12.5/600 title weight rather than 700.
     · The EPH band legend is a share, not a value — 11/500 like other meta. */
.pop label b{font-weight:600}

/* edit v2-fix57.3 — the phone floor lifts these to 12.5px, which is on the
   scale, but 12.5/500 is not: the scale allows 12.5/400 and 12.5/600 only.
   They are meta, so they take 400 at this width rather than growing bolder. */
@media(max-width:540px){
  /* `.trend .vs` is two classes, so a bare `.vs` here loses on specificity
     and the rule silently did nothing — matched selector, matched weight. */
  .trend .vs,.statp .c .ck{font-weight:400}
}

/* edit v2-fix66.4.1 — a slot penalty is a link: the count on the line opens
   to the individual slots it was charged for. Dotted underline so it reads as
   "there is more here" rather than as a navigation link. */
.slotpen{color:#3B39D4;border-bottom:1px dotted #3B39D4;cursor:help;
  text-decoration:none;outline-offset:2px}
.slotpen:focus-visible{outline:2px solid #3B39D4}
/* the penalty tooltip lists rows, so it needs more width than a sentence */
.tipbox.hint:has(.slotpen),.tipbox.hint{max-width:340px}

/* edit v2-fix57.3 — the last 12.5/700 elements move to 12.5/600, so 57.5's
   check ("only the pairs above") passes exactly.

   57.3 says "12.5/700 -> 12.5/600 unless it's a value", and these ARE figures.
   But the table's value rows are 26/700 (card) and 34/700 (hero): a 12.5px
   figure is not a value in that sense, so the carve-out is reading as a guard
   on those two rows rather than a licence for a third size the table does not
   list. Reverting is one line per rule if the carve-out was meant literally. */

/* edit v2-fix57.3 (store-card view) — these three were off the scale and the
   check never saw them: until fix 87.3 started applying a saved multi-store
   set on open, the landing view was always the panels, and the card grid only
   appeared after a manual multi-store selection. 14/700 and 11/600 are not on
   the table; the store code takes the 12.5/600 card-title pair, the unit suffix
   the 11/500 meta pair, and the footer's bold the 12.5/600 weight. */

/* Type: the eight pairs the scale allows (QA guide, iteration 31) —
   11/400 · 11/500 · 11/700 · 12.5/400 · 12.5/600 · 20/700 · 26/700 · 34/700.
   The first pass of these rules used 11.5 and 13, which are not on it. */
/* ── "Download report" — edit v2-fix84 ──────────────────────────────────── */
/* The button sits in the filter bar before the Updated stamp (84.3). It is a
   real action, so it reads as one — but it is not the page's primary act, so
   it stays an outline button rather than a filled one competing with the
   store chips beside it. */
.dlbtn { display:inline-flex; align-items:center; gap:7px; padding:6px 11px;
  border:1px solid var(--line); border-radius:9px; background:var(--card);
  font-size:12.5px; font-weight:600; color:var(--ink2); min-height:30px;
  white-space:nowrap; transition:border-color .14s, color .14s, background .14s }
.dlbtn:hover { border-color:#B9C2DA; color:var(--ink); background:#F7F9FD }
.dlbtn svg { flex:none; opacity:.8 }

.dlg { width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  padding:24px; border-radius:16px; background:var(--card);
  box-shadow:var(--sh2) }

/* label / value rows, so the three choices line up on one left edge */
.dlrow { display:flex; align-items:center; gap:14px; padding:11px 0;
  border-top:1px solid rgba(20,26,51,.09) }
.dlrow:first-of-type { border-top:0 }
.dlk { flex:none; width:70px; font-size:12.5px; font-weight:600;
  color:var(--ink2) }
.dlv { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0 }
.dlv input[type="date"] { font-size:12.5px; padding:6px 8px; border-radius:9px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  min-height:32px }
.dlchk { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:400;
  color:var(--ink) }
.dlnote { margin:0 0 2px 84px; font-size:11px; color:var(--ink3);
  line-height:1.5 }

/* One contents option. The estimate line is the point of the dialog, so it
   gets its own line under the label rather than being squeezed beside it. */
.dlopt { display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line); border-radius:11px; cursor:pointer;
  transition:border-color .14s, background .14s }
.dlopt:hover { border-color:#B9C2DA; background:#F9FAFE }
.dlopt:has(input:checked) { border-color:#3B39D4; background:#F6F6FE }
.dlopt.off { cursor:not-allowed; opacity:.72; background:#FAFBFD }
.dlopt.off:hover { border-color:var(--line); background:#FAFBFD }
.dlopt input { margin-top:2px; flex:none; accent-color:#3B39D4 }
.dlopt span { display:flex; flex-direction:column; gap:2px; min-width:0 }
.dlopt b { font-size:12.5px; font-weight:600; color:var(--ink) }
.dlopt i { font-style:normal; font-size:11px; color:var(--ink3) }
.dlopt em { font-style:normal; font-size:11px; font-weight:500;
  color:var(--ink2); font-variant-numeric:tabular-nums }
/* The refusal reason. Amber, not red: the selection is too big, which is a
   limit being explained, not an error the user made. */
.dlopt u { text-decoration:none; font-size:11px; color:#8A5A12;
  background:#FDF6E7; border-radius:7px; padding:5px 7px; line-height:1.45 }

.dlerr { margin:12px 0 0; font-size:11px; color:#8E2B22; background:#FDF1EF;
  border:1px solid #F3D4CF; border-radius:10px; padding:9px 11px;
  line-height:1.5 }
.dlok { margin:12px 0 0; font-size:11px; color:#1C5E3F; background:#EFF8F3;
  border:1px solid #CFE8DC; border-radius:10px; padding:9px 11px }

/* "Preparing… 40%". The fill is the progress; the text sits over it so the
   bar does not need a second line of its own. */
.dlbar { position:relative; margin:14px 0 0; height:30px; border-radius:9px;
  background:#EEF1F9; overflow:hidden; display:flex; align-items:center }
.dlbarfill { position:absolute; inset:0 auto 0 0; background:#DFE0FB;
  transition:width .35s ease }
.dlbar span { position:relative; padding:0 11px; font-size:11px;
  font-weight:500; color:var(--ink2); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.dlgo { border:0; border-radius:10px; padding:9px 18px; font-size:12.5px;
  font-weight:600; color:#fff; background:#3B39D4; min-height:36px }
.dlgo:disabled { background:#AFB4D8 }
.chipish { border:1px solid var(--line); border-radius:8px; padding:4px 9px;
  font-size:11px; color:var(--ink2); background:var(--card) }
.chipish:hover { border-color:#B9C2DA; color:var(--ink) }

@media (max-width:560px) {
  .dlg { padding:18px; border-radius:14px }
  .dlrow { align-items:flex-start; flex-direction:column; gap:7px }
  .dlk { width:auto }
  .dlnote { margin-left:0 }
}

/* ── "Download this view" — edit v2-fix88 ───────────────────────────────── */
/* An icon, not a labelled button: it sits beside Close in a drawer header
   that already carries a title, a subtitle and a period cycle, and a third
   worded control there reads as clutter. The tooltip and aria-label both say
   "Download this view", so nothing depends on recognising the glyph. */
.vdl { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--ink2); transition:border-color .14s,
  color .14s, background .14s }
.vdl:hover { border-color:#B9C2DA; color:var(--ink); background:#F7F9FD }
.vdl[aria-expanded="true"] { border-color:#3B39D4; color:#3B39D4 }
.vdl:disabled { color:var(--ink3) }
.vdlspin { width:13px; height:13px; border:2px solid #C9CEE4;
  border-top-color:#3B39D4; border-radius:50%; animation:vdlsp .7s linear infinite }
@keyframes vdlsp { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce) { .vdlspin { animation-duration:2.4s } }

.vdlmenu { position:absolute; top:38px; right:0; z-index:12; width:268px;
  padding:6px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); box-shadow:var(--sh2); display:flex;
  flex-direction:column; gap:2px }
.vdlmenu button { display:flex; flex-direction:column; gap:1px;
  align-items:flex-start; text-align:left; padding:8px 10px; border-radius:9px;
  border:0; background:transparent; width:100% }
.vdlmenu button:hover { background:#F4F6FC }
.vdlmenu b { font-size:12.5px; font-weight:600; color:var(--ink) }
.vdlmenu i { font-style:normal; font-size:11px; font-weight:500; color:var(--ink3);
  line-height:1.45 }
.vdlerr { position:absolute; top:38px; right:0; z-index:12; width:268px;
  padding:9px 11px; border:1px solid #F3D4CF; border-radius:10px;
  background:#FDF1EF; color:#8E2B22; font-size:11px; line-height:1.5 }

/* ── a search hit — edit v2-fix86.3 ─────────────────────────────────────── */
/* 86.3: "the table shows only matching riders, with the match highlighted".
   A pale indigo wash rather than the browser's yellow <mark>: the row is
   already the answer to the search, so the mark only has to say WHICH part
   matched — on a filtered table a loud highlight is noise on every row.
   Inherits its colour and weight, so it never adds a type pair. */
mark.hit, span.hit { background:#E4E4FB; color:inherit; font:inherit;
  border-radius:3px; padding:0 1px; -webkit-box-decoration-break:clone; box-decoration-break:clone }
span.hit { letter-spacing:inherit }
@media (prefers-contrast:more) {
  mark.hit, span.hit { background:#C9C9F6; outline:1px solid #3B39D4 }
}

/* ── the download log — edit v2-fix90.2 ─────────────────────────────────── */
/* Wider than the other dialogs because it is a table of eight columns, and a
   560 px box would make every row wrap. Capped at the viewport so the header
   and its filters stay put while the rows scroll. */
.dlgwide { width:100%; max-width:1080px; max-height:88vh; display:flex;
  flex-direction:column; padding:24px; border-radius:16px;
  background:var(--card); box-shadow:var(--sh2) }

.lgfilt { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 0 12px }
.lgfilt input { font-size:12.5px; padding:7px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  min-height:34px }
.lgfilt input[type="text"], .lgfilt input:not([type]) { min-width:210px }

.lgwrap { overflow:auto; border:1px solid var(--line); border-radius:11px;
  flex:1 1 auto; min-height:0 }
.lgtab { width:100%; border-collapse:collapse; font-size:12.5px }
.lgtab th { position:sticky; top:0; z-index:1; background:var(--line2);
  padding:8px 10px; color:var(--ink3); font-weight:600; white-space:nowrap }
.lgtab td { padding:8px 10px; color:var(--ink2);
  border-top:1px solid var(--line2); vertical-align:top }
.lgtab tbody tr:hover td { background:#F8FAFE }

@media (max-width:720px) {
  .dlgwide { padding:16px; border-radius:14px }
  .lgfilt input { min-width:0; flex:1 1 140px }
}

/* ── the mobile focus view — edit v2-fix91 ──────────────────────────────── */
/* Type here stays on the eight-pair scale: 34/700 for the figures (91.3.2
   names it), 26/700 for the list's, 12.5/600 for labels, 11/400 and 11/500
   for targets and captions. */

/* 91.2.2 — "Focus" with a switch, 44 x 44 px of touch target. The label is a
   word, not an icon: a switch with no name is a guess. */
.fsw{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink2)}
.fsw .l{font-size:12.5px;font-weight:600}
.fsw .tr{width:34px;height:20px;border-radius:999px;background:#D5DAE8;
  position:relative;flex:none;transition:background .16s}
.fsw .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;
  height:16px;border-radius:50%;background:#fff;transition:transform .16s;
  box-shadow:0 1px 2px rgba(11,27,84,.3)}
.fsw[aria-checked="true"]{border-color:#3B39D4;color:#3B39D4}
.fsw[aria-checked="true"] .tr{background:#3B39D4}
.fsw[aria-checked="true"] .tr::after{transform:translateX(14px)}
@media(prefers-reduced-motion:reduce){.fsw .tr,.fsw .tr::after{transition:none}}

/* 91.5.4 — the way back, once focus has turned itself off. */
.fchip{display:block;width:100%;margin:0 0 12px;padding:10px 12px;
  border:1px solid #C9CEE4;border-radius:11px;background:#F2F3FD;
  color:var(--ink2);font-size:12.5px;text-align:left;min-height:44px}
.fchip b{color:#3B39D4;font-weight:600}

/* 91.3 — one store, one card. */
.fcard{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:16px;margin-bottom:12px}
.fcard header h2{font-size:12.5px;font-weight:600;color:var(--ink2);
  margin:0 0 2px}
.fcard header .st{display:flex;align-items:center;gap:6px;margin:0 0 12px;
  font-size:11px;color:var(--ink3)}
.fcard header .st .dot{width:6px;height:6px;border-radius:50%;
  background:var(--g);flex:none}

/* edit v2-fix105.2 — one store: three full-width panels, one under another,
   12px apart. Replaces 91.9.1's three tiles in a row (about 99px each), where
   a 34px "131.5%" ran past its tile and every delta wrapped. Below 360px the
   layout is the same: each panel is already full width. */
.fmets{display:flex;flex-direction:column;gap:12px}
.fmet{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
  padding:16px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);text-align:left;min-height:44px;overflow:hidden}
.fmet .r1{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-width:0}
.fmet .k{font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.1;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap}
/* the delta on ONE line, 11/500 (105.2.3.1) */
.fmet .trend{font-weight:500;white-space:nowrap;line-height:1.1}
.fmet .r2{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:nowrap}
.fmet .v{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.fmet .v.off{color:var(--r)}
.fmet .v .u{font-size:12.5px;font-weight:600;margin-left:1px;color:var(--ink3)}
.fmet .v.off .u{color:var(--r)}
.fmet .t{font-size:11px;font-weight:400;color:var(--ink3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.fmet .t.off{color:var(--r)}

/* 91.9.2 — the sparkline: 40px, no axes, the band behind it. */
.fspark{width:100%;margin-top:1px}
.fsparkw{position:relative;width:100%;height:40px}
.fspark svg{display:block;width:100%;height:40px}
.fsdot{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:#17202A;pointer-events:none}
.fsparkc{margin:2px 0 0;font-size:11px;font-weight:400;line-height:1.1;
  color:var(--ink3);white-space:nowrap}
.fsparkc b{font-weight:500;color:var(--ink)}

.fall{display:block;width:100%;margin-top:12px;padding:11px;min-height:44px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:#3B39D4;font-size:12.5px;font-weight:600}

/* 91.4 / edit v2-fix105.3 — several stores: the card header, a sort control,
   a totals panel, then one panel per store, 8px apart. Every panel uses the
   SAME three-column grid (105.3.3), so the totals sit over the stores'
   columns and each value under its heading. */
.flist{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:14px;margin-bottom:12px}
.ftot{margin:0 0 10px;font-size:12.5px;color:var(--ink2);line-height:1.5}
.ftot b{font-weight:600;color:var(--ink)}
.fsort{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.fsort>span{font-size:11px;color:var(--ink3)}
.fsort button{padding:7px 11px;min-height:36px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink2);font-size:11px;
  font-weight:500}
.fsort button[aria-pressed="true"]{border-color:#3B39D4;background:#F2F3FD;
  color:#3B39D4;font-weight:700}
.fsec{margin:10px 0 6px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3)}
.fnone{margin:0 0 8px;font-size:11px;color:var(--ink3)}
.flist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.flist ul+ul{margin-top:8px}
.fstore{border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:10px 12px;overflow:hidden}
.ftotp{background:#F7F8FC;margin-bottom:8px}
.fstore .fsh{display:flex;align-items:baseline;gap:8px;width:100%;
  min-height:20px;text-align:left;margin-bottom:2px}
.fstore .fsh .code{font-size:12.5px;font-weight:600;color:var(--ink)}
.fstore .fsh .n{font-size:11px;font-weight:400;color:var(--ink3)}
.fstore .fsh .chev{margin-left:auto;font-size:20px;font-weight:700;line-height:.8;
  color:var(--ink3)}
.fstore .hot{font-size:11px;font-weight:500;color:#8E2B22;background:#FDF1EF;
  border-radius:6px;padding:1px 5px}
.f3{display:grid;grid-template-columns:repeat(3,1fr);-moz-column-gap:8px;column-gap:8px}
.f3 .fc{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-width:0;min-height:44px;text-align:left;overflow:hidden}
.f3 .fc .k{font-size:11px;font-weight:500;line-height:1.15;color:var(--ink3);white-space:nowrap}
.f3 .fc .v{font-size:20px;font-weight:700;color:var(--ink);line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.f3 .fc .v i{font-style:normal;font-size:11px;font-weight:500;
  color:var(--ink3);margin-left:1px}
.f3 .fc.off .v{color:var(--r)}
.f3 .fc .d{font-size:11px;font-weight:500;line-height:1.15;white-space:nowrap}
.f3 .fc .d.up{color:var(--g)} .f3 .fc .d.dn{color:var(--r)}
.f3 .fc .d.nu{color:var(--ink3)}
.fmore{display:block;width:100%;margin-top:8px;padding:11px;min-height:44px;
  border:1px dashed var(--line);border-radius:11px;background:var(--card);
  color:#3B39D4;font-size:12.5px;font-weight:600}

/* edit v2-fix91.10 — focus view trims the chrome above the list so more rows
   fit before scrolling. Measured at 390px: nav 65 + strip 108 + wrapper 72 +
   list padding 28 + totals 38 + sort 36 + "Show all metrics" 44 = 391px of
   chrome, leaving 453px — eight 56px rows. The three list elements are all
   required (91.4.1, 91.4.3, 91.4.5) and 91.4.2 fixes the row at 56px, so the
   only honest slack is padding. */
@media(max-width:760px){
  body.focus-view .fstrip{padding-top:8px;padding-bottom:8px}
  body.focus-view .fstrip .fbar{padding-top:8px;padding-bottom:8px}
  body.focus-view .flist{padding:10px}
  /* The last 6px. After the trims above, the tenth row's bottom measured
     848px against an 844px screen — four pixels short. These two margins are
     the only slack left that is not a touch target or a required element. */
  body.focus-view .ftot{margin-bottom:6px}
  body.focus-view .fsort{margin-bottom:6px}
}

/* ── grade bar and its rows, one grid — edit v2-fix102 ──────────────────── */
/* The bar and both data rows take their `grid-template-columns` from the same
   share string, set inline from the data (102.4), so a cell cannot sit under
   the wrong grade. `.eph-split` was a flex row; as a grid it keeps the same
   2px seams between segments. */
.gbar{display:grid;gap:2px}
.gbar.grow-g{gap:2px;margin-top:6px}
/* The row cells keep .gr4's look but drop its fixed centring, because a
   narrow cell needs its text to shrink rather than overflow. */
.gbar.grow-g .gr4{display:flex;align-items:center;justify-content:center;
  text-align:center;padding:5px 2px;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
@media(max-width:540px){ .gbar.grow-g{gap:2px} }

/* ── the download dialog's store checklist — edit v2-fix94.2 ────────────── */
.dlpick-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dlsearch{width:100%;padding:7px 10px;font-size:12.5px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  min-height:34px}
/* 94.2.1 — eight rows visible, then it scrolls. 8 x 30px + 2px of border. */
.dlpick{max-height:242px;overflow-y:auto;border:1px solid var(--line);
  border-radius:10px;background:var(--card)}
.dlpr{display:grid;grid-template-columns:18px 1fr auto;align-items:center;
  gap:8px;padding:6px 10px;min-height:30px;font-size:12.5px;cursor:pointer}
.dlpr+.dlpr{border-top:1px solid var(--line2)}
.dlpr:hover{background:#F7F9FD}
.dlpr input{margin:0;accent-color:#3B39D4}
.dlpr .c{font-weight:600;color:var(--ink)}
.dlpr .n{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.dlpr:has(input:checked){background:#F6F6FE}
.dlpr:has(input:checked) .c{color:#3B39D4}

/* ── Admin: users, roles and store access — edit v2-fix104 ─────────────── */
/* Type on the canonical scale only: 20/700 headings, 12.5/600 and 12.5/400
   body, 11/400–11/700 captions and chips. */
.admwrap{position:fixed;inset:0;z-index:62;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(11,27,84,.38)}
.adm{display:flex;flex-direction:column;max-height:calc(100vh - 48px);overflow:auto}
.admhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.admhead h2{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px}
.admtabs{margin-top:2px}
.admclose{border:1px solid var(--line);border-radius:9px;padding:7px 12px;
  font-size:12.5px;font-weight:400;color:var(--ink2);min-height:32px;background:var(--card)}
.admbanner{margin:0 0 12px;padding:10px 12px;border:1px solid #F0D9A8;
  border-radius:10px;background:#FFF8EA;color:#6B4A00;font-size:12.5px;font-weight:400}
.admbanner b{font-weight:600}
.admbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.admbar .dlsearch{flex:1 1 220px;min-width:0}
.admsel{padding:6px 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);font-size:12.5px;font-weight:400;min-height:32px}
.admtable{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.admtr{display:grid;width:100%;text-align:left;background:var(--card);
  grid-template-columns:1.4fr 1.6fr .9fr .7fr 1.7fr 1fr 1fr;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line2);font-size:12.5px;
  font-weight:400;color:var(--ink2);align-items:center}
.admtr:first-child{border-top:0}
button.admtr:hover{background:#F7F8FC}
.admth{background:#F7F8FC;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3)}
.admtr .nm{font-weight:600;color:var(--ink)}
.admtr .em,.admtr .st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rolechip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;
  font-weight:500;background:var(--line2);color:var(--ink2)}
.rolechip.admin{background:#EEF1FB;color:#3B39D4}
.okc{font-size:11px;font-weight:500;color:var(--g)}
.warnc{font-size:11px;font-weight:500;color:#8A5A00}
.admside-bg{position:fixed;inset:0;z-index:64;background:rgba(11,27,84,.18);
  display:flex;justify-content:flex-end}
.admside{width:100%;max-width:520px;height:100%;overflow-y:auto;padding:24px;
  background:var(--card);box-shadow:var(--sh2)}
.admf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.admf>span{flex:0 0 64px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.admf input,.admf select{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);
  border-radius:9px;font-size:12.5px;font-weight:400;background:var(--card)}
.admwarn{margin:-6px 0 12px 76px;font-size:11px;font-weight:500;color:#8A5A00}
.admfoot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line2);flex-wrap:wrap}
.admrm{border:0;background:none;color:#C2352B;font-size:12.5px;font-weight:600;
  padding:6px 0;min-height:32px}
.admconfirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;
  font-weight:400;color:var(--ink2)}
.admconfirm .admrm{padding:6px 10px;border:1px solid #F2C5BF;border-radius:9px;
  background:#FDF1EF}
.admimp{max-height:calc(100vh - 260px);overflow-y:auto;margin-top:8px}
.dlpr.imp.off{opacity:.55}
.dlemb{display:block}
@media(max-width:760px){
  .admwrap{padding:0}
  .adm{max-height:100vh;height:100%;border-radius:0}
  .admtr{grid-template-columns:1fr 1fr;row-gap:2px}
  .admth{display:none}
}

/* edit v2-fix104.9 — "You don't have access yet." */
.noacc{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.noacc>div{max-width:420px;text-align:center}
.noacc img{margin:0 auto 20px;height:auto}
.noacc h1{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px}
.noacc p{font-size:12.5px;font-weight:400;color:var(--ink2);margin:0 0 16px}
.noacc p b{font-weight:600}
.hover\:border-border-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-subtle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:from-\[hsl\(168\2c 80\%\2c 38\%\)\]:hover {
  --tw-gradient-from: hsl(168,80%,38%) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(168 80% 38% / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-\[hsl\(168\2c 55\%\2c 28\%\)\]:hover {
  --tw-gradient-to: hsl(168,55%,28%) var(--tw-gradient-to-position);
}
.hover\:text-primary-hover:hover {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.hover\:text-text:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-primary\/30:focus {
  --tw-ring-color: rgb(79 70 229 / 0.3);
}
.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
@media (min-width: 768px) {

  .md\:block {
    display: block;
  }
}
@media (min-width: 1024px) {

  .lg\:block {
    display: block;
  }
}