/* Bench47 branding for status.bench47.com, matching the marketing site
   (~/work/markbase.cloud, branch rebrand/bench47: src/styles/global.css
   tokens, src/layouts/site.astro frame, src/components/home/SiteHeader.astro
   + SiteFooter.astro). The site is light-only, so the status page pins light via pageConfig.colorScheme.
   Hooks (status-*) live in components/Header.tsx and components/Footer.tsx;
   everything else targets Mantine's static class names. */

/* Instrument Sans and Geist Mono (SIL OFL), the variable latin files
   the site self-hosts via fontsource. */
@font-face {
  font-family: 'Instrument Sans Variable';
  src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono Variable';
  src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The site's palette: paper canvas, Tailwind neutrals, the logo's navy. The
   logo's blue is too light for small text (3.3:1), so labels use the navy. */
:root {
  --mb-paper: #fafaf8;
  --mb-surface: #ffffff;
  --mb-n50: #fafafa;
  --mb-n200: #e5e5e5;
  --mb-n300: #d4d4d4;
  --mb-n500: #737373;
  --mb-n600: #525252;
  --mb-n800: #262626;
  --mb-n950: #0a0a0a;
  --mb-brand-ink: #03497e;
  --mb-brand-soft: #e8f6fc;
  --mb-sans: 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif;
  --mb-mono: 'Geist Mono Variable', ui-monospace, monospace;
  --mb-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mantine's radii start square; the bordered panels and controls below take
   the site's rounded-md (8px), as its white cards, menus and buttons do. */
:root[data-mantine-color-scheme='light'] {
  --mantine-font-family: var(--mb-sans);
  --mantine-font-family-headings: var(--mb-sans);
  --mantine-font-family-monospace: var(--mb-mono);
  --mantine-color-body: var(--mb-paper);
  --mantine-color-text: var(--mb-n950);
  --mantine-color-anchor: var(--mb-n950);
  --mantine-color-dimmed: var(--mb-n500);
  --mantine-color-default-border: var(--mb-n200);
  --mantine-color-default-hover: var(--mb-n50);
  --mantine-primary-color-filled: var(--mb-n950);
  --mantine-primary-color-filled-hover: var(--mb-n800);
  --mantine-radius-default: 0;
  --mantine-radius-xs: 0;
  --mantine-radius-sm: 0;
  --mantine-radius-md: 0;
  --mantine-radius-lg: 0;
  --mantine-radius-xl: 0;
}

html body {
  background-color: var(--mb-paper);
  color: var(--mb-n950);
}

/* The site's frame: a max-w-6xl column whose side borders run the full page
   height as guide lines. pages/*.tsx wrap header, content and footer in
   <main> and put next/font Inter on it; the site face wins. */
main {
  font-family: var(--mb-sans) !important;
  max-width: 1152px;
  min-height: 100dvh;
  margin: 0 auto;
  border-left: 1px solid var(--mb-n200);
  border-right: 1px solid var(--mb-n200);
  display: flex;
  flex-direction: column;
}
@media (max-width: 639px) {
  main {
    border-left: 0;
    border-right: 0;
  }
}

/* Headings: font-medium, tracking-tight (site h1/h2).
   !important: Mantine's Title class sets its own weight. */
main h1,
main h2,
main h3 {
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

::selection {
  background-color: var(--mb-brand-soft);
  color: var(--mb-n950);
}

/* Header: sticky h-16, paper/90 with a blur, neutral-200 rule, logo left and
   nav right across the frame (px-4 sm:px-12 lg:px-16).
   !important: Header.module.css has equal specificity and loads later. */
.status-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px !important;
  margin-bottom: 0 !important;
  background-color: rgb(250 250 248 / 0.9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mb-n200) !important;
}
.status-header-inner {
  height: 64px !important;
  max-width: none !important;
  padding: 0 16px !important;
}
@media (min-width: 640px) {
  .status-header-inner {
    padding: 0 48px !important;
  }
}
@media (min-width: 1024px) {
  .status-header-inner {
    padding: 0 64px !important;
  }
}
/* Logo at the site's h-4 sm:h-5. */
.status-logo {
  height: 16px !important;
  width: auto !important;
}
@media (min-width: 640px) {
  .status-logo {
    height: 20px !important;
  }
}
/* Nav links: sentence-case text-sm in neutral-600. The attribute prefix
   outranks Header.module.css's .link, which loads later. */
[data-mantine-color-scheme] .status-header-link {
  color: var(--mb-n600);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: 6px 12px;
  border-radius: 0;
  transition: color 0.15s var(--mb-ease), background-color 0.15s var(--mb-ease);
}
[data-mantine-color-scheme] .status-header-link:hover {
  color: var(--mb-n950);
  background-color: transparent;
}
/* The highlighted link renders as the site's "Open dashboard" button:
   neutral-950 fill, white medium text, rounded-md (8px), set off from the
   text links by the site's 1px divider. */
[data-mantine-color-scheme] .status-header-link[data-active] {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-left: 17px;
  border-radius: 8px;
  font-weight: 500;
  background-color: var(--mb-n950) !important;
  color: #ffffff !important;
}
[data-mantine-color-scheme] .status-header-link[data-active]::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 50%;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--mb-n200);
}
[data-mantine-color-scheme] .status-header-link[data-active]:hover {
  background-color: var(--mb-n800) !important;
  color: #ffffff !important;
}

/* Overall status: the hero block, with the site's mono bracket label.
   (pages/index.tsx; incidents.tsx wraps its container in a Center.) */
main > div:not(.mantine-Center-root) > .mantine-Container-root:first-child {
  margin-top: 0;
  padding-top: 80px;
}
main > div:not(.mantine-Center-root) > .mantine-Container-root:first-child h1 {
  font-size: 36px;
  line-height: 1.1;
  text-wrap: balance;
}
main > div:not(.mantine-Center-root) > .mantine-Container-root:first-child h1::before {
  content: '[ status ]';
  display: block;
  margin-bottom: 20px;
  font-family: var(--mb-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--mb-brand-ink);
}
@media (min-width: 640px) {
  main > div:not(.mantine-Center-root) > .mantine-Container-root:first-child {
    padding-top: 112px;
  }
  main > div:not(.mantine-Center-root) > .mantine-Container-root:first-child h1 {
    font-size: 48px;
  }
}
/* Incidents page: the gap its inline header margin gave, which the sticky
   header above drops. */
main > .mantine-Center-root > .mantine-Container-root {
  padding-top: 48px;
}

/* "Last updated" and the maintenance count: text-sm neutral-500.
   !important: OverallStatus.tsx colours them inline. */
main h5.mantine-Title-root {
  font-size: 14px;
  font-weight: 400;
  color: var(--mb-n500) !important;
}

/* Monitor list: no floating card, the site's flat white rounded-md cards
   instead (rounded-md border border-neutral-200 bg-white).
   !important: MonitorList.tsx sets the card's width inline. */
main .mantine-Card-root {
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-top: 56px;
  width: min(100%, 896px) !important;
}
main .mantine-Accordion-root {
  --accordion-radius: 8px;
}
/* Every item, not only the first and last: they stand apart, not stacked.
   overflow clips the control's hover fill to the corners. */
main .mantine-Accordion-item,
main .mantine-Accordion-item[data-active] {
  background-color: var(--mb-surface);
  border: 1px solid var(--mb-n200);
  border-radius: 8px;
  overflow: hidden;
}
main .mantine-Accordion-item + .mantine-Accordion-item {
  margin-top: 24px;
}
/* Group heading: mono uppercase label (site: "On every plan"). */
main .mantine-Accordion-control {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  font-family: var(--mb-mono);
  font-size: 12px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--mb-n500);
}
main .mantine-Accordion-item[data-active] .mantine-Accordion-control {
  border-bottom-color: var(--mb-n200);
}
main .mantine-Accordion-control:hover {
  background-color: var(--mb-n50);
}
main .mantine-Accordion-control .mantine-Text-root {
  font-family: var(--mb-mono);
  font-size: 12px;
  font-weight: 400 !important;
}
main .mantine-Accordion-content {
  padding: 8px 12px 24px;
}
/* Monitor rows: medium-weight names, uptime figures in mono.
   !important: MonitorDetail.tsx's fw={700} is an inline style. */
main .mantine-Card-section .mantine-Text-root {
  font-weight: 500 !important;
}
main .mantine-Card-section .mantine-Text-root:last-child {
  font-family: var(--mb-mono);
  font-size: 14px;
  font-weight: 400 !important;
}
main .mantine-Card-section a {
  text-decoration: underline;
  text-decoration-color: var(--mb-n300);
  text-underline-offset: 4px;
}
main .mantine-Card-section a:hover {
  text-decoration-color: var(--mb-n950);
}

/* Alerts (incidents, maintenance): rounded-md cards with a neutral rule. The
   gray ones (no incidents, upcoming maintenance) become plain white tiles;
   coloured ones keep their tint. */
main .mantine-Alert-root {
  border: 1px solid var(--mb-n200);
  border-radius: 8px;
}
main .mantine-Alert-root[style*='gray-light'] {
  --alert-bg: var(--mb-surface) !important;
  --alert-color: var(--mb-n500) !important;
}
main .mantine-Alert-root[style*='gray-light'] .mantine-Alert-title {
  color: var(--mb-n950);
  font-weight: 500;
}
main .mantine-Alert-root[style*='gray-light'] .mantine-Alert-message {
  color: var(--mb-n600);
}

/* Controls take the site's rounded-md: buttons (incidents month pager) and
   the monitor select. Default buttons are its white bordered buttons. */
.mantine-Button-root {
  --button-radius: 8px;
  font-weight: 500;
}
.mantine-Button-root[data-variant='default'] {
  background-color: var(--mb-surface);
  border-color: var(--mb-n200);
  color: var(--mb-n950);
}
.mantine-Button-root[data-variant='default']:hover {
  background-color: var(--mb-surface);
  border-color: var(--mb-n300);
}
/* Prefixed: Mantine's own rules match the same single class and load later. */
main .mantine-Input-input {
  border-radius: 8px;
  border-color: var(--mb-n200);
  background-color: var(--mb-surface);
}
body .mantine-Combobox-dropdown {
  border-radius: 8px;
  border-color: var(--mb-n200);
  box-shadow: 0 10px 15px -3px rgb(10 10 10 / 0.05), 0 4px 6px -4px rgb(10 10 10 / 0.05);
}
body .mantine-Combobox-option {
  border-radius: 6px;
}

/* Footer: the site's SiteFooter (logo beside four link columns, then the
   legal rows). The frame's flex column pins it to the bottom. */
.status-footer-divider {
  display: none;
}
.status-footer {
  margin-top: auto;
}
.status-footer .mb-footer {
  margin-top: 96px;
  padding: 48px 16px;
  border-top: 1px solid var(--mb-n200);
  font-size: 14px;
  line-height: 20px;
}
.status-footer .mb-footer-grid {
  display: grid;
  gap: 48px;
}
.status-footer .mb-footer-logo {
  align-self: start;
  justify-self: start;
}
.status-footer .mb-footer-logo img {
  height: 20px;
  width: auto;
  display: block;
}
.status-footer .mb-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 40px;
}
.status-footer .mb-footer-title {
  margin: 0;
  font-family: var(--mb-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--mb-n500);
}
.status-footer .mb-footer-nav ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.status-footer .mb-footer-nav li + li {
  margin-top: 10px;
}
.status-footer .mb-footer-nav a {
  color: var(--mb-n600);
  text-decoration: none;
  transition: color 0.15s var(--mb-ease);
}
.status-footer .mb-footer-nav a:hover {
  color: var(--mb-n950);
}
.status-footer .mb-footer-legal {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--mb-n200);
  font-size: 12px;
  line-height: 16px;
  color: var(--mb-n500);
}
.status-footer .mb-footer-legal p {
  margin: 0;
}
.status-footer .mb-footer-legal p + p {
  margin-top: 6px;
}
.status-footer .mb-footer-legal a {
  color: inherit;
  text-decoration: none;
}
.status-footer .mb-footer-legal a:hover {
  color: var(--mb-n950);
}
@media (min-width: 640px) {
  .status-footer .mb-footer {
    padding: 64px 48px;
  }
  .status-footer .mb-footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .status-footer .mb-footer {
    padding: 64px;
  }
  .status-footer .mb-footer-grid {
    grid-template-columns: 1fr 3fr;
  }
}