/* ============================================================================
   CloudB Documentation - Delhom Acoustics design system
   Imported from the Claude Design project "Documentation CloudB".

   Everything is scoped under .cloudb-doc so the token names (--bg, --fg,
   --accent, ...) cannot leak into the rest of the Mantine app. Dark mode
   piggybacks on Mantine's own [data-mantine-color-scheme="dark"] on <html>,
   so the doc follows the app theme with no extra bridging.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------- tokens */
.cloudb-doc {
  /* Raw brand palette. Orange is the "Spark": an accent, never the hero. */
  --delhom-orange: #e36c0a;
  --glow-orange: #f28b3a;
  --anthracite: #1e2a30;
  --deep-anthracite: #2f3e46;
  --anthracite-light: #8a9ba8;
  --slate-mist: #d1d9d9;
  --warm-alabaster: #faf7f0;
  --alabaster-light: #fdfbf7;

  --status-success: #4f7a5b;
  --status-warning: #c77a1e;
  --status-danger: #b4452f;
  --status-info: #5e7a86;

  /* Semantic roles - light */
  --bg: var(--warm-alabaster);
  --surface: var(--alabaster-light);
  --surface-2: #ffffff;
  --fg: var(--deep-anthracite);
  --fg-strong: var(--anthracite);
  --muted: var(--anthracite-light);
  /* --muted is the brand's support grey: fine for uppercase labels and hints,
     but only 2.6:1 on white. Anything readers actually read uses
     --muted-strong, which clears 4.5:1. */
  --muted-strong: #5c6f7a;
  /* Neutral hover wash: keeps the Spark out of plain navigation. */
  --hover: rgba(30, 42, 48, 0.05);
  --border: var(--slate-mist);
  --border-strong: #b7c2c2;
  --accent: var(--delhom-orange);
  --accent-hover: var(--glow-orange);
  --accent-soft: #fbead9;
  --on-accent: #ffffff;

  /* Type */
  --font-display: 'SVN-Century Gothic', 'Century Gothic', 'Jost', Futura, system-ui, sans-serif;
  --font-body: 'SVN-Century Gothic', 'Century Gothic', 'Jost', Futura, system-ui, sans-serif;
  --font-serif: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-xl: 1.75rem;
  --text-3xl: 3rem;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Space - 8px rhythm, 4px half-step */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(30, 42, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(30, 42, 48, 0.1);

  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Semantic roles - dark (anthracite canvas) */
[data-mantine-color-scheme='dark'] .cloudb-doc {
  --bg: var(--anthracite);
  --surface: var(--deep-anthracite);
  --surface-2: #38484f;
  --fg: var(--warm-alabaster);
  --fg-strong: #ffffff;
  --muted: var(--anthracite-light);
  --muted-strong: #a8b7c2;
  --hover: rgba(250, 247, 240, 0.07);
  --border: #3a4a52;
  --border-strong: #4a5b63;
  --accent: var(--glow-orange);
  --accent-hover: var(--delhom-orange);
  --accent-soft: rgba(242, 139, 58, 0.16);
  --on-accent: var(--anthracite);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.44);
}

/* ------------------------------------------------------------------- shell */
.cloudb-doc {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

.cloudb-doc a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-base);
}
.cloudb-doc a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.cloudb-doc ::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.doc-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ------------------------------------------------------------------ header */
.doc-header {
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.doc-header-left,
.doc-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.doc-header-right {
  gap: 14px;
  flex: none;
}

.doc-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.doc-logo img {
  height: 38px;
  width: auto;
  display: block;
}

.doc-crumb-sep {
  color: var(--border-strong);
  font-size: 14px;
  flex: none;
}
.doc-crumb {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted-strong);
  white-space: nowrap;
}
/* Same face, weight and colour as the "Home" crumb: the trail reads as one
   consistent line rather than a link followed by a heading. */
.doc-crumb--current {
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
}
a.doc-crumb:hover {
  color: var(--accent);
  text-decoration: none;
}

.doc-lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.doc-lang-btn {
  padding: 5px 11px;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  background: transparent;
  color: var(--muted-strong);
  transition: color var(--transition-base), background var(--transition-base);
}
.doc-lang-btn:hover {
  color: var(--fg);
}
.doc-lang-btn.is-active {
  background: var(--fg-strong);
  color: var(--bg);
  font-weight: 700;
}

.doc-icon-btn {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: 15px;
  transition: border-color var(--transition-base);
}
.doc-icon-btn:hover {
  border-color: var(--border-strong);
}

