/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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 {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
}
.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 {
  --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(3px + 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-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:#c2352b;
  --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}
/* edit v3-60 — search pinned at the top of the City and Store lists */
.pop .msq{position:sticky;top:0;z-index:1;background:var(--card);padding:6px 0 4px;margin-bottom:2px}
.pop .msq input{width:100%;height:32px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
  font-size:12.5px;color:var(--ink);background:var(--card);outline:none}
.pop .msq input:focus{border-color:var(--indigo)}
.pop .msq-none{padding:7px 9px;font-size:12.5px;color:var(--ink3)}

/* 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. */
/* edit v3-63.2 — six tiles: slot hours and hours logged side by side */
.g4.g5{grid-template-columns:repeat(6,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}

/* ── the mobile UAT — edit v2-fix111 (rules up to 760 px; desktop unchanged) ── */
@media(max-width:760px){
  /* 111.2.4 — "What moved it": tighter rows so three metrics fit in 520 px
     (the charts themselves are 140 / 96 / 96 px, fixed by the spec). */
  .mstack{padding:8px 0}
  .blk .cc:has(> .mstack){padding:10px}
  /* 111.1.5 — the drawer's type onto the canonical scale */
  .blk>h4{font-weight:600}
  .dwpane h2{font-weight:700 !important}
  .mstack-c,.mstack-r{font-size:11px}
  .dwpane .linkish{font-size:12.5px}
}

/* edit v2-fix111.3 — Riders by grade, phone layout */
.gmob h3{margin:0 0 4px}
.gmob-b{margin:0 0 6px;font-size:11px;font-weight:400;color:var(--ink3);line-height:1.4}
.gmob-l{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.gmob-l .linkish{font-size:12.5px;font-weight:600;min-height:32px}
.gmob-bar{display:grid;gap:2px;height:24px;border-radius:6px;overflow:hidden}
.gmob-bar span{display:block;min-width:0}
.gmob-t{width:100%;border-collapse:collapse;margin-top:8px;table-layout:fixed}
.gmob-t th{font-size:11px;font-weight:500;color:var(--ink3);text-align:left;padding:6px 4px}
.gmob-t td{font-size:12.5px;font-weight:400;color:var(--ink2);padding:8px 3px;
  border-top:1px solid var(--line2);white-space:nowrap}
.gmob-t tr{cursor:pointer}
.gmob-t tr[aria-selected="true"] td{background:var(--line2)}
.gmob-t td i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}
.gmob-r{margin-top:10px;border:1px solid var(--line);border-radius:11px;padding:4px 10px}
.gmob-rh{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:12.5px}
.gmob-rh b{font-weight:600}
.gmob-ri{display:flex;justify-content:space-between;gap:8px;padding:7px 0;font-size:12.5px;
  border-top:1px solid var(--line2)}
.gmob-ri span{font-size:11px;color:var(--ink3);white-space:nowrap}
.gmob-how{margin-top:10px;font-size:11px;color:var(--ink3)}
.gmob-how summary{font-size:12.5px;font-weight:600;color:var(--indigo);cursor:pointer;min-height:32px;
  display:flex;align-items:center}
.gmob-how p{margin:6px 0 0;font-size:11px;font-weight:400;line-height:1.45}

/* edit v2-fix111.4 — the slot funnel and the Supply header on a phone */
@media(max-width:760px){
  .fun .st-ph{gap:6px}
  .fun .st-lab{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
    font-weight:600;color:var(--ink)}
  .fun .st-ph .bar{height:16px;min-width:24px;padding:0;border-radius:5px}
  .pair.p22{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .pair.p22 .v{font-size:20px;font-weight:700}
  .pair.p22 .tgt{display:block;font-size:11px;font-weight:400}
}

/* edit v2-fix111.6 — rider cards (phone) */
.rcards{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rcards button{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;
  padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);min-height:44px}
.rcards .r1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.rcards .n{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcards .o{font-size:20px;font-weight:700;color:var(--ink);flex:none}
.rcards .o.s-r{color:var(--r)}
.rcards .r2{font-size:11px;font-weight:400;color:var(--ink3)}

/* edit v2-fix111.7 — the rider profile as a full-screen sheet (phone) */
@media(max-width:760px){
  .rdwrap{padding:0 !important;align-items:stretch !important}
  .rddlg{max-width:none !important;max-height:none !important;height:100%;border-radius:0 !important;
    padding:16px !important}
  .rdhead{display:grid !important;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name close" "det det" "per per";gap:6px 12px}
  .rdl,.rdr{display:contents !important}
  .rdn{grid-area:name;font-weight:700 !important;margin:0}
  .rdd{grid-area:det;margin:0 !important;line-height:1.5}
  .rdc{grid-area:close}
  .rdp{grid-area:per;margin-top:4px}
  .rdp .cycle{width:100%}
  .rdp .cycle .val{flex:1}
}

/* edit v2-fix111.11 — the store page on a phone (≤ 760 px) */
@media(max-width:760px){
  /* one two-column grid for the whole page: the twelve single-value cards
     take half a row each (12 cards, 6 rows); everything else spans both */
  .spage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .spage>*{grid-column:1/-1}
  .spage>.g3,.spage>.g4{display:contents}
  .spage .panel{grid-column:1/-1}
  .spage .panel.half{grid-column:auto}
  .spage .mtb{margin-top:0}
  .panel.pc{padding:12px;min-height:112px;gap:3px;text-align:left}
  .pc-n{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);
    line-height:1.25}
  .pc-v{font-size:20px;font-weight:700;color:var(--ink);line-height:1.15}
  .pc-v .u{font-size:12.5px;font-weight:600;color:var(--ink2)}
  .pc-v.s-g{color:var(--g)} .pc-v.s-r{color:var(--r)} .pc-v.s-a{color:var(--a)}
  .pc-d .trend{font-weight:500}
  .pc-d .trend .vs{display:none}
  .pc-g{font-size:11px;font-weight:400;color:var(--ink3);margin-top:auto}
  /* 111.11.3 — Riders online on a past period: one line */
  .statp.ro-one{display:block;height:auto;min-height:44px;padding:12px 14px;text-align:left;
    font-size:12.5px;font-weight:400;color:var(--ink3)}
  .statp.ro-one b{font-weight:600;color:var(--ink)}
  .statp.ro-one span{color:var(--indigo);font-weight:600;text-decoration:underline}
  /* 111.11.4 — the order tiles: three in one row; four (Today) as 2 x 2 */
  .statp .cells.c3{--cols:3!important}
  .statp .cells.c4{--cols:2!important}
  .statp .cells{gap:8px;padding-left:12px;padding-right:12px}
  .statp .c{padding:10px 6px}
  .statp .c .cx{font-weight:400}
  /* 111.11.6 — the page in 3,200 px: tighter card padding and gaps on a phone */
  .spage .panel,.spage .statp{padding:12px}
  .spage .cc{padding:12px}
  .spage>p{margin-top:4px !important}
  /* 111.1.5 — the delta onto the canonical scale (11/500) on a phone */
  .trend{font-weight:500}
  .pgwrap{padding-top:0 !important;padding-bottom:16px !important}
  .phead.empty{display:none !important}
  .fstrip{padding-top:12px}
  .spage{gap:8px}
  .spage .panel .foot{padding-top:6px}
  .gmob-l{margin-bottom:6px}
  .gmob-how{margin-top:6px}
  .spage .cc .mcbar{row-gap:6px}
  .spage .statp .cells{padding:8px 0 0}
}

/* edit v2-fix111.12 — the filter bar on a phone */
.fsum,.fdone,.phlb{display:none}
@media(max-width:760px){
  .fbar{align-items:center}
  .fsum{display:block;flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);
    line-height:1.4}
  .fchipx{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;
    font-weight:500;background:#eef1fb;color:var(--indigo)}
  .morebtn{order:2 !important}
  .morebtn[aria-expanded="true"]{border-color:var(--indigo);background:#eef1fb;color:var(--navy)}
  .fbar .dlbtn{display:none}
  .fbar.open .fgrp{order:3;flex-direction:column;align-items:stretch;gap:4px;width:100%}
  .fbar.open .fgrp .phlb{display:block}
  .fbar.open .fgrp .cycle{width:100%}
  .fbar.open .fgrp .cycle .val{flex:1}
  .fbar.open .fgrp .msel{width:100%}
  .fbar.open .fgrp.opt{flex-direction:row;width:calc(50% - 4px)}
  .fbar.open .dlbtn{display:flex;order:4;width:100%;justify-content:center;min-height:40px}
  .fbar.open .fdone{display:block;order:5;width:100%;min-height:44px;border-radius:9px;
    background:var(--indigo);color:#fff;font-size:12.5px;font-weight:600;border:0}
}

/* edit v2-fix111.13 — the download dialog on a phone: a full-screen sheet with
   its footer pinned, label-above rows and a full-width store checklist */
.dlname-short{display:none}
@media(max-width:760px){
  .dlwrap{padding:0 !important;align-items:stretch !important}
  .dlg{max-width:none;max-height:none;height:100%;border-radius:0;padding:16px 16px 0;
    display:flex;flex-direction:column}
  .dlg .dlrow{flex-direction:column;align-items:stretch !important;gap:6px}
  .dlg .dlk{width:auto;padding-top:0 !important}
  .dlg .dlv{width:100%}
  .dlg .dlpick{width:100%}
  .dlfoot{position:sticky;bottom:0;margin-top:auto !important;background:var(--card);
    padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);
    flex-direction:column;align-items:stretch !important}
  .dlfoot>span:last-child{display:flex;gap:8px}
  .dlfoot>span:last-child>button{flex:1;justify-content:center}
  .dlname{white-space:nowrap;overflow:hidden}
  .dlname-full{display:none}
  .dlname-short{display:inline}
  /* 111.1.5 — the last off-scale pairs inside drawers, on a phone */
  .mpop>.chipbtn>span[aria-hidden="true"]{font-size:11px !important;font-weight:400}
  .dwpane .worstline,.dwpane .worstline *{font-size:12.5px !important}
  .dwpane .cap b,.dwpane .note b{font-weight:600}
  table.vh th{font-weight:400}
  /* 111.1.5 — the rider profile sheet onto the canonical scale */
  .rddlg .cv{font-size:20px !important;font-weight:700 !important}
  .rddlg td,.rddlg .slotpen{font-size:12.5px !important}
  .rddlg td[style*="font-weight: 700"],.rddlg td[style*="font-weight:700"]{font-weight:600 !important}
  .rddlg b{font-weight:600}
  /* 111.2.5 — three metrics in "What moved it" within 520 px */
  .mstack{padding:4px 0}
  .blk .cc:has(> .mstack){padding:8px 10px}
  .blk .cc:has(> .mstack)>.cap{margin-bottom:2px}
  /* 111.15 — the Admin users table: wrap, never clip */
  .admtr .em,.admtr .st{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  /* 111.1.5 — bold inside 12.5 px copy on the store page */
  .ro-msg b,.spage .scope b{font-weight:600}
  .empty b{font-weight:600}
}

/* edit v2-fix113.2 — the period menu: one row per period, 36px rows,
   12.5/400, the current one ticked; the same card as the store picker. */
.cycle{position:relative}
.cycle .val{display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}
.cycle .val .pcaret{width:11px;height:11px;flex:none;stroke:var(--ink3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cycle .val[aria-expanded="true"] .pcaret{transform:rotate(180deg)}
.pmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh2);padding:6px;z-index:70;
  display:flex;flex-direction:column}
.pmenu.r{left:auto;right:0}
.pmenu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  height:36px;padding:0 10px;border:0;border-radius:8px;background:none;cursor:pointer;
  font-size:12.5px;font-weight:400;color:var(--ink);text-align:left;white-space:nowrap}
.pmenu button:hover,.pmenu button:focus-visible{background:var(--line2);outline:none}
.pmenu button[aria-selected="true"]{background:var(--ibg);color:var(--indigo)}
.pmenu button svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* edit v2-fix113.4.3 — the funnel never widens its drawer */
.fun{min-width:0;overflow:hidden}
.fun .bar{max-width:100%}
.funmis{margin:0 0 10px;padding:6px 10px;border-radius:8px;background:#fdf1e4;color:#9a4d00;
  font-size:12.5px;font-weight:600}

/* edit v2-fix113.3.3 */
.likelymuted{display:inline-flex;align-items:center;min-height:30px;padding:0;border:0;background:none;
  font-size:12.5px;font-weight:400;color:var(--ink3);cursor:pointer;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;
  text-underline-offset:3px}
.likelymuted:hover{color:var(--indigo)}

/* edit v2-fix113.6 / 113.8 — the custom range, inside the period menu */
.pcust{border-top:1px solid var(--line2);margin-top:4px;padding:8px 6px 4px;display:grid;gap:6px}
.pcust label{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px;
  font-size:12.5px;font-weight:400;color:var(--ink2)}
.pcust input{padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:12.5px;min-height:30px;min-width:0}
.pcust-why{margin:0;min-height:15px;font-size:11px;font-weight:400;color:var(--ink3)}
.pcust-go{height:32px;border-radius:8px;border:0;background:var(--indigo);color:#fff;
  font-size:12.5px;font-weight:600;cursor:pointer}
.pcust-go:disabled{background:var(--line);color:var(--ink3);cursor:default}

/* edit v2-fix113.7.2.4 — the loading skeleton */
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:22px}
.skp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:grid;gap:10px;min-height:150px;align-content:start}
.skp span{display:block;height:12px;border-radius:6px;background:var(--line2);
  animation:skpulse 1.2s ease-in-out infinite}
.skp span:nth-child(1){width:45%}
.skp span:nth-child(2){width:30%;height:26px}
.skp span:nth-child(3){width:70%}
@keyframes skpulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skp span{animation:none}}

/* edit v2-fix113.7.2.3 — Today · Yesterday */
.pchips{display:flex;gap:0;flex:none;margin-left:-6px}
.pchips button{min-height:30px;padding:0 4px;border-radius:8px;border:0;background:none;
  font-size:12.5px;font-weight:400;color:var(--ink2);cursor:pointer;white-space:nowrap}
.pchips button:hover{color:var(--indigo);background:var(--line2)}
.pchips button[aria-pressed="true"]{background:var(--ibg);color:var(--indigo);font-weight:600}


/* edit v2-fix113.10 — an empty page header is not drawn at any width (the
   global .empty card style was painting it as a 48px white card on desktop) */
.phead.empty{display:none !important}

.cycle .val .pdates{font-size:11px;font-weight:500;color:var(--ink2)}
.fbar .cycle button.nav{padding:7px 5px}

/* edit v2-fix113.8 — 9px between the bar's groups (Divyashree, 12 Oct), so a stepped
   "Last 4 weeks · 17 Aug–13 Sep" with the Today · Yesterday chips still fits
   on one line at the 1180px page width (design note 9) */
@media (min-width:761px){.fbar{gap:9px}}
.fbar .cycle .val{padding:0 2px}
/* edit v2-fix113.7.2.3 — on a phone the chips sit on their own row in the open
   Filters panel: aligned with the column, 36px tap targets, bordered like the
   period control above them */
@media(max-width:760px){
  .pchips{margin-left:0;gap:6px}
  .pchips button{min-height:36px;padding:0 14px;border:1px solid var(--line);background:var(--card)}
  .pchips button[aria-pressed="true"]{border-color:transparent}
}

/* edit v3-10 — the chart hover card (inspiration: "Pop up tile on chart hover") */
.tipcard{position:fixed;z-index:200;pointer-events:none;background:#fff;border:1px solid #DFE4F2;
  border-radius:12px;box-shadow:0 8px 24px rgba(20,26,51,.10);padding:14px 16px;min-width:200px;
  font-variant-numeric:tabular-nums lining-nums}
.tipcard .tc-h{font-size:15px;font-weight:600;color:#141A33;margin-bottom:10px;line-height:1.25;white-space:nowrap}
.tipcard .tc-b+.tc-b{margin-top:8px}
.tipcard .tc-v{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#141A33;line-height:1.25;white-space:nowrap}
.tipcard .tc-v i{display:inline-block;width:14px;height:3px;flex:none}
.tipcard .tc-n{font-size:12.5px;font-weight:400;color:#5B6480;margin:2px 0 0 22px;line-height:1.3;white-space:nowrap}

/* edit v3-1 rule 3 — the driver chip and its likely-cause line. Amber, not
   red: red is kept for trend icons and off-target headline figures. */
.mstack-c.bad{color:#8A5A00;background:rgba(226,152,40,.16)}
.mstack-c.knock{color:#3D4A7A;background:rgba(61,74,122,.10)}
.mstack-why{font-size:12.5px;font-weight:400;color:var(--ink2);line-height:1.4;margin-top:2px}
.mstack-ch.go{cursor:pointer;border-radius:8px}
.mstack-ch.go:hover{background:rgba(20,26,51,.025)}
.mstack-ch.go:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.mstack-na{display:flex;align-items:center;justify-content:center;font-size:12.5px;
  color:var(--ink3);border:1px dashed var(--line);border-radius:8px;background:rgba(20,26,51,.015)}
/* edit v3-1 rule 2 — "Add drivers" */
.addrv{position:relative}
.addrv .chipbtn svg{margin-left:2px}
.addrv-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:260px;max-height:340px;
  overflow:auto;background:#fff;border:1px solid #DFE4F2;border-radius:12px;
  box-shadow:0 8px 24px rgba(20,26,51,.10);padding:6px}
.addrv-menu label{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;
  border-radius:8px;font-size:12.5px;color:var(--ink);cursor:pointer}
.addrv-menu label:hover{background:var(--line2)}
/* edit v3-2.2 — "← Back to …", top left of the drawer header, above the title */
.dwback{display:inline-block;font-size:12.5px;font-weight:500;color:var(--indigo);margin:0 0 6px;
  padding:2px 0;background:none;border:0;cursor:pointer}
.dwback:hover{text-decoration:underline}

/* edit v3-11.2.4 — the slot table */
.slottbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.slottbl th{text-align:left;font-weight:600;color:var(--ink2);background:var(--line2);padding:8px 10px;white-space:nowrap}
.slottbl td{padding:8px 10px;border-top:1px solid var(--line2);color:var(--ink);white-space:nowrap}
.slottbl tfoot td{font-weight:600;border-top:1px solid var(--line)}

/* edit v3-design-8 — the phone filter bar: the burger "Filters" button sits
   top left, the one-line summary under it, and tapping opens a full-width sheet
   with City, Store, Period, Rain orders, Marketplace and Download report one
   per row and Apply at the bottom. */
@media(max-width:760px){
  .morebtn{order:-1 !important}
  .fsum{order:1;flex:0 0 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fbar.open{position:fixed;inset:0;z-index:70;border-radius:0;border:0;margin:0;overflow-y:auto;
    align-content:flex-start;padding:16px 16px 0;gap:12px}
  .fbar.open .fsum{display:none}
  .fbar.open .fgrp,.fbar.open .fgrp.opt{order:3;width:100%;flex-direction:column;align-items:stretch}
  .fbar.open .fgrp.opt{flex-direction:row;justify-content:space-between;align-items:center;min-height:44px}
  .fbar.open .dlbtn{order:4;width:100%}
  .fbar.open .fdone{position:sticky;bottom:0;order:5;margin:auto -16px 0;width:calc(100% + 32px);
    border-radius:0;min-height:52px}
}

/* edit v3-9 — the rate card tile, modal body and section */
.rctile{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--line2);color:var(--ink2);font-size:11px;font-weight:500;
  white-space:nowrap;cursor:pointer;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.rctile:hover{border-color:var(--indigo);color:var(--indigo)}
.rctop{margin:0 0 8px}
.rctop .rctile{height:26px;font-size:12px;max-width:none}
.rch{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 10px}
.rcbody{margin:0;display:flex;flex-direction:column;gap:8px}
.rcbody>div{display:flex;gap:12px;font-size:12.5px}
.rcbody dt{width:90px;color:var(--ink3);flex:none}
.rcbody dd{margin:0;color:var(--ink);font-weight:600;word-break:break-all}
.rcsoon{font-size:12.5px;color:var(--ink3);margin:4px 0 0}

/* edit v3-4.3 — skeleton store cards */
.scard.skc{min-height:260px;gap:14px;pointer-events:none}
.scard.skc span{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,#eef0f6,#f6f7fb,#eef0f6);
  background-size:200% 100%;animation:skc 1.2s linear infinite}
.scard.skc span:nth-child(1){width:40%}
.scard.skc span:nth-child(2){width:85%;height:60px}
.scard.skc span:nth-child(3){width:70%;height:60px}
@keyframes skc{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.scard.skc span{animation:none}}

/* edit v3-7 — the "i" and its definition card */
.info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:5px;
  color:#9AA3BD;vertical-align:-2px;cursor:help;flex:none;position:relative}
.info:hover,.info:focus-visible{color:var(--ink2);outline:none}
.infocard{position:fixed;z-index:210;width:300px;display:flex;flex-direction:column;gap:7px;
  background:#fff;border:1px solid #DFE4F2;border-radius:12px;box-shadow:0 8px 24px rgba(20,26,51,.10);
  padding:12px 14px;font-size:12px;font-weight:400;line-height:1.45;color:var(--ink2);text-align:left;
  white-space:normal;letter-spacing:0;text-transform:none;cursor:default}
.infocard .ic-r{display:block}
.infocard .ic-r b{display:block;font-size:11px;font-weight:600;color:#141A33;margin-bottom:1px}

/* edit v3-18.1 — the hover card, second pass: smaller type */
.tipcard{padding:10px 12px;min-width:180px}
.tipcard .tc-h{font-size:13px;margin-bottom:8px}
.tipcard .tc-b+.tc-b{margin-top:6px}
.tipcard .tc-v{font-size:13.5px}
.tipcard .tc-n{font-size:11.5px;margin-left:22px}
/* edit v3-32.2 — legend glyphs: previous period (fuchsia dashed), average (grey dotted) */
.legend .lgprev{display:inline-block;width:16px;height:3px;margin-right:6px;vertical-align:middle;
  background:repeating-linear-gradient(90deg,#C026D3 0 5px,transparent 5px 9px)}
.legend .lgavg{display:inline-block;width:16px;height:0;margin-right:6px;vertical-align:middle;
  border-top:2px dotted #8A93AD}
.legend .lgsq{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .lgln{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}
/* edit v3-13.4 — the "i" card, anchored to its icon with a 6 px arrow */
.infocard{width:min(320px,calc(100vw - 16px));max-width:320px;font-size:13px;line-height:1.45;padding:10px 12px;gap:6px}
.infocard .ic-r b{font-size:12px}
.infocard::before{content:"";position:absolute;left:var(--ax,12px);top:-7px;width:0;height:0;
  border:6px solid transparent;border-top:0;border-bottom:7px solid #DFE4F2}
.infocard::after{content:"";position:absolute;left:calc(var(--ax,12px) + 1px);top:-5px;width:0;height:0;
  border:5px solid transparent;border-top:0;border-bottom:6px solid #fff}
.infocard.up::before{top:auto;bottom:-7px;border-bottom:0;border-top:7px solid #DFE4F2}
.infocard.up::after{top:auto;bottom:-5px;border-bottom:0;border-top:6px solid #fff}

/* edit v3-13.1 / 13.2 — the pay tile sizes to its text and wraps, never clips;
   it sits right-aligned beside the pin */
.scard .sfr{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 1 auto;margin-left:auto}
.rctile{height:auto;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;
  padding:4px 10px;font-size:12.5px;line-height:1.3;border-radius:999px;border:1px solid transparent;text-align:left}
.rctile:hover{filter:brightness(.97);color:inherit}
/* edit v3-56.4 — the hours chip: the Pay chip's size and type; 24-hour stores
   in a stronger tint; the two chips wrap rather than truncate */
.scard .sfr{flex-wrap:wrap}
.hrchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:12.5px;line-height:1.3;
  border-radius:999px;border:1px solid transparent;background:#EEF0F6;color:var(--ink2);white-space:nowrap}
.hrchip.h24{background:#E3EAF8;color:#2F4A8A;font-weight:500}
.hrchip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* edit v3-15.2 — the two-column Rate card panel */
.panel.span2{grid-column:span 2}
.rcpanel{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:6px}
.rcpanel .rcname{font-size:13px;font-weight:600;color:var(--ink);word-break:break-all}
.rcpanel .rcsoon{font-size:12.5px;color:var(--ink3);margin:0}
@media(max-width:760px){.panel.span2{grid-column:1/-1}}

.blk h4.h4i{display:flex;align-items:center;justify-content:space-between}

/* edit v3-29.5 — the Slot completion | Utilisation halves stack on a phone */
@media(max-width:760px){[data-section=rider-time] .mgrid{grid-template-columns:1fr;row-gap:12px}}

/* edit v3-34.6 — speed-row legend, top right of the chart area */
/* edit 39.4 — above the plot, never inside it: an 18 px right-aligned strip
   between the row's top edge and the plot; each item is swatch, then label */
.rowlegend{position:static;display:flex;justify-content:flex-end;align-items:center;gap:12px;
  height:18px;font-size:11px;color:var(--ink3);padding:0 4px}
.rowlegend span{display:inline-flex;align-items:center;white-space:nowrap;cursor:default}
.rowlegend .lgln{display:inline-block;width:14px;height:3px;border-radius:1px;margin-right:5px;flex:none}
.rowlegend .lgprev{display:inline-block;width:14px;height:3px;margin-right:5px;flex:none;
  background:repeating-linear-gradient(90deg,#C026D3 0 5px,transparent 5px 9px)}
.rowlegend .lgsq{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;flex:none}
.rowlegend .lgdot{display:inline-block;width:14px;height:0;border-top:1.5px dotted #A3ADB8;margin-right:5px;flex:none}
@media(max-width:760px){.rowlegend{flex-wrap:wrap;height:auto;min-height:18px;margin-bottom:2px}}

/* edit v3-34.1 — the per-card loading skeleton */
.skchart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}
.skchart span{font-size:12px;color:var(--ink3)}
.skchart i{display:block;width:100%;height:40%;min-height:14px;border-radius:6px;background:#EEF0F6;
  animation:skpulse 1.4s ease-in-out infinite}
@keyframes skpulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.skchart i{animation:none}}
.pair .v.skv{display:inline-block;min-width:56px;height:18px;border-radius:5px;background:#EEF0F6;color:transparent}
.mstack-g .skv{display:inline-block;width:72px;height:12px;border-radius:4px;background:#EEF0F6;vertical-align:middle}

/* edit 35 — Rain / Marketplace drop-downs: "Rain: All orders" */
.fsel>button .chips{align-items:center}
.fsel .fsl{font-size:12.5px;color:var(--ink2);font-weight:500;white-space:nowrap}
.fsel .pop{min-width:190px}

/* edit 36 — store page sections: header, rail, 40 px between sections */
.spage .ssec{position:relative;margin-top:40px}
.spage .ssec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px;font-weight:400}
.spage .ssec-top{margin-top:40px}
.spage>.ssec-top:first-child{margin-top:0}
.spage .ssec-l{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#3D4663}
.spage .ssec-d{font-size:13px;font-weight:400;color:#5B6480}
.spage .ssec .g3{gap:16px}
.spage .ssec::before{content:"";position:absolute;left:-16px;top:2px;bottom:0;width:3px;border-radius:2px;
  background:var(--rail,transparent)}
.spage .ssec[data-ssec="service"]{--rail:#B9CBEA}
.spage .ssec[data-ssec="flow"]{--rail:#C7D3E6}
.spage .ssec[data-ssec="supply"]{--rail:#BFE0CC}
.spage .ssec[data-ssec="pay"]{--rail:#E6D3F3}
.spage .ssec[data-ssec="demand"]{--rail:#F3DCC0}
.spage .ssec[data-ssec="lm"]{--rail:#C9E3E3}
@media(max-width:760px){
  .spage .ssec-h{gap:2px 12px}
  .spage .ssec-d{flex-basis:100%}
  .spage .ssec::before{left:-8px}
  .spage .ssec .g3{grid-template-columns:minmax(0,1fr)}
}

/* edit 54 — Distance · Speed · Time side by side */
.pair.tri{gap:18px}

/* edit 38 — expand any chart card to fill the screen */
.xcard{position:relative}
.xcard>.xbtn{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;display:grid;place-items:center;
  border:0;background:transparent;border-radius:8px;color:#5B6480;cursor:pointer}
.xcard>.xbtn:hover{background:rgba(20,26,51,.06)}
.xcard>.xbtn:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.xcard>.xbody{min-width:0}
.xdim{position:fixed;inset:0;z-index:79;background:rgba(20,26,51,.35)}
.xcard.xopen{position:fixed;inset:24px;z-index:80;margin:0;background:#fff;border-radius:12px;
  overflow:auto;padding:20px 24px;box-shadow:var(--sh2)}
.xcard.xopen>.xbtn{position:sticky;float:right;top:0;margin:-8px -10px 0 8px}
.xcard.xopen>.xbody{padding-right:8px}
/* the master stack's rows grow with the wider plot (the svg keeps its ratio),
   and the left column keeps its width */
.xcard.xopen.xmaster .mstack{grid-template-columns:250px minmax(0,1fr)}
body.xlock{overflow:hidden}
@media(max-width:760px){
  .xcard.xopen{inset:0;border-radius:0;padding:14px}
  .xcard.xopen>.xbody{overflow-x:auto}
  .xcard.xopen>.xbody>*{min-width:640px}
}
/* edit 38 — the whole block expands (title, controls, card, legend) */
.xcard.blk>.xbody{display:flex;flex-direction:column;gap:12px}
.xcard.blk>.xbtn{top:-4px;right:0}
.xcard.blk>.xbody>:first-child{padding-right:34px}
.xcard.blk.xopen>.xbtn{top:0;right:0}

/* regression 16 Oct (V2 fix 111.1) — no inner sideways scroll on a phone: the
   slot tables wrap their headers and cells to the screen instead */
@media(max-width:760px){
  .scrollx:has(> .slottbl){overflow-x:visible}
  .slottbl{table-layout:fixed;font-size:11.5px}
  .slottbl th,.slottbl td{white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:manual;padding:6px 3px;vertical-align:top}
  .slottbl th{font-size:10.5px;line-height:1.25}
}

/* V2 fix 18 — BTO reasons: horizontal bars with the share and count beside */
.whybars{display:flex;flex-direction:column;gap:8px}
.whyrow{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px}
.whyk{color:var(--ink2)}
.whytrack{height:12px;background:var(--line2);border-radius:3px;overflow:hidden}
.whybar{display:block;height:100%;border-radius:3px}
.whyv{font-variant-numeric:tabular-nums;color:var(--ink);min-width:96px;text-align:right}
@media(max-width:760px){.whyrow{grid-template-columns:1fr auto}.whytrack{grid-column:1/-1;order:3}}

/* V2 fix 56 — master-chart headline figure in its range colour */
.mstack-g.hoff{color:#C2352B;font-weight:600}
.mstack-g.hin{color:#141A33;font-weight:600}

/* regression 16 Oct — slot table headers: full on desktop, short on a phone */
.slottbl .ths{display:none}
@media(max-width:760px){.slottbl .thl{display:none}.slottbl .ths{display:inline}}

/* V2 fix 57 (regression 16 Oct) — only the spec's type pairs on the store page:
   deltas 11/500, section label 11/700 letter-spaced, section description 12.5/400,
   rate-card name 12.5/600, rate-card tile 12.5/400 */
.spage .trend{font-weight:500}
.spage .ssec-l{font-size:11px;font-weight:700;letter-spacing:.06em}
.spage .ssec-d{font-size:12.5px;font-weight:400}
.spage .rcpanel .rcname{font-size:12.5px;font-weight:600}
.spage .rcpanel .rctile{font-weight:400}
.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;
  }
}