/* ----------------------------------------------------------------- sidebar */
.doc-sidebar {
  width: 296px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

/* Mantine wraps the Menu target in a div with an inline `width: fit-content`,
   which shrinks the switcher below the rest of the sidebar. */
.doc-sidebar > div:has(> .doc-appswitch) {
  width: 100% !important;
}
.doc-appswitch {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  transition: border-color var(--transition-base);
}
.doc-appswitch:hover {
  border-color: var(--border-strong);
}
.doc-appswitch-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg-strong);
  font-size: 17px;
}
.doc-appswitch-text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.doc-appswitch-name {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-appswitch-meta {
  display: block;
  font-size: 11.5px;
  color: var(--muted-strong);
}

.doc-appmenu-label,
.doc-nav-label {
  padding: 8px 10px 4px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-appmenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--transition-base);
}
.doc-appmenu-item i {
  opacity: 0.75;
  font-size: 15px;
}
.doc-appmenu-foot {
  margin-top: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted-strong);
  line-height: 1.4;
}

/* Minimal search: a rule, not a box. The sidebar has to fit 14 sections, and a
   bordered field plus Dash's own input padding made this control 52px tall. */
.doc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: text;
  transition: border-color var(--transition-base);
}
.doc-search:hover {
  border-bottom-color: var(--border-strong);
}
/* Focus has to stay visible without a box to outline. */
.doc-search:focus-within {
  border-bottom-color: var(--fg-strong);
}
.doc-search i {
  font-size: 13px;
  color: var(--muted);
}
/* Dash wraps the input in a bordered div and gives the input a fixed 32px
   height; both have to be undone or the field cannot shrink. */
.doc-search .dash-input-container {
  flex: 1;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.doc-search input {
  width: 100%;
  height: auto;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}

.doc-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}
.doc-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--muted);
}
.doc-progress-head strong {
  font-weight: 700;
  color: var(--fg-strong);
}
.doc-progress-track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}
.doc-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--fg-strong);
  transition: width 300ms;
}

.doc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-1);
}
.doc-nav-label {
  padding: 4px 12px 8px;
}

.doc-nav-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fg);
  transition: background var(--transition-base), color var(--transition-base);
}
/* Navigation rows stay neutral. `.cloudb-doc a` would paint all 14 of them with
   the Spark, which spends the accent on nothing and leaves the reader no orange
   to look for. The active row is the sidebar's single orange moment: it is the
   one thing worth the eye. */
.cloudb-doc .doc-nav-item,
.cloudb-doc .doc-appmenu-item {
  color: var(--fg);
}
.cloudb-doc .doc-nav-sub {
  color: var(--muted-strong);
}
.cloudb-doc .doc-nav-item:hover,
.cloudb-doc .doc-nav-sub:hover,
.cloudb-doc .doc-appmenu-item:hover {
  background: var(--hover);
  color: var(--fg-strong);
  text-decoration: none;
}
/* The tinted fill and the orange bar carry the "you are here" signal; the label
   itself stays readable. Orange text on accent-soft is only 2.8:1, and this is
   the row a reader looks for most. */
.cloudb-doc .doc-nav-item.is-active {
  background: var(--accent-soft);
  color: var(--fg-strong);
  font-weight: 700;
}
.cloudb-doc .doc-appmenu-item.is-current {
  color: var(--fg-strong);
  font-weight: 700;
}
.doc-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.doc-nav-num {
  width: 20px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: right;
  color: var(--muted);
  padding-top: 1px;
}
.cloudb-doc .doc-nav-item.is-active .doc-nav-num {
  color: var(--fg-strong);
}

.doc-nav-sub {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px 6px 30px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted-strong);
  transition: background var(--transition-base), color var(--transition-base);
}
.doc-nav-sub .doc-nav-num {
  width: 34px;
  font-size: 11px;
}

.doc-sidebar-foot {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-strong);
}

/* Hidden by the sidebar search filter */
.doc-nav-hidden {
  display: none !important;
}

/* -------------------------------------------------------------------- main */
.doc-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.doc-article {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* No sidebar (landing page, notices): let the card grid use the width. */
.doc-body > .doc-main:only-child .doc-article {
  max-width: 1120px;
}

.doc-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.cloudb-doc .ds-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  text-transform: none;
  text-align: left;
}
/* Subheadings share the h1's typographic treatment - Century Gothic Light with
   the same tight tracking - and differ by size alone. No bold anywhere in the
   heading scale. Sizes are a touch larger than a bold scale would need, so each
   level still outranks the 14px body without leaning on weight. */
.cloudb-doc .ds-h2,
.cloudb-doc .ds-h3,
.cloudb-doc .ds-h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  scroll-margin-top: var(--space-5);
}
.cloudb-doc .ds-h2 {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xl);
}
.cloudb-doc .ds-h3 {
  margin: var(--space-5) 0 0;
  font-size: 1.375rem;
}
.cloudb-doc .ds-h4 {
  margin: var(--space-4) 0 0;
  font-size: 1.125rem;
}

.ds-wave-rule {
  height: 2px;
  border: 0;
  margin: var(--space-2) 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent) 30%,
    var(--accent-hover) 50%,
    var(--accent) 70%,
    transparent
  );
  opacity: 0.55;
}

.cloudb-doc .ds-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.cloudb-doc .ds-caption {
  font-size: var(--text-xs);
  color: var(--muted-strong);
}

/* Redundant with the sidebar outline; shown only where the sidebar is hidden. */
.doc-in-section {
  display: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--muted-strong);
}
.doc-in-section-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.doc-in-section a {
  color: var(--muted-strong);
}
.doc-in-section a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------- callouts */
.doc-callout {
  display: flex;
  gap: 14px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--status-info);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.doc-callout--warn {
  border-left-color: var(--status-warning);
}
.doc-callout-icon {
  font-size: 19px;
  flex: none;
  margin-top: 2px;
  color: var(--status-info);
}
.doc-callout--warn .doc-callout-icon {
  color: var(--status-warning);
}
.doc-callout-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.doc-callout-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-strong);
}

/* ----------------------------------------------------------------- tables */
.cloudb-doc table {
  border-collapse: collapse;
  width: 100%;
  /* Scroll wide comparison tables rather than squeezing columns unreadable. */
  min-width: 560px;
  font-size: var(--text-sm);
}
.doc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.cloudb-doc .doc-table-wrap th {
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-strong);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.cloudb-doc .doc-table-wrap td {
  padding: 10px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.cloudb-doc .doc-table-wrap tr:last-child td {
  border-bottom: none;
}
.cloudb-doc .doc-table-wrap tbody tr:hover td {
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- figures */
.doc-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.doc-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.doc-figure figcaption {
  font-size: var(--text-xs);
  color: var(--muted-strong);
  text-align: center;
}

.cloudb-doc .doc-list {
  margin: 0;
  padding-left: 20px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}
.cloudb-doc .doc-list--compact {
  line-height: 1.45;
}

/* Bold in the guides only marks what the reader clicks (a button, a tab, a
   menu entry): draw it as a small control chip rather than heavy bold, which
   Century Gothic only has at 700. */
.cloudb-doc .doc-article strong {
  font-weight: 400;
  color: var(--fg-strong);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
}
/* A long control label (menu path, multi-word button) must not push the page
   sideways once the article is only ~300px wide. */
@media (max-width: 900px) {
  .cloudb-doc .doc-article strong {
    white-space: normal;
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

/* ------------------------------------------------------------ page footer */
.doc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.doc-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-strong);
}

.doc-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-left: auto;
}
.doc-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--accent);
  transition: background-color var(--transition-base);
}
.doc-pager-link:hover {
  background: var(--surface-2);
  text-decoration: none;
  color: var(--accent);
}

/* ------------------------------------------------------------ empty state */
.doc-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.doc-placeholder i {
  font-size: 22px;
  flex: none;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  /* The whole page scrolls, with the outline moved below the article so it
     stays reachable without pushing the content off screen. */
  .cloudb-doc {
    height: auto;
    min-height: 100vh;
  }
  .doc-body {
    flex-direction: column;
  }
  .doc-main {
    overflow: visible;
  }
  .doc-sidebar {
    order: 2;
    width: 100%;
    overflow: visible;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  .doc-sidebar-foot {
    margin-top: var(--space-2);
  }

  /* Only the current crumb fits beside the language and theme controls. */
  .doc-header-left .doc-crumb:not(.doc-crumb--current),
  .doc-header-left .doc-crumb-sep {
    display: none;
  }

  .doc-in-section {
    display: flex;
  }
  .doc-article {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
  .cloudb-doc .ds-h1 {
    font-size: var(--text-xl);
  }
  .doc-pager {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloudb-doc * {
    transition-duration: 0.01ms !important;
  }
}