/* Dolphin components, aligned with dolphin.io. Every value comes from tokens.css (see tokens.json). */

/* ---------- shared ---------- */
/* Font metrics: capitals sit in the middle of the line box, level with icons (URW Grotesk's own metrics put them ~0.09em high).
   Same faces as tokens.css / dist/fonts.css, re-declared with ascent/descent overrides; the second url() serves previews. */
@font-face { font-family: "URW Grotesk T OT"; src: url("../fonts/URWGroteskTOT-Light.otf") format("opentype"), url("../../fonts/URWGroteskTOT-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap; ascent-override: 79.4%; descent-override: 12.6%; line-gap-override: 28%; }
@font-face { font-family: "URW Grotesk T OT"; src: url("../fonts/URWGroteskTOT-Medium.otf") format("opentype"), url("../../fonts/URWGroteskTOT-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap; ascent-override: 79.4%; descent-override: 12.6%; line-gap-override: 28%; }
@font-face { font-family: "MB Empire"; src: url("../fonts/MBEmpire-Medium.otf") format("opentype"), url("../../fonts/MBEmpire-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap; ascent-override: 84.5%; descent-override: 7.5%; line-gap-override: 28%; }
/* Inter for product UI (Round 5), self-hosted (SIL OFL; never from Google Fonts). The variable file spaces evenly at 12–14px. */
@font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2"), url("../../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
/* Thinner, crisper strokes on macOS, where the light weights otherwise render heavy. */
:root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Padding and borders count inside an element's width, so full-width parts never spill out of their container. */
[class^="dl-"], [class*=" dl-"], [class^="dl-"]::before, [class*=" dl-"]::before, [class^="dl-"]::after, [class*=" dl-"]::after { box-sizing: border-box; }
.dl-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .dl-container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .dl-container { padding-inline: var(--space-7); } }
.dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dl-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dl-nav a:focus-visible, .dl-footer a:focus-visible, .dl-logos a:focus-visible, .dl-services a:focus-visible,
.dl-faq summary:focus-visible, .dl-nav-burger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs);
}
.dl-brand-gradient { background: linear-gradient(to top right, var(--surface-brand), var(--surface-brand-strong)); }
/* Brand line: a 3px green-to-blue line along the top edge of an app's content area (as under the slide headers). Decoration only. */
.dl-brand-line:not(.dl-glass-header) { position: relative; }
.dl-brand-line::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)); }

/* ---------- Button: uppercase MB Empire, green, green-to-blue on hover ---------- */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--font-size-cta-label); line-height: 1.2;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width-strong) solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; text-align: center; cursor: pointer; max-width: 100%;
  background-origin: border-box;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.dl-btn-primary { background-color: var(--action-primary); color: var(--action-primary-text); }
.dl-btn-secondary { background-color: transparent; color: var(--action-secondary); border-color: var(--action-secondary); }
.dl-btn:hover {
  color: var(--action-primary-text); border-color: transparent;
  background-image: linear-gradient(to top right, var(--action-primary), var(--blue-600));
}
.dl-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-btn:disabled { opacity: 0.5; cursor: not-allowed; background-image: none; }
.dl-btn-block { display: flex; width: 100%; }
.dl-btn-icon { width: 1.1em; height: 1.1em; fill: currentColor; }
/* On Dolphin Blue: white outline, white label */
.dl-btn-secondary.dl-btn-on-brand { color: var(--text-on-brand); border-color: var(--text-on-brand); }
.dl-btn-on-brand:focus-visible { outline-color: var(--text-on-brand); }

/* ---------- Headline ---------- */
.dl-h { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; margin: 0; color: var(--text); text-wrap: balance; }
.dl-h1 { font-size: var(--font-size-h1); line-height: 1.05; letter-spacing: 0.03em; }
.dl-h2 { font-size: var(--font-size-h2); line-height: 1.1; letter-spacing: 0.03em; }
.dl-h3 { font-size: var(--font-size-h3); line-height: 1.15; letter-spacing: 0.04em; }
.dl-h4 { font-size: var(--font-size-h4); line-height: 1.25; letter-spacing: 0.05em; }
.dl-h-gradient {
  background: linear-gradient(to top right, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- NavBar (dolphin.io) ---------- */
.dl-nav { position: relative; z-index: 5; }
.dl-nav-brand { background: color-mix(in srgb, var(--surface-brand-strong) 93%, transparent); color: var(--text-on-brand); }
.dl-nav-light { background: var(--surface-subtle); color: var(--text); border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-nav-inner { display: flex; align-items: stretch; gap: var(--space-5); min-height: calc(var(--space-8) + var(--space-2)); padding-inline: var(--space-4); }
@media (min-width: 768px) { .dl-nav-inner { min-height: var(--space-9); padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .dl-nav-inner { padding-inline: var(--space-7); } }
.dl-nav-logo { display: inline-flex; align-self: center; flex: none; margin-right: auto; position: relative; z-index: 2; }
.dl-nav-logo img { height: 34px; width: auto; display: block; }
@media (min-width: 768px) { .dl-nav-logo img { height: 40px; } }
/* Links in the bar: from 1240px, where seven fit next to the menu button and DE/EN. Below that they live in the menu panel only. */
.dl-nav-links { display: none; }
.dl-nav-links ul { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; }
.dl-nav-links a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); height: 100%; box-sizing: border-box;
  padding: var(--space-2) var(--space-3) 0; color: inherit; text-decoration: none;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--font-size-body-2); line-height: 1;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
@media (min-width: 1240px) { .dl-nav-links { display: block; } }
@media (min-width: 1360px) { .dl-nav-links a { font-size: var(--font-size-cta-label); } }
.dl-nav-chev { width: 14px; height: 14px; fill: currentColor; flex: none; }
.dl-nav-brand .dl-nav-links a:hover, .dl-nav-brand .dl-nav-links a[aria-current] { background: var(--nav-link-hover); }
.dl-nav-light .dl-nav-links a:hover { background: var(--state-hover); }
.dl-nav-light .dl-nav-links a[aria-current] { background: var(--state-selected); color: var(--state-selected-text); }
.dl-nav-action { display: flex; align-items: center; }
/* Menu button: four thin lines that fold into a cross. Always visible, as on dolphin.io. */
.dl-nav-burger { position: relative; z-index: 2; align-self: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.dl-nav-burger > span[aria-hidden] {
  position: absolute; left: calc(50% - 17.5px); width: 35px; height: var(--border-width-strong); border-radius: var(--radius-pill); background: currentColor;
  transition: transform var(--duration-base) var(--ease-standard), top var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard), left var(--duration-base) var(--ease-standard);
}
.dl-nav-burger > span:nth-child(1) { top: 8px; }
.dl-nav-burger > span:nth-child(2), .dl-nav-burger > span:nth-child(3) { top: 21px; }
.dl-nav-burger > span:nth-child(4) { top: 34px; }
.dl-nav.is-open .dl-nav-burger > span:nth-child(1), .dl-nav.is-open .dl-nav-burger > span:nth-child(4) { top: 21px; width: 0; left: 50%; }
.dl-nav.is-open .dl-nav-burger > span:nth-child(2) { transform: rotate(45deg); }
.dl-nav.is-open .dl-nav-burger > span:nth-child(3) { transform: rotate(-45deg); }
/* Languages: URW Grotesk, the current one Medium in a 2px box. */
.dl-nav-langs { position: relative; z-index: 2; align-self: center; display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.dl-nav-langs a {
  display: block; padding: 0 var(--space-1); border: var(--border-width-strong) solid transparent; border-radius: var(--radius-xs);
  font-family: var(--font-body); font-weight: 300; font-size: var(--font-size-body-2); line-height: 1.4; color: inherit; text-decoration: none;
}
.dl-nav-langs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-nav-langs a[aria-current] { font-weight: 500; border-color: currentColor; }
.dl-nav-langs a[aria-current]:hover { text-decoration: none; }
/* Menu panel: white, from the right edge, big gradient links between dashed rules. */
.dl-nav-panel {
  position: absolute; top: 0; right: 0; z-index: 1; width: clamp(360px, 40%, 640px); min-height: 100vh; overflow-y: auto;
  padding: calc(var(--space-9) + var(--space-2)) var(--space-7) var(--space-7) var(--space-8);
  background: var(--surface); color: var(--text); box-shadow: var(--elevation-3);
}
.dl-nav-panel[hidden] { display: none; }
.dl-nav-panel ul { list-style: none; margin: 0; padding: 0; }
.dl-nav-panel li { border-bottom: var(--border-width-hairline) dashed var(--border-dashed); }
.dl-nav-panel a {
  display: inline-block; padding-block: var(--space-4); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--font-size-h3); line-height: 1.15;
  background: linear-gradient(to top right, var(--gradient-start), var(--gradient-end)); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.dl-nav-panel a:hover, .dl-nav-panel a[aria-current] { background: none; color: var(--text-brand); -webkit-text-fill-color: currentColor; }
/* Open, from 768px: the panel covers the right of the bar, so the cross and the languages turn dark. */
@media (min-width: 768px) {
  .dl-nav.is-open .dl-nav-langs { color: var(--text); }
  .dl-nav.is-open .dl-nav-burger { color: var(--action-primary); }
}
/* Phones: the panel drops below the bar at full width; the bar stays as it is. */
@media (max-width: 767px) {
  .dl-nav-panel { top: 100%; width: 100%; min-height: 100vh; padding: var(--space-3) var(--space-5) var(--space-6); box-shadow: var(--elevation-2); }
}
.dl-nav-brand .dl-nav-inner a:focus-visible, .dl-nav-brand .dl-nav-burger:focus-visible { outline-color: var(--nav-focus-ring); }
@media (min-width: 768px) {
  .dl-nav.is-open .dl-nav-langs a:focus-visible, .dl-nav.is-open .dl-nav-burger:focus-visible { outline-color: var(--focus-ring); }
}

/* ---------- Hero ---------- */
.dl-hero-title {
  margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; text-wrap: balance;
  font-size: var(--font-size-display); line-height: 1.0; letter-spacing: 0.02em;
}
.dl-hero-lead { margin: var(--space-5) 0 0; max-width: var(--measure); font-size: var(--font-size-lead); line-height: 1.45; font-weight: 300; }
.dl-hero .dl-actions { margin-top: var(--space-6); }
.dl-hero-arc { position: relative; isolation: isolate; color: var(--text-on-brand); }
.dl-hero-arc .dl-container { position: relative; padding-block: var(--space-9) calc(var(--space-9) + var(--space-8)); }
.dl-hero-arc .dl-hero-text { max-width: 900px; }
.dl-hero-arc .dl-hero-title, .dl-hero-arc .dl-hero-lead { color: var(--text-on-brand); }
.dl-hero-arc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V320Q500 480 0 320Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V320Q500 480 0 320Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.dl-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top right, var(--surface-brand), var(--surface-brand-strong)); }
.dl-hero-photo + .dl-hero-overlay { opacity: 0.85; }
.dl-hero-split { background: var(--surface); }
.dl-hero-split .dl-hero-grid { display: grid; gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
@media (min-width: 1024px) { .dl-hero-split .dl-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-block: var(--space-9); } }
.dl-hero-split .dl-hero-title {
  background: linear-gradient(to top right, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.dl-hero-split .dl-hero-lead { color: var(--text-muted); }
.dl-hero-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.dl-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-hero-media.is-contain { background: var(--surface-subtle); }
.dl-hero-media.is-contain img { object-fit: contain; padding: var(--space-6); }

/* ---------- SectionHeader ---------- */
.dl-section-header { max-width: 960px; margin-bottom: var(--space-7); }
.dl-section-header.is-center { margin-inline: auto; text-align: center; }
.dl-section-lead { margin: var(--space-4) 0 0; max-width: var(--measure); font-size: var(--font-size-lead); line-height: 1.45; color: var(--text-muted); }
.dl-section-header.is-center .dl-section-lead { margin-inline: auto; }

/* ---------- Card / CardGrid ---------- */
.dl-card-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .dl-card-grid.cols-2, .dl-card-grid.cols-3, .dl-card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dl-card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dl-card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dl-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-5); color: var(--text);
}
.dl-card-media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; overflow: hidden; aspect-ratio: 16 / 9; }
.dl-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-card-icon { width: 88px; height: 88px; object-fit: contain; padding: var(--space-2); background: var(--surface-subtle); border-radius: var(--radius-pill); }
.dl-card-body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.dl-card-title { margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--font-size-h4); line-height: 1.2; color: var(--text-brand); }
.dl-card-text { margin: 0; color: var(--text-muted); font-size: var(--font-size-body-2); line-height: 1.5; }
.dl-card-action { margin-top: auto; padding-top: var(--space-3); }
.dl-card.is-brand { border-color: transparent; color: var(--text-on-brand); background: linear-gradient(to top right, var(--surface-brand), var(--surface-brand-strong)); }
.dl-card.is-brand .dl-card-title, .dl-card.is-brand .dl-card-text { color: var(--text-on-brand); }

/* ---------- ServiceGrid (Figma: service-grid, states normal / hover / active) ---------- */
.dl-services { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 275px)); justify-content: center; }
.dl-service { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.dl-service-tile {
  box-sizing: border-box; width: min(100%, 275px); aspect-ratio: 1; border-radius: 50%;
  border: var(--border-width-hairline) dashed var(--border-dashed); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--space-2); font: inherit; color: var(--text-brand); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
div.dl-service-tile { cursor: default; }
.dl-service-bar { display: block; width: 100px; height: 5px; background: currentColor; flex: none; }
.dl-service-label {
  display: block; width: 100%; padding-block: 30px;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: var(--font-size-h4); line-height: 1.2; overflow-wrap: anywhere;
}
a.dl-service-tile:hover, button.dl-service-tile:hover, .dl-service.is-active .dl-service-tile { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
.dl-service.is-active .dl-service-label { padding-bottom: 72px; }
.dl-service-tile:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-service-text { margin: 0; max-width: 32ch; font-size: var(--font-size-body-2); line-height: 1.5; color: var(--text-muted); }

/* ---------- KpiRow ---------- */
.dl-kpi-list { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; }
.dl-kpi { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); }
.dl-kpi-value { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--font-size-figure); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text-brand); }
.dl-kpi-label { margin: 0; font-size: var(--font-size-body-2); line-height: 1.4; color: var(--text-muted); max-width: 28ch; }
.dl-kpi-source { margin: var(--space-5) 0 0; font-size: var(--font-size-caption); color: var(--text-muted); }

/* ---------- LogoWall: logos stay on white in both themes ---------- */
.dl-logos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items: center; }
.dl-logos li { display: grid; place-items: center; min-height: 104px; padding: var(--space-3); background: var(--neutral-0); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-md); }
.dl-logos img { max-width: 100%; max-height: 72px; width: auto; height: auto; opacity: 0.85; transition: opacity var(--duration-fast) var(--ease-standard); }
.dl-logos li:hover img { opacity: 1; }

/* ---------- Testimonial (Figma: testimonial) / TestimonialWall ---------- */
.dl-quote {
  margin: 0; box-sizing: border-box; padding: var(--space-6); background: var(--surface-raised);
  border: var(--border-width-strong) dashed var(--border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4);
}
.dl-quote-logo { width: 105px; height: 70px; object-fit: contain; object-position: right center; }
.dl-quote blockquote { margin: 0; align-self: stretch; }
.dl-quote blockquote p { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: var(--font-size-body-1); line-height: 1.36; color: var(--text); text-wrap: pretty; }
.dl-quote-by { align-self: stretch; display: grid; font-size: var(--font-size-body-2); line-height: 1.25; font-weight: 300; color: var(--text); }
.dl-quote-wall { columns: 3 320px; column-gap: var(--space-5); }
.dl-quote-wall > .dl-quote { break-inside: avoid; margin-bottom: var(--space-5); width: 100%; }

/* ---------- CtaBand ---------- */
.dl-cta { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); }
@media (min-width: 1024px) { .dl-cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-8) var(--space-7); } }
.dl-cta-title { margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: var(--font-size-h3); line-height: 1.15; letter-spacing: 0.04em; text-wrap: balance; }
.dl-cta-text p { margin: var(--space-3) 0 0; font-size: var(--font-size-body-1); line-height: 1.5; max-width: var(--measure); }
.dl-cta-brand { background: linear-gradient(to top right, var(--surface-brand), var(--surface-brand-strong)); color: var(--text-on-brand); }
.dl-cta-subtle { background: var(--surface-subtle); color: var(--text); }
.dl-cta-subtle .dl-cta-title { color: var(--text-brand); }
.dl-cta-subtle .dl-cta-text p { color: var(--text-muted); }

/* ---------- Faq ---------- */
.dl-faq { border-top: var(--border-width-hairline) solid var(--divider); max-width: 880px; }
.dl-faq-item { border-bottom: var(--border-width-hairline) solid var(--divider); }
.dl-faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); cursor: pointer; list-style: none;
  padding: var(--space-5) 0; font-family: var(--font-body); font-weight: 500; font-size: var(--font-size-body-1); line-height: 1.35; color: var(--text);
}
.dl-faq-item summary::-webkit-details-marker { display: none; }
.dl-faq-item summary:hover { color: var(--text-link); }
.dl-faq-chev { flex: none; width: 24px; height: 24px; fill: var(--accent); transition: transform var(--duration-fast) var(--ease-standard); }
.dl-faq-item[open] .dl-faq-chev { transform: rotate(180deg); }
.dl-faq-answer { padding: 0 0 var(--space-5); max-width: var(--measure); color: var(--text-muted); font-size: var(--font-size-body-2); line-height: 1.5; }
.dl-faq-answer p { margin: 0 0 var(--space-3); }

/* ---------- Footer: blue gradient, big uppercase heads ---------- */
.dl-footer { background: linear-gradient(to bottom, var(--surface-brand), var(--surface-brand-strong)); color: var(--text-on-brand); padding-block: var(--space-8) var(--space-6); }
.dl-footer-logo { height: 36px; width: auto; display: block; margin-bottom: var(--space-7); }
.dl-footer-grid { display: grid; gap: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.dl-footer-head { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--font-size-h4); line-height: 1.1; }
.dl-footer-lines { font-style: normal; display: grid; gap: 2px; font-size: var(--font-size-body-2); line-height: 1.5; margin-bottom: var(--space-3); }
.dl-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dl-footer a { color: var(--text-on-brand); text-decoration: none; font-size: var(--font-size-body-2); }
.dl-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-footer a:focus-visible { outline-color: var(--text-on-brand); }
.dl-footer-social { display: flex !important; gap: var(--space-3) !important; }
.dl-footer-social img { width: 44px; height: 44px; display: block; }
.dl-footer-legal { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--border-width-hairline) solid color-mix(in srgb, var(--text-on-brand) 30%, transparent);
  font-size: var(--font-size-caption); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .dl-btn, .dl-service-tile, .dl-faq-chev, .dl-logos img, .dl-nav-links a, .dl-nav-burger > span { transition: none; }
}

/* ================= Product UI (Release B; Round 5: Inter) =================
   Apps and dashboards: fixed ui-* sizes in Inter (`--font-ui`, since Round 5): Regular for content, Medium for labels (buttons, table headers,
   field labels, badges, figures, tabs); MB Empire caps only for page and section titles and the sidebar's product name. No hover gradients,
   blue for selection, green for actions and brand accents. Control heights: 36px (md), 28px (sm). */
.dl-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Tones: shared by Badge, Tag and Alert ---------- */
.dl-tone-neutral { --dl-tone-text: var(--text); --dl-tone-subtle: var(--surface-sunken); --dl-tone-border: var(--border); --dl-tone-solid: var(--text); --dl-tone-on-solid: var(--surface); }
.dl-tone-success { --dl-tone-text: var(--success-text); --dl-tone-subtle: var(--success-subtle); --dl-tone-border: var(--success-border); --dl-tone-solid: var(--success-solid); --dl-tone-on-solid: var(--success-on-solid); }
.dl-tone-warning { --dl-tone-text: var(--warning-text); --dl-tone-subtle: var(--warning-subtle); --dl-tone-border: var(--warning-border); --dl-tone-solid: var(--warning-solid); --dl-tone-on-solid: var(--warning-on-solid); }
.dl-tone-danger { --dl-tone-text: var(--danger-text); --dl-tone-subtle: var(--danger-subtle); --dl-tone-border: var(--danger-border); --dl-tone-solid: var(--danger-solid); --dl-tone-on-solid: var(--danger-on-solid); }
.dl-tone-info { --dl-tone-text: var(--info-text); --dl-tone-subtle: var(--info-subtle); --dl-tone-border: var(--info-border); --dl-tone-solid: var(--info-solid); --dl-tone-on-solid: var(--info-on-solid); }
.dl-tone-fatal { --dl-tone-text: var(--severity-fatal-text); --dl-tone-subtle: var(--severity-fatal-subtle); --dl-tone-border: var(--severity-fatal-border); --dl-tone-solid: var(--severity-fatal-solid); --dl-tone-on-solid: var(--severity-fatal-on-solid); }
.dl-tone-error { --dl-tone-text: var(--severity-error-text); --dl-tone-subtle: var(--severity-error-subtle); --dl-tone-border: var(--severity-error-border); --dl-tone-solid: var(--severity-error-solid); --dl-tone-on-solid: var(--severity-error-on-solid); }
.dl-tone-debug { --dl-tone-text: var(--severity-debug-text); --dl-tone-subtle: var(--severity-debug-subtle); --dl-tone-border: var(--severity-debug-border); --dl-tone-solid: var(--severity-debug-solid); --dl-tone-on-solid: var(--severity-debug-on-solid); }

/* ---------- AppButton ---------- */
.dl-abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-4); max-width: 100%;
  font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; white-space: nowrap;
  color: var(--text); background: transparent; text-decoration: none; cursor: pointer;
  border: var(--border-width-hairline) solid transparent; border-radius: var(--radius-sm);
  transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard),
              border-color var(--duration-instant) var(--ease-standard);
}
.dl-abtn-sm { min-height: 28px; padding: 0 var(--space-3); gap: var(--space-1); font-size: var(--font-size-ui-sm); line-height: 16px; }
.dl-abtn-icon-only { width: 36px; padding: 0; }
.dl-abtn-sm.dl-abtn-icon-only { width: 28px; }
.dl-abtn-block { display: flex; width: 100%; }
.dl-abtn-label { overflow: hidden; text-overflow: ellipsis; }
.dl-abtn-primary { background: var(--action-primary); color: var(--action-primary-text); }
.dl-abtn-primary:hover { background: var(--action-primary-hover); }
/* Round 7 (user 2026-11-03, variant C): `secondary` has a Dolphin Blue label and a light blue outline, so it differs from the `neutral`
   toggles (grey outline, `text` label); green stays for the one primary action. Was the neutral look since Round 5 (A9). */
.dl-abtn-secondary { color: var(--text-brand); border-color: var(--button-secondary-border); background: var(--surface); }
.dl-abtn-secondary:hover { background: var(--state-hover); }
.dl-abtn-ghost:hover { background: var(--state-hover); }
.dl-abtn-secondary:active, .dl-abtn-ghost:active { background: var(--state-pressed); }
.dl-abtn-secondary:active { color: var(--text-link-hover); }  /* blue-400 on the dark pressed tint is 4.45:1 */
.dl-abtn-danger { color: var(--danger-text); border-color: var(--danger-text); }
.dl-abtn-danger:hover { background: var(--danger-subtle); }
.dl-abtn[aria-pressed="true"] { background: var(--state-selected); color: var(--state-selected-text); border-color: transparent; }
.dl-abtn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-abtn:disabled { background: var(--state-disabled); color: var(--state-disabled-text); border-color: transparent; cursor: not-allowed; }
.dl-abtn-ghost:disabled { background: transparent; }
/* Outlined buttons keep a light border when disabled, so a group of them ("Older" / "Newer", filter segments) stays visually whole; only the label greys out. */
.dl-abtn-secondary:disabled, .dl-abtn-danger:disabled, .dl-filter .dl-menu-trigger:disabled { background: transparent; border-color: var(--border); }

/* ---------- Fields: TextField, Select ---------- */
.dl-field { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.dl-field-label { font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; color: var(--text); }
.dl-field-msg { display: flex; gap: var(--space-1); align-items: flex-start; margin: 0;
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); }
.dl-field-msg .dl-icon { margin-top: 1px; }
.dl-field-msg.is-error { color: var(--danger-text); }
.dl-field.is-disabled .dl-field-label { color: var(--state-disabled-text); }
.dl-input {
  display: block; width: 100%; min-height: 36px; margin: 0; padding: 0 var(--space-3);
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text);
  background: var(--surface); border: var(--border-width-hairline) solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--duration-instant) var(--ease-standard);
}
textarea.dl-input { min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; }
.dl-input::placeholder { color: var(--text-muted); opacity: 1; }
.dl-input:hover { border-color: var(--text-muted); }
.dl-input:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
/* Date and time fields move focus into their parts, where Chromium doesn't match :focus-visible: ring them on :focus. */
.dl-input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]):is(:focus, :focus-within) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-input[aria-invalid="true"] { border-color: var(--danger-text); }
.dl-input:disabled { background: var(--state-disabled); color: var(--state-disabled-text); border-color: var(--border); cursor: not-allowed; }
.dl-input.is-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code); }
.dl-input-wrap, .dl-select { position: relative; }
.dl-input-icon, .dl-select-chev { position: absolute; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.dl-input-icon { left: var(--space-3); }
.dl-input.has-icon { padding-left: calc(var(--space-3) + 16px + var(--space-2)); }
.dl-select-chev { right: var(--space-3); }
.dl-select select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--space-3) + 16px + var(--space-2)); cursor: pointer; }

/* ---------- Checkbox, RadioGroup, Switch ---------- */
.dl-check { position: relative; display: inline-grid; grid-template-columns: 18px auto; column-gap: var(--space-2); align-items: start; font-family: var(--font-ui); }
.dl-check-input { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.dl-check-box {
  grid-column: 1; grid-row: 1; width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center;
  color: var(--surface); background: var(--surface); border: var(--border-width-hairline) solid var(--border-strong); border-radius: var(--radius-xs);
  transition: background-color var(--duration-instant) var(--ease-standard), border-color var(--duration-instant) var(--ease-standard);
}
.dl-check-box .dl-icon { display: none; stroke-width: 3; }
.dl-check-label { grid-column: 2; grid-row: 1; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text); cursor: pointer; }
.dl-check-hint { grid-column: 2; grid-row: 2; font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); }
.dl-check-input:hover + .dl-check-box { border-color: var(--text-muted); }
.dl-check-input:checked + .dl-check-box, .dl-check-input:indeterminate + .dl-check-box { background: var(--state-selected-indicator); border-color: var(--state-selected-indicator); }
.dl-check-input:checked + .dl-check-box .dl-check-mark { display: block; }
.dl-check-input:indeterminate + .dl-check-box .dl-check-mark { display: none; }
.dl-check-input:indeterminate + .dl-check-box .dl-check-dash { display: block; }
.dl-check-input:focus-visible + .dl-check-box, .dl-check-input:focus-visible + .dl-switch-track {
  outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-check-input:disabled { cursor: not-allowed; }
.dl-check-input:disabled + .dl-check-box { background: var(--state-disabled); border-color: var(--border); color: var(--state-disabled-text); }
.dl-check.is-disabled .dl-check-label { color: var(--state-disabled-text); cursor: not-allowed; }
.dl-radio .dl-check-box { border-radius: var(--radius-pill); }
.dl-radio .dl-check-box::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--state-selected-indicator); transform: scale(0);
  transition: transform var(--duration-instant) var(--ease-standard); }
.dl-radio .dl-check-input:checked + .dl-check-box { background: var(--surface); }
.dl-radio .dl-check-input:checked + .dl-check-box::after { transform: scale(1); }
.dl-radio .dl-check-input:disabled + .dl-check-box::after { background: var(--state-disabled-text); }
.dl-radio-group { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.dl-radio-group legend { padding: 0; margin-bottom: var(--space-2); }
.dl-radio-group.is-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.dl-switch { grid-template-columns: 36px auto; }
.dl-switch .dl-check-input { width: 36px; height: 20px; top: 1px; }
.dl-switch-track { grid-column: 1; grid-row: 1; position: relative; width: 36px; height: 20px; margin-top: 1px;
  background: var(--border-strong); border-radius: var(--radius-pill); transition: background-color var(--duration-fast) var(--ease-standard); }
.dl-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--elevation-1); transition: transform var(--duration-fast) var(--ease-standard); }
.dl-check-input:checked + .dl-switch-track { background: var(--state-selected-indicator); }
.dl-check-input:checked + .dl-switch-track::after { transform: translateX(16px); }
.dl-check-input:disabled + .dl-switch-track { background: var(--state-disabled); }
.dl-check-input:disabled + .dl-switch-track::after { box-shadow: none; background: var(--border); }

/* ---------- Badge, Tag ---------- */
.dl-badge, .dl-tag {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 22px; padding: 0 var(--space-2); max-width: 100%;
  font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; white-space: nowrap;
  border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-xs);
}
.dl-badge { color: var(--dl-tone-text); background: var(--dl-tone-subtle); border-color: var(--dl-tone-border); }
.dl-badge-solid { color: var(--dl-tone-on-solid); background: var(--dl-tone-solid); border-color: var(--dl-tone-solid); }
.dl-tag { color: var(--text); background: var(--surface-sunken); border-color: var(--border); }
.dl-tag-remove { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: calc(-1 * var(--space-1)); padding: 0;
  color: var(--text-muted); background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer; }
.dl-tag-remove:hover { color: var(--text); background: var(--state-hover); }
.dl-chip { min-height: 28px; padding: 0 var(--space-3); cursor: pointer; background: var(--surface); border-color: var(--border-strong);
  transition: background-color var(--duration-instant) var(--ease-standard); }
.dl-chip:hover { background: var(--state-hover); }
.dl-chip[aria-pressed="true"] { color: var(--state-selected-text); background: var(--state-selected); border-color: var(--state-selected-indicator); }
.dl-chip:disabled { color: var(--state-disabled-text); background: var(--state-disabled); border-color: var(--border); cursor: not-allowed; }
.dl-tag-remove:focus-visible, .dl-chip:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---------- Alert ---------- */
.dl-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui); color: var(--text); background: var(--dl-tone-subtle);
  border: var(--border-width-hairline) solid var(--dl-tone-border); border-radius: var(--radius-panel); }
.dl-alert-banner { border-width: 0 0 var(--border-width-hairline); border-radius: var(--radius-none); padding-inline: var(--space-5); }
.dl-alert-icon { color: var(--dl-tone-text); margin-top: 1px; }
.dl-alert-body { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.dl-alert-title { margin: 0; font-weight: 500; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-alert-text { font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-alert-text p { margin: 0; }
.dl-alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.dl-alert-action { border-color: var(--border-strong); }
.dl-alert-close { flex: none; margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 0; color: var(--text-muted); }

/* ================= Release B, part 2 ================= */
.dl-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- DataTable ---------- */
.dl-table-wrap { overflow: auto; background: var(--surface); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); }
.dl-table-wrap:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-ui); color: var(--text); }
.dl-table th, .dl-table td { box-sizing: border-box; padding: 0 var(--space-4); text-align: left; vertical-align: middle; border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-table th { position: sticky; top: 0; z-index: 1; height: 40px; background: var(--table-head);
  font-weight: 500; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); white-space: nowrap; }
/* Round 5 (A10): 42px rows (11px padding, 20px line height) with light row lines; the header band keeps the full `border`. */
.dl-table td { height: 42px; padding-block: 11px; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 20px; border-bottom-color: var(--table-row-line); }
.dl-table.is-compact th { height: 32px; }
.dl-table.is-compact td { height: 32px; padding-block: 6px; }
.dl-table tbody tr:last-child td { border-bottom: 0; }
.dl-table tbody tr:hover td { background: var(--row-hover); }
.dl-table tbody tr.is-selected td { background: var(--row-selected); }
.dl-table .is-end { text-align: right; white-space: nowrap; }
.dl-table .is-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-table .is-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code); }
.dl-table th.is-mono { font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-sm); }
.dl-table a { color: var(--text-link); text-decoration: none; font-weight: 400; }
/* Secondary text in a selected row switches to the selection's muted colour, so it keeps 4.5:1 on `row-selected`. */
.dl-table tr.is-selected { --text-muted: var(--state-selected-text-muted); --text-secondary: var(--state-selected-text-muted); }
.dl-table a:hover { text-decoration: underline; }
.dl-table-select { width: 18px; padding-right: 0 !important; }
.dl-table-select .dl-check { display: grid; vertical-align: middle; }
.dl-table-select .dl-check-box { margin-top: 0; }
.dl-table-select .dl-check-input { top: 0; }
.dl-table-sort { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 calc(-1 * var(--space-1)); padding: var(--space-1);
  font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer; }
.dl-table th.is-end .dl-table-sort { flex-direction: row-reverse; }
.dl-table-sort .dl-icon { opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
.dl-table-sort:hover { color: var(--text); }
.dl-table-sort:hover .dl-icon, .dl-table-sort:focus-visible .dl-icon, .dl-table-sort.is-sorted .dl-icon { opacity: 1; }
.dl-table-sort.is-sorted { color: var(--text); }
.dl-table-sort:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 0; }
.dl-table td.dl-table-empty { height: 96px; text-align: center; color: var(--text-muted); }

/* ---------- AppSidebar ---------- */
.dl-side { display: flex; flex-direction: column; width: 240px; height: 100%; min-height: 0; padding: var(--space-4) 0 var(--space-3);
  font-family: var(--font-ui); color: var(--nav-text); background: var(--nav-surface);
  transition: width var(--duration-base) var(--ease-standard); }
.dl-side.is-collapsed { width: 64px; }
.dl-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-5); margin-bottom: var(--space-4); }
.dl-side.is-collapsed .dl-side-head { flex-direction: column; padding: 0; gap: var(--space-3); }
.dl-side-logo { display: inline-flex; border-radius: var(--radius-xs); }
.dl-side-logo img { display: block; height: 22px; width: auto; }
.dl-side.is-collapsed .dl-side-logo img { height: 28px; }
.dl-side-toggle, .dl-side-item { color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.dl-side-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); color: var(--nav-text); }
.dl-side-toggle:hover { background: var(--nav-item-hover); }
.dl-side-body { flex: 1; min-height: 0; overflow-y: auto; }
.dl-side-section + .dl-side-section { margin-top: var(--space-4); }
.dl-side.is-collapsed .dl-side-section + .dl-side-section { margin: var(--space-3) var(--space-3) 0; padding-top: var(--space-3); border-top: var(--border-width-hairline) solid var(--nav-divider); }
/* Round 5 (A13): group headings 11px Medium caps, the one place in apps with small caps (R1). 11px is below the type scale on purpose. */
.dl-side-heading { margin: 0 0 var(--space-1); padding: 14px var(--space-5) var(--space-1); font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--nav-text-muted); }
.dl-side.is-collapsed .dl-side-heading { display: none; }
.dl-side ul { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 2px; }
/* Round 5 (A13): 34px items in 14px Inter Regular, labels at rest a touch softer (`nav-text-soft`); the current item is Medium, on its fill with a 1px ring. */
.dl-side-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px;
  font-weight: 400; font-size: var(--font-size-ui-lg); line-height: 20px; text-align: left; text-decoration: none; color: var(--nav-text-soft);
  border-radius: var(--radius-sm); transition: background-color var(--duration-instant) var(--ease-standard); }
.dl-side-item > .dl-icon { width: 18px; height: 18px; color: var(--nav-text-muted); }
.dl-side-item:hover { color: var(--nav-text); background: var(--nav-item-hover); }
.dl-side-item.is-current { color: var(--nav-text-current); background: var(--nav-item-current); box-shadow: inset 0 0 0 1px var(--nav-item-current-ring); font-weight: 500; }
.dl-side-item.is-current > .dl-icon { color: var(--nav-icon-current); }
.dl-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-side-count { font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--nav-text-muted); font-variant-numeric: tabular-nums; }
.dl-side-item.is-current .dl-side-count { color: var(--nav-text-current); }
.dl-side.is-collapsed .dl-side-item { justify-content: center; padding: 0; }
.dl-side.is-collapsed .dl-side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dl-side-foot { padding-top: var(--space-3); margin-top: var(--space-3); border-top: var(--border-width-hairline) solid var(--nav-divider); }
.dl-side-toggle:focus-visible, .dl-side-item:focus-visible, .dl-side-logo:focus-visible { outline: var(--focus-ring-width) solid var(--nav-focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
/* Light tone (tone="light"): a soft grey column; the current item takes the blue selection look of rows. The default is the Dolphin Blue column. */
.dl-side-light {
  --nav-surface: var(--surface-subtle); --nav-text: var(--text); --nav-text-muted: var(--text-muted); --nav-item-hover: var(--state-hover);
  --nav-item-current: var(--state-selected); --nav-text-current: var(--state-selected-text); --nav-icon-current: var(--state-selected-text); --nav-divider: var(--border); --nav-focus-ring: var(--focus-ring);
  --nav-text-soft: var(--text); --nav-item-current-ring: transparent;
  border-right: var(--border-width-hairline) solid var(--border);
}
/* The light tone turns dark grey in the dark theme: show the white logo there (`srcDark`). */
.dl-side-img-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dl-side-img-light { display: none !important; } :root:not([data-theme="light"]) .dl-side-img-dark { display: block !important; } }
:root[data-theme="dark"] .dl-side-img-light { display: none !important; }
:root[data-theme="dark"] .dl-side-img-dark { display: block !important; }

/* ---------- Tabs ---------- */
.dl-tab-list { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); flex: none; height: 40px; padding: 0 var(--space-3);
  font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; white-space: nowrap; text-decoration: none;
  color: var(--text-muted); background: none; border: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; cursor: pointer;
  transition: color var(--duration-instant) var(--ease-standard), background-color var(--duration-instant) var(--ease-standard); }
.dl-tabs.is-sm .dl-tab { height: 32px; padding: 0 var(--space-2); font-size: var(--font-size-ui-sm); line-height: 16px; }
.dl-tab:hover { color: var(--text); background: var(--state-hover); }
.dl-tab.is-current { color: var(--text); }
.dl-tab.is-current::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: var(--state-indicator-width);
  background: var(--tab-indicator); }
.dl-tabs.is-sm .dl-tab.is-current::after { left: var(--space-1); right: var(--space-1); }
.dl-tab:disabled { color: var(--state-disabled-text); background: none; cursor: not-allowed; }
.dl-tab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.dl-tab-count { min-width: 20px; padding: 1px 6px; font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--surface-sunken); border-radius: var(--radius-pill); }
.dl-tab.is-current .dl-tab-count { color: var(--state-selected-text); background: var(--state-selected); }
.dl-tab-panel { padding-top: var(--space-4); }
.dl-tab-panel:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---------- DropdownMenu, InfoTip popover ---------- */
.dl-menu-wrap, .dl-infotip, .dl-tip-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.dl-menu { position: absolute; z-index: 20; top: calc(100% + var(--space-1)); left: 0; min-width: 200px; max-width: 320px; padding: var(--space-1);
  background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--elevation-2); }
.dl-menu.is-end { left: auto; right: 0; }
.dl-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; padding: 0 var(--space-2);
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-md); line-height: 18px; text-align: left; text-decoration: none;
  color: var(--text); background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer; }
.dl-menu-item:hover, .dl-menu-item:focus { background: var(--state-hover); outline: none; }
.dl-menu-item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.dl-menu-item .dl-icon { color: var(--text-muted); }
.dl-menu-check { display: inline-grid; place-items: center; width: 16px; flex: none; }
.dl-menu-check .dl-icon { color: var(--text-brand); }
.dl-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-menu-hint { font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-menu-item.is-danger, .dl-menu-item.is-danger .dl-icon { color: var(--danger-text); }
.dl-menu-item.is-danger:hover, .dl-menu-item.is-danger:focus { background: var(--danger-subtle); }
.dl-menu-item.is-disabled, .dl-menu-item.is-disabled .dl-icon { color: var(--state-disabled-text); cursor: not-allowed; background: none; }
.dl-menu-sep { height: var(--border-width-hairline); margin: var(--space-1) calc(-1 * var(--space-1)); background: var(--border); }
.dl-menu-heading { padding: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-ui); font-weight: 500;
  font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-infotip-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; color: var(--text-muted);
  background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.dl-infotip-btn:hover, .dl-infotip-btn[aria-expanded="true"] { color: var(--text); background: var(--state-hover); }
.dl-infotip-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 0; }
.dl-popover { position: absolute; z-index: 20; top: calc(100% + var(--space-1)); left: calc(-1 * var(--space-2)); width: max-content; max-width: 300px;
  display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); font-family: var(--font-ui); color: var(--text);
  background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--elevation-2); }
.dl-popover.is-end { left: auto; right: calc(-1 * var(--space-2)); }
.dl-popover[hidden], .dl-tooltip[hidden] { display: none; }
.dl-popover-title { font-weight: 500; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-popover-text { font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; }

/* ---------- Tooltip ---------- */
/* Round 5 (A11): one tooltip for the app: dark glass, shadow, 12/18px Inter, up to 340px. The pointer can move onto it (WCAG 1.4.13):
   it takes pointer events, and an invisible bridge covers the gap to its trigger. */
.dl-tooltip { position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); width: max-content; max-width: 340px; padding: 6px var(--space-3);
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 18px; color: var(--tooltip-text); text-align: left; white-space: normal;
  background: var(--tooltip-surface-glass); -webkit-backdrop-filter: blur(var(--blur-menu)); backdrop-filter: blur(var(--blur-menu));
  border-radius: var(--radius-sm); box-shadow: var(--elevation-2); }
.dl-tooltip::before { content: ""; position: absolute; left: 0; right: 0; height: 8px; }
.dl-tooltip-top { bottom: calc(100% + 6px); }
.dl-tooltip-top::before { top: 100%; }
.dl-tooltip-bottom { top: calc(100% + 6px); }
.dl-tooltip-bottom::before { bottom: 100%; }
.dl-tooltip.is-rich { min-width: 200px; padding: var(--space-2) var(--space-3); }
.dl-tooltip-title { display: block; font-weight: 500; }
.dl-tooltip-foot { display: block; margin-top: 6px; padding-top: 6px; border-top: var(--border-width-hairline) solid color-mix(in srgb, var(--tooltip-text) 20%, transparent); opacity: 0.9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dl-tooltip { box-shadow: var(--elevation-2), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } }
:root[data-theme="dark"] .dl-tooltip { box-shadow: var(--elevation-2), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dl-tooltip { background: var(--tooltip-surface); } }
@media (prefers-reduced-transparency: reduce) { .dl-tooltip { background: var(--tooltip-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ================= Release C, part 1 ================= */

/* ---------- Spinner, EmptyState ---------- */
.dl-spinner { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.dl-spinner-svg { flex: none; animation: dl-spin 0.9s linear infinite; }
.dl-spinner-track { stroke: var(--border); stroke-width: 2.5; }
.dl-spinner-arc { stroke: var(--state-selected-indicator); stroke-width: 2.5; stroke-linecap: round; }
.dl-spinner-label { font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; }
@keyframes dl-spin { to { transform: rotate(360deg); } }
.dl-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); text-align: center; font-family: var(--font-ui); color: var(--text); }
.dl-empty.is-compact { padding: var(--space-6) var(--space-4); }
.dl-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border-radius: var(--radius-pill);
  color: var(--text-muted); background: var(--surface-sunken); }
.dl-empty.is-error .dl-empty-icon { color: var(--danger-text); background: var(--danger-subtle); }
.dl-empty.is-loading .dl-spinner { margin-bottom: var(--space-2); }
.dl-empty-title { margin: 0; font-weight: 500; font-size: var(--font-size-ui-lg); line-height: 20px; }
.dl-empty-text { max-width: 48ch; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text-muted); }
.dl-empty-text p { margin: 0; }
.dl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }

/* ---------- Dialog, SidePanel ---------- */
.dl-dialog, .dl-panel { padding: 0; color: var(--text); font-family: var(--font-ui); background: var(--surface-raised);
  border: var(--border-width-hairline) solid var(--border); box-shadow: var(--elevation-3); }
.dl-dialog { width: min(480px, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-6)); border-radius: var(--radius-panel); }
.dl-dialog.is-sm { width: min(400px, calc(100vw - 2 * var(--space-4))); }
.dl-dialog.is-lg { width: min(640px, calc(100vw - 2 * var(--space-4))); }
.dl-dialog[open], .dl-panel[open] { display: flex; flex-direction: column; }
.dl-dialog:focus, .dl-panel:focus { outline: none; }
.dl-dialog::backdrop, .dl-panel::backdrop { background: var(--overlay-scrim, rgba(11, 13, 18, 0.48)); }
.dl-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.dl-dialog-title { margin: 0; font-weight: 500; font-size: var(--font-size-ui-lg); line-height: 20px; }
.dl-dialog-head .dl-abtn { margin: -2px calc(-1 * var(--space-2)) 0 0; color: var(--text-muted); }
.dl-dialog-body { padding: var(--space-3) var(--space-5) var(--space-5); overflow-y: auto; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-dialog-body p { margin: 0 0 var(--space-3); }
.dl-dialog-body p:last-child { margin-bottom: 0; }
.dl-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }
.dl-panel { position: fixed; inset: 0 0 0 auto; width: min(400px, 100vw); max-width: none; height: 100vh; max-height: none; margin: 0;
  border-width: 0 0 0 var(--border-width-hairline); border-radius: var(--radius-none); }
.dl-panel.is-lg { width: min(560px, 100vw); }
.dl-panel[open] { animation: dl-slide-in var(--duration-base) var(--ease-standard); }
.dl-panel-head { padding-bottom: var(--space-4); border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-panel-actions { padding-top: var(--space-4); border-top: var(--border-width-hairline) solid var(--border); }
@keyframes dl-slide-in { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- Toast ---------- */
.dl-toaster { position: fixed; z-index: 40; right: var(--space-5); bottom: var(--space-5); pointer-events: none; }
.dl-toaster-list { display: grid; gap: var(--space-2); justify-items: end; }
.dl-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3); width: min(400px, calc(100vw - 2 * var(--space-5)));
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); font-family: var(--font-ui); color: var(--text);
  background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--elevation-2);
  animation: dl-toast-in var(--duration-base) var(--ease-standard); }
.dl-toast-icon { color: var(--dl-tone-text); margin-top: 4px; }
.dl-toast-body { flex: 1; min-width: 0; padding: 3px 0; }
.dl-toast-title { margin: 0; font-weight: 500; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-toast-text { margin: 0; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text-muted); }
.dl-toast .dl-abtn { flex: none; }
.dl-toast .dl-abtn-icon-only { color: var(--text-muted); }
@keyframes dl-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- SearchField ---------- */
.dl-search { position: relative; }
.dl-search-input { padding-right: calc(var(--space-2) + 24px + var(--space-1)); }
.dl-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dl-search-clear { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; color: var(--text-muted); background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer; }
.dl-search-clear:hover { color: var(--text); background: var(--state-hover); }
.dl-search-clear:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 0; }
.dl-search-list { position: absolute; z-index: 20; top: calc(100% + var(--space-1)); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: var(--space-1);
  list-style: none; background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--elevation-2); }
.dl-search-list[hidden] { display: none; }
.dl-search-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; padding: 0 var(--space-2);
  border-radius: var(--radius-xs); cursor: pointer; }
.dl-search-opt.is-active { background: var(--state-hover); }
.dl-search-opt-label { font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-md); line-height: 18px; color: var(--text); }
.dl-search-opt-label.is-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code); }
.dl-search-opt-hint { font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }

/* ---------- FilterBar ---------- */
.dl-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dl-filterbar-segs { display: inline-flex; flex-wrap: wrap; flex: 0 1 auto; }
.dl-filter .dl-abtn-label { overflow: visible; }
.dl-filterbar-rest { flex: 1; min-width: 200px; }
.dl-filterbar-rest .dl-input { min-height: 28px; }
.dl-filter .dl-menu-trigger { color: var(--text); background: var(--surface); border-color: var(--border-strong); border-radius: 0; margin-left: calc(-1 * var(--border-width-hairline)); }
.dl-filter .dl-menu-trigger:hover { background: var(--state-hover); }
.dl-filter .dl-menu-trigger:focus-visible { position: relative; z-index: 1; }
.dl-filter:first-child .dl-menu-trigger { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dl-filter:last-child .dl-menu-trigger { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dl-filter:only-child .dl-menu-trigger { border-radius: var(--radius-sm); }
.dl-filter .dl-menu-trigger { font-weight: 400; }
.dl-filter-name { color: var(--text-muted); }

/* ---------- Pagination ---------- */
.dl-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); font-family: var(--font-ui); }
.dl-page-range { font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.dl-page-buttons { display: flex; gap: var(--space-1); }

/* ---------- Avatar ---------- */
.dl-avatar { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: var(--radius-pill); vertical-align: middle; user-select: none;
  font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.02em; background: var(--surface-sunken); color: var(--text); }
.dl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-avatar-24 { width: 24px; height: 24px; font-size: var(--font-size-ui-xs); }
.dl-avatar-32 { width: 32px; height: 32px; font-size: var(--font-size-ui-sm); }
.dl-avatar-40 { width: 40px; height: 40px; font-size: var(--font-size-ui-md); }
.dl-avatar-64 { width: 64px; height: 64px; font-size: var(--font-size-ui-lg); }

/* ---------- Breadcrumbs ---------- */
.dl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-md); line-height: 18px; }
.dl-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.dl-crumbs a { color: var(--text-muted); text-decoration: none; border-radius: var(--radius-xs); }
.dl-crumbs a:hover { color: var(--text); text-decoration: underline; }
.dl-crumbs a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.dl-crumbs .is-current { color: var(--text); }
.dl-crumbs-sep { margin: 0 var(--space-2); color: var(--text-subtle); }

/* ---------- CodeBlock, DetailList ---------- */
.dl-code { overflow: hidden; background: var(--surface-sunken); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-sm); }
.dl-code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-code-title { font-family: var(--font-mono); font-size: var(--font-size-code-sm); line-height: 16px; color: var(--code-comment); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-code-pre { margin: 0; padding: var(--space-2) 0; overflow-x: auto; font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code); line-height: 18px; color: var(--text); tab-size: 4; }
.dl-code-pre:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.dl-code-pre code { display: block; min-width: max-content; font: inherit; }
.dl-code.is-wrap .dl-code-pre code { min-width: 0; }
.dl-code-line { position: relative; display: flex; padding: 0 var(--space-4) 0 var(--space-3); }
.dl-code.is-wrap .dl-code-text { white-space: pre-wrap; word-break: break-word; }
.dl-code-line.is-hl { background: var(--state-selected); font-weight: 500; }
.dl-code-line.is-hl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--state-indicator-width); background: var(--state-selected-indicator); }
.dl-code-num { flex: none; min-width: 3ch; margin-right: var(--space-4); text-align: right; color: var(--code-comment); user-select: none; font-variant-numeric: tabular-nums; }
.dl-code-text { white-space: pre; }
.dl-code-keyword { color: var(--code-keyword); }
.dl-code-string { color: var(--code-string); }
.dl-code-number { color: var(--code-number); }
.dl-code-comment { color: var(--code-comment); }
.dl-details { display: grid; margin: 0; font-family: var(--font-ui); }
.dl-details.is-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc(50% - var(--space-6)))), 1fr)); column-gap: var(--space-6); }
.dl-details-row { display: grid; grid-template-columns: minmax(120px, 35%) 1fr; gap: var(--space-4); padding: var(--space-2) 0; border-top: var(--border-width-hairline) solid var(--border); }
/* Lines sit between rows only: each row draws its line on top, and the list clips the top 1px, which hides the first row's line in every
   column. No line under the last row; the card or section edge closes the list. */
.dl-details { margin-top: calc(-1 * var(--border-width-hairline)); clip-path: inset(var(--border-width-hairline) 0 0 0); }
.dl-details dt { padding-top: 2px; font-weight: 500; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); }
.dl-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 20px; color: var(--text); }
.dl-details dd.is-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code); }
.dl-details-none { color: var(--text-muted); }
/* Truncated values (long release names without spaces): one line with an ellipsis; the full value is in a tooltip on hover and focus. */
.dl-details dd.is-truncate { overflow-wrap: normal; }
.dl-details dd.is-truncate .dl-tip-wrap { display: block; min-width: 0; }
.dl-details-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-xs); }
.dl-details-trunc:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Fab ---------- */
.dl-fab { position: fixed; z-index: 30; right: var(--space-5); bottom: var(--space-5); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5) 0 var(--space-4); font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px;
  color: var(--action-primary-text); background: var(--action-primary); border: 0; border-radius: var(--radius-pill); box-shadow: var(--elevation-3);
  text-decoration: none; cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard); }
.dl-fab.is-icon-only { width: 48px; padding: 0; }
.dl-fab.is-static { position: static; }
.dl-fab:hover { background: var(--action-primary-hover); }
.dl-fab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ================= Release C, part 2: data visualisation ================= */
.dl-chart-title { margin: 0 0 var(--space-3); font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; color: var(--text); }
.dl-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-3);
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--chart-label); }
.dl-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dl-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }

/* ---------- Sparkline ---------- */
.dl-spark { position: relative; display: block; flex: none; }
.dl-spark.is-bar { display: flex; align-items: flex-end; gap: var(--chart-stack-gap); }
.dl-spark-bar { flex: 1 1 0; min-width: 1px; background: var(--chart-sparkline); border-radius: 2px 2px 0 0; }
.dl-spark-bar.is-empty { height: 2px; background: var(--chart-empty); border-radius: 0; }
.dl-spark-plot { position: absolute; inset: 5px 5px; }
.dl-spark-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dl-spark-line { fill: none; stroke: var(--chart-sparkline); stroke-width: var(--chart-line-width); stroke-linecap: round; stroke-linejoin: round; }
.dl-spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--radius-pill); background: var(--chart-sparkline);
  box-shadow: 0 0 0 2px var(--dl-spark-ring, var(--surface)); }

/* ---------- StatTile ---------- */
.dl-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4); font-family: var(--font-ui); color: var(--text); text-decoration: none;
  background: var(--surface); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); --dl-spark-ring: var(--surface); }
.dl-stat.is-link:hover { border-color: var(--border-strong); }
.dl-stat.is-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-stat-label { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-weight: 500; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); }
.dl-stat-label .dl-infotip-btn { width: 20px; height: 20px; }
.dl-stat-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.dl-stat-value { margin: 0; font-weight: 500; font-size: var(--font-size-ui-figure); line-height: 40px; white-space: nowrap; }
.dl-stat-unit { margin-left: 2px; font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text-muted); }
.dl-stat-spark { margin-bottom: 2px; }
.dl-stat-status { display: flex; margin: 0 0 var(--space-1); }
.dl-stat-delta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: auto 0 0; font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-stat-delta.is-good, .dl-stat-delta.is-bad { font-weight: 500; }
.dl-stat-delta .dl-icon { margin-right: -2px; }
.dl-stat-delta.is-good .dl-icon, .dl-stat-delta.is-good .dl-stat-delta-value { color: var(--success-text); }
.dl-stat-delta.is-bad .dl-icon, .dl-stat-delta.is-bad .dl-stat-delta-value { color: var(--danger-text); }
.dl-stat-period { color: var(--text-muted); }

/* ---------- RangeBars ---------- */
.dl-range { margin: 0; font-family: var(--font-ui); }
.dl-range table { width: 100%; border-collapse: collapse; }
.dl-range th, .dl-range td { padding: 0 0 0 var(--space-3); height: 32px; text-align: left; vertical-align: middle; }
.dl-range th:first-child { padding-left: 0; }
.dl-range thead th { height: 24px; font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--chart-label); }
.dl-range tbody th { max-width: 260px; font-weight: 400; font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-range tbody th.is-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code); }
.dl-range tbody th a { color: var(--text-link); text-decoration: none; }
.dl-range tbody th a:hover { text-decoration: underline; }
.dl-range td.is-end, .dl-range th.is-end { text-align: right; white-space: nowrap; width: 1%; }
.dl-range td.is-end { font-weight: 400; font-size: var(--font-size-ui-base); font-variant-numeric: tabular-nums; color: var(--text); }
.dl-range td.is-muted { color: var(--text-muted); }
.dl-range-trackcol { width: 60%; }
.dl-range-track { position: relative; display: block; height: 12px; }
.dl-range-p50, .dl-range-p95 { position: absolute; top: 0; bottom: 0; }
.dl-range-p50 { left: 0; background: var(--chart-range-p50); }
.dl-range-p95 { background: var(--chart-range-p95); border-left: var(--chart-stack-gap) solid var(--surface); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }

/* ---------- Histogram ---------- */
.dl-hist { margin: 0; font-family: var(--font-ui); }
.dl-hist-plot { display: flex; align-items: flex-end; gap: var(--chart-stack-gap); border-bottom: var(--border-width-hairline) solid var(--chart-axis); }
.dl-hist-bar { flex: 1 1 0; min-width: 2px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.dl-hist-bar.is-p50 { background: var(--chart-range-p50); }
.dl-hist-bar.is-p95 { background: var(--chart-range-p95); }
.dl-hist-bar.is-other { background: var(--chart-other); }
.dl-hist-bar.is-empty { height: 2px; background: var(--chart-empty); border-radius: 0; }
.dl-hist-axis { display: flex; justify-content: space-between; margin-top: var(--space-1); font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--chart-label); font-variant-numeric: tabular-nums; }

/* ---------- Waterfall ---------- */
.dl-wf { margin: 0; font-family: var(--font-ui); }
.dl-wf-grid { --dl-wf-label: minmax(180px, 34%); }
.dl-wf-head, .dl-wf-hit { display: grid; grid-template-columns: var(--dl-wf-label) 1fr; column-gap: var(--space-3); align-items: center; }
.dl-wf-head { height: 24px; font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--chart-label); border-bottom: var(--border-width-hairline) solid var(--chart-axis); }
.dl-wf-ticks { position: relative; height: 16px; margin-right: 56px; }
.dl-wf-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-wf-tick:first-child { transform: none; }
.dl-wf-rows { margin: 0; padding: 0; list-style: none; }
.dl-wf-row { border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-wf-hit { width: 100%; min-height: 32px; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; }
button.dl-wf-hit { cursor: pointer; }
.dl-wf-row:hover .dl-wf-hit { background: var(--row-hover); }
.dl-wf-row.is-selected .dl-wf-hit { background: var(--row-selected); }
.dl-wf-row.is-selected .dl-wf-dur { color: var(--state-selected-text-muted); }
button.dl-wf-hit:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.dl-wf-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-right: var(--space-2); }
.dl-wf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--font-size-code); line-height: 18px; color: var(--text); }
.dl-wf-track { position: relative; display: block; height: 32px; margin-right: 56px; }
.dl-wf-gridline { position: absolute; top: 0; bottom: 0; width: var(--border-width-hairline); background: var(--chart-grid); }
.dl-wf-bar { position: absolute; top: 10px; height: 12px; border-radius: var(--radius-xs); }
.dl-wf-dur { position: absolute; top: 8px; padding-left: 6px; white-space: nowrap; font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--chart-label); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .dl-abtn, .dl-input, .dl-check-box, .dl-check-box::after, .dl-switch-track, .dl-switch-track::after, .dl-chip,
  .dl-table-sort .dl-icon, .dl-side, .dl-side-item, .dl-tab, .dl-fab { transition: none; }
  .dl-panel[open], .dl-toast { animation: none; }
  .dl-spinner-svg { animation-duration: 2.4s; }
}

/* ---------- TagDistribution ---------- */
/* One left edge for key, values, bars and the "All tags" button: rows bleed their hover fill out by space-2 on both sides
   (negative margin), so their text stays flush with the heading. Bars are 4px with square ends. */
.dl-tagd { display: grid; gap: var(--space-5); min-width: 0; font-family: var(--font-ui); }
.dl-tagd-section { min-width: 0; }
.dl-tagd-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.dl-tagd-key { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; color: var(--text); }
.dl-tagd-meta { flex: none; font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dl-tagd ul { display: grid; margin: 0; padding: 0; list-style: none; }
.dl-tagd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-3); row-gap: var(--space-1);
  width: calc(100% + 2 * var(--space-2)); margin: 0 calc(-1 * var(--space-2)); padding: 6px var(--space-2);
  font: inherit; text-align: left; text-decoration: none; color: var(--text); background: none; border: 0; border-radius: var(--radius-xs); }
a.dl-tagd-row, button.dl-tagd-row { cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard); }
a.dl-tagd-row:hover, button.dl-tagd-row:hover { background: var(--state-hover); }
a.dl-tagd-row:hover .dl-tagd-value, button.dl-tagd-row:hover .dl-tagd-value { text-decoration: underline; text-underline-offset: 2px; }
.dl-tagd-row:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.dl-tagd-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: var(--font-size-ui-md); line-height: 18px; }
.dl-tagd-value.is-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code-sm); }
.dl-tagd-share { font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.dl-tagd-bar { grid-column: 1 / -1; display: block; height: 4px; background: var(--chart-grid); }
.dl-tagd-bar > span { display: block; height: 100%; background: var(--chart-1); }
.dl-tagd-row.is-other .dl-tagd-value { color: var(--text-muted); }
.dl-tagd-row.is-other .dl-tagd-bar > span { background: var(--chart-other); }
.dl-tagd-foot { justify-self: start; }

/* ================= Release E (2026-10-15): glass, key/value tag, filter segments, helper variants ================= */
/* App card: the container for a group of content in a view (raised off `surface-subtle`). */
/* Round 5 (A5): flat, a 1px `border` and no shadow. Shadows (`elevation-1` and up) are only for things that float: tooltips, menus, dialogs. */
.dl-app-card { background: var(--surface); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); }

/* Glass: the sticky header, menus, popovers and suggestion lists let the page show through, blurred. Muted text on glass is one step
   darker (`text-muted-on-glass`) so it keeps 4.5:1 over anything beneath. Solid without backdrop-filter or with reduced transparency. */
.dl-glass-header { position: sticky; top: 0; z-index: 15; background: var(--surface-glass); border-bottom: var(--border-width-hairline) solid var(--border);
  -webkit-backdrop-filter: blur(var(--blur-header)); backdrop-filter: blur(var(--blur-header)); }
.dl-menu, .dl-popover, .dl-search-list { background: var(--surface-glass-raised); -webkit-backdrop-filter: blur(var(--blur-menu)); backdrop-filter: blur(var(--blur-menu)); }
.dl-glass-header, .dl-menu, .dl-popover, .dl-search-list { --text-muted: var(--text-muted-on-glass); }
/* A blurred element cuts off the blur of everything inside it (browsers treat it as the backdrop root), so menus and popovers
   inside the glass header would show the page unblurred. They stay solid there. */
.dl-glass-header .dl-menu, .dl-glass-header .dl-popover, .dl-glass-header .dl-search-list { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dl-dialog::backdrop, .dl-panel::backdrop { -webkit-backdrop-filter: blur(var(--blur-backdrop)); backdrop-filter: blur(var(--blur-backdrop)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dl-glass-header { background: var(--surface); }
  .dl-menu, .dl-popover, .dl-search-list { background: var(--surface-raised); }
}
@media (prefers-reduced-transparency: reduce) {
  .dl-glass-header { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dl-menu, .dl-popover, .dl-search-list { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dl-dialog::backdrop, .dl-panel::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Menus and popovers you position yourself: `is-static` sits in the flow, `is-fixed` is placed by the component next to its trigger. */
.dl-menu.is-static, .dl-popover.is-static { position: static; margin-top: var(--space-1); }
.dl-menu.is-fixed { position: fixed; top: auto; left: auto; }
/* Round 7: menus that open upwards (`placement="top"`), e.g. from the sidebar's account tile. */
.dl-menu.is-up { top: auto; bottom: calc(100% + var(--space-1)); }
.dl-side-account-menu { display: flex; width: 100%; }
.dl-side-account-menu > .dl-menu { left: 10px; right: 10px; min-width: 0; max-width: none; }
.dl-side.is-collapsed .dl-side-account-menu > .dl-menu { right: auto; min-width: 200px; }

/* KeyValueTag: muted key on a tinted half, value on the surface, one shared outline. */
.dl-kv { display: inline-flex; align-items: stretch; max-width: 100%; min-height: 24px; overflow: hidden; vertical-align: middle;
  font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-sm); line-height: 16px; text-decoration: none;
  border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); }
.dl-kv-key { flex: none; display: inline-flex; align-items: center; padding: 1px var(--space-2); color: var(--text-muted); background: var(--surface-sunken);
  border-right: var(--border-width-hairline) solid var(--border); }
.dl-kv-value { display: inline-flex; align-items: center; min-width: 0; padding: 1px var(--space-2); }
.dl-kv-value > span { min-width: 0; }
.dl-kv.is-truncate .dl-kv-value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-kv.is-mono .dl-kv-value { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-size-code-sm); }
button.dl-kv, a.dl-kv { cursor: pointer; padding: 0; text-align: left; }
button.dl-kv:hover .dl-kv-value, a.dl-kv:hover .dl-kv-value { background: var(--state-hover); text-decoration: underline; text-underline-offset: 2px; }
button.dl-kv:hover, a.dl-kv:hover { border-color: var(--border-strong); }
.dl-kv:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-kv-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* FilterBar segments: icon and name on a tinted left half, the value on the surface, 32px. */
.dl-filter .dl-menu-trigger { min-height: 32px; padding: 0 var(--space-2) 0 0; gap: var(--space-2); align-items: stretch; overflow: hidden; }
.dl-filter .dl-menu-trigger > .dl-icon:last-child { align-self: center; }
.dl-filter .dl-abtn-label { display: flex; align-items: stretch; }
.dl-filter-seg { display: flex; align-items: stretch; }
.dl-filter-name { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); color: var(--text-muted); background: var(--surface-sunken);
  border-right: var(--border-width-hairline) solid var(--border); }
.dl-filter-value { display: inline-flex; align-items: center; padding-left: var(--space-2); color: var(--text); }
.dl-filterbar-rest .dl-input { min-height: 32px; }

/* AppButton `neutral`: a grey outline with a `text` label, for toolbars and toggles that are not actions. */
.dl-abtn-neutral { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.dl-abtn-neutral:hover { background: var(--state-hover); }
.dl-abtn-neutral:active { background: var(--state-pressed); }
.dl-abtn-neutral:disabled { background: transparent; border-color: var(--border); }
.dl-abtn-neutral[aria-pressed="true"] { border-color: var(--state-selected-text-muted); }

/* ButtonGroup: outlined buttons joined into one control; the outer corners stay round. */
.dl-abtn-group { display: inline-flex; vertical-align: middle; }
.dl-abtn-group > .dl-abtn { border-radius: 0; }
.dl-abtn-group > .dl-abtn + .dl-abtn { margin-left: calc(-1 * var(--border-width-hairline)); }
.dl-abtn-group > .dl-abtn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dl-abtn-group > .dl-abtn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dl-abtn-group > .dl-abtn:only-child { border-radius: var(--radius-sm); }
.dl-abtn-group > .dl-abtn:hover, .dl-abtn-group > .dl-abtn:focus-visible, .dl-abtn-group > .dl-abtn[aria-pressed="true"] { position: relative; z-index: 1; }

/* Small input: 28px, for toolbars and filter rows next to `sm` buttons. */
.dl-input.is-sm { min-height: 28px; padding: 0 var(--space-2); font-size: var(--font-size-ui-xs); line-height: 16px; }
.dl-input.is-sm.has-icon { padding-left: calc(var(--space-2) + 16px + var(--space-1)); }
.dl-input-wrap.is-sm .dl-input-icon { left: var(--space-2); }

/* ================= Round 3 (2026-10-15): the Bugsink team's changes after Release E ================= */
/* 1. App page title: MB Empire caps in Dolphin Blue (white in dark). Titles that are data keep their own case in Inter Medium (Round 5). */
.dl-app-title { margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--font-size-ui-title); line-height: 32px; color: var(--text-brand); text-wrap: balance; }
.dl-app-title.is-data { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--text); overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dl-app-title { color: var(--text); } }
:root[data-theme="dark"] .dl-app-title { color: var(--text); }

/* 2. Full-width glass header: inside a centred, narrower content area the header keeps its own box (aligned with the content),
   but paints its glass and brand line out to the edges of the content column (`dl-app-column`). Round 6: they reach exactly
   the column edges (container units, `cqw`), not one screen width (`vw`): the wider blur picked up the sidebar beside the column
   and smeared its blue into the header's edge. */
.dl-app-column { overflow-x: clip; container-type: inline-size; }
.dl-glass-header.is-full { background: none; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate; }
.dl-glass-header.is-full::after { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); inset: 0 calc(50% - 50cqw); pointer-events: none;
  background: var(--surface-glass); border-bottom: var(--border-width-hairline) solid var(--border);
  -webkit-backdrop-filter: blur(var(--blur-header)); backdrop-filter: blur(var(--blur-header)); }
.dl-glass-header.is-full.dl-brand-line::before { left: calc(50% - 50vw); right: calc(50% - 50vw); left: calc(50% - 50cqw); right: calc(50% - 50cqw); z-index: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dl-glass-header.is-full::after { background: var(--surface); } }
@media (prefers-reduced-transparency: reduce) { .dl-glass-header.is-full::after { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* 3. ButtonGroup also joins buttons that sit in a wrapper (a DropdownMenu trigger: split buttons such as "Resolve ▾"). */
.dl-abtn-group > * + :not(.dl-abtn), .dl-abtn-group > :not(.dl-abtn) + .dl-abtn { margin-left: calc(-1 * var(--border-width-hairline)); }
.dl-abtn-group > :not(.dl-abtn) .dl-menu-trigger { border-radius: var(--radius-sm); }
.dl-abtn-group > :not(.dl-abtn):not(:first-child) .dl-menu-trigger { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dl-abtn-group > :not(.dl-abtn):not(:last-child) .dl-menu-trigger { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dl-abtn-group > :not(.dl-abtn) .dl-menu-trigger:hover, .dl-abtn-group > :not(.dl-abtn) .dl-menu-trigger:focus-visible { position: relative; z-index: 1; }

/* 4. KeyValueTag 28px, the height of the other small controls. */
.dl-kv { min-height: 28px; }
.dl-kv-key, .dl-kv-value { padding-block: 3px; }

/* 5. TagDistribution, tighter for narrow sidebars. */
.dl-tagd { gap: var(--space-4); }
.dl-tagd-row { padding-block: 4px; }

/* 8. Popovers you place yourself in viewport coordinates (e.g. in a portal), so scrolling tables can't clip them. */
.dl-popover.is-fixed { position: fixed; top: auto; left: auto; z-index: 50; }

/* 9. Small select: the chevron and the value's room match the 28px field. */
.dl-select .dl-input.is-sm { padding-right: calc(var(--space-2) + 16px + var(--space-1)); }
.dl-select .dl-input.is-sm + .dl-select-chev { right: var(--space-2); }

/* 10. FilterBar on narrow screens: when the segments can wrap, they sit apart with full corners instead of half-joined lines. */
@media (max-width: 600px) {
  .dl-filterbar-segs { gap: var(--space-2); }
  .dl-filter .dl-menu-trigger, .dl-filter:first-child .dl-menu-trigger, .dl-filter:last-child .dl-menu-trigger { margin-left: 0; border-radius: var(--radius-sm); }
}

/* ================= Round 5 (2026-10-29): the blackbolt admin's proposal, decided item by item (docs/round5-blackbolt.md) ================= */
/* App section title (A2): MB Empire caps, 20px, Dolphin Blue (white in dark). */
.dl-app-section { margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--font-size-ui-section); line-height: 28px; color: var(--text-brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dl-app-section { color: var(--text); } }
:root[data-theme="dark"] .dl-app-section { color: var(--text); }

/* DataTable (A10, B1, B3): a secondary value after the main one in `text-secondary`; `truncate` columns stop at 240px with the full
   text in a tooltip; a `fill` column takes the remaining width; the pager sits in the table's foot band. */
.dl-cell-sub { color: var(--text-secondary); }
.dl-table td.is-truncate { max-width: 240px; }
.dl-table td.is-truncate .dl-tip-wrap { display: block; min-width: 0; }
.dl-cell-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-xs); }
.dl-cell-trunc:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.dl-table th.is-fill, .dl-table td.is-fill { width: 100%; }
.dl-table-card { overflow: hidden; background: var(--surface); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); }
.dl-table-card > .dl-table-wrap { border: 0; border-radius: 0; }
.dl-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  min-height: 50px; padding: var(--space-2) var(--space-4); border-top: var(--border-width-hairline) solid var(--border); }

/* Glass page header (A12): 72px, the hairline fades in over the first 24px of scrolling (always shown where scroll-driven animation
   isn't supported); not sticky below 782px. The brand line can sit at the top of the window with `dl-brand-line is-window`. */
.dl-glass-header { min-height: var(--page-head-height); }
@supports (animation-timeline: scroll()) {
  .dl-glass-header:not(.is-full), .dl-glass-header.is-full::after { animation: dl-head-line linear both; animation-timeline: scroll(); animation-range: 0 24px; }
}
@keyframes dl-head-line { from { border-bottom-color: transparent; } to { border-bottom-color: var(--border); } }
@media (max-width: 781px) { .dl-glass-header { position: relative; } }
.dl-brand-line.is-window::before { position: fixed; z-index: 40; }

/* AppSidebar (A13, A15): product name in MB Empire next to the mark, a fading line under it, the account tile at the bottom,
   and a block on top of the page below 782px. */
.dl-side-product { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--nav-text); text-decoration: none; border-radius: var(--radius-xs); }
.dl-side-product img { display: block; height: 22px; width: auto; flex: none; }
.dl-side-product-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: var(--font-size-ui-lg); line-height: 20px; }
.dl-side-rule { height: var(--border-width-hairline); margin: 0 var(--space-5) var(--space-2); background: linear-gradient(90deg, var(--nav-divider), transparent); }
.dl-side.is-collapsed .dl-side-product-name, .dl-side.is-collapsed .dl-side-rule { display: none; }
.dl-side-product:focus-visible, .dl-side-account:focus-visible { outline: var(--focus-ring-width) solid var(--nav-focus-ring); outline-offset: 2px; }
.dl-side-account { display: flex; align-items: center; gap: var(--space-2); width: calc(100% - 20px); margin: var(--space-2) 10px 0; padding: var(--space-2) 10px;
  font: inherit; text-align: left; text-decoration: none; color: var(--nav-text); background: none; border: 0; border-radius: var(--radius-sm); }
a.dl-side-account, button.dl-side-account { cursor: pointer; }
a.dl-side-account:hover, button.dl-side-account:hover { background: var(--nav-item-hover); }
.dl-side-account-text { display: grid; min-width: 0; }
.dl-side-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; }
.dl-side-account-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--nav-text-muted); }
.dl-side.is-collapsed .dl-side-account { justify-content: center; width: auto; padding: var(--space-1); }
.dl-side.is-collapsed .dl-side-account-text { display: none; }
@media (max-width: 781px) {
  .dl-side:not(.is-collapsed) { width: 100%; height: auto; }
  .dl-side:not(.is-collapsed) .dl-side-body { overflow: visible; }
  .dl-side:not(.is-collapsed) ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* FilterBar groups (A14, Bugsink round 4 item 5): "what" filters and the time range as separate groups, 12px apart, wrapping as wholes. */
.dl-filterbar.is-grouped { gap: var(--space-3); }
/* Filter row (A14): separate 36px controls with 12px labels for free values (search, IDs, dates), 8px apart, and a Filter button.
   The search field is at least 280px wide, full width on phones. Filters always live in the URL. */
.dl-filterrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0; }
.dl-filterrow .dl-field-label { font-size: var(--font-size-ui-sm); line-height: 16px; }
.dl-filterrow > .dl-field { flex: 0 1 180px; }
.dl-filterrow > .dl-search-field, .dl-filterrow > .dl-field.is-wide { flex: 1 1 280px; min-width: min(280px, 100%); }
.dl-filterrow-actions { display: flex; gap: var(--space-2); }
@media (max-width: 600px) { .dl-filterrow > .dl-field, .dl-filterrow > .dl-search-field { flex: 1 1 100%; } }

/* StatGroup (B6): related StatTiles in one flat card, split by 1px lines (the card's border colour shows through the 1px gaps). */
.dl-stat-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--border-width-hairline); overflow: hidden;
  background: var(--border); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); }
.dl-stat-group > .dl-stat { border: 0; border-radius: 0; }

/* DetailList `orientation="horizontal"` (B13): a facts bar of label-over-value cells in one flat card, split by 1px lines. */
.dl-details.is-horizontal { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--border-width-hairline); margin-top: 0; clip-path: none;
  overflow: hidden; background: var(--border); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); }
.dl-details.is-horizontal .dl-details-row { grid-template-columns: 1fr; gap: 2px; padding: 10px var(--space-4); border-top: 0; background: var(--surface); }
.dl-details.is-horizontal dt { padding-top: 0; }
.dl-details.is-horizontal dd { font-weight: 500; }

/* Charts (B8, B9): a card with title, Chart/Table switch and the legend above the plot. */
.dl-chartcard { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.dl-chartcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dl-chartcard-title { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: var(--font-size-ui-lg); line-height: 20px; color: var(--text); }
.dl-chart-legend.is-top { margin-top: 0; }
.dl-chart-legend { font-size: var(--font-size-ui-xs); line-height: 16px; }
.dl-swatch-line { display: inline-block; flex: none; width: 16px; height: 0; border-top: var(--chart-line-width) dashed var(--chart-previous); }
.dl-chart-table { max-height: 320px; }
.dl-ts { position: relative; min-width: 0; overflow: hidden; }  /* the SVG takes its width from here, never the other way round */
.dl-ts svg { display: block; overflow: visible; }
.dl-ts-grid { stroke: var(--chart-grid); stroke-width: 1; }
.dl-ts-axis { stroke: var(--chart-axis); stroke-width: 1; }
.dl-ts-tick { font-family: var(--font-ui); font-size: var(--font-size-ui-xs); fill: var(--chart-label); font-variant-numeric: tabular-nums; }
.dl-ts-hover { fill: var(--state-hover); }
.dl-ts-line { fill: none; stroke-width: var(--chart-line-width); stroke-linejoin: round; stroke-linecap: round; }
.dl-ts-prev { fill: none; stroke: var(--chart-previous); stroke-width: var(--chart-line-width); stroke-dasharray: 6 4; stroke-linejoin: round; }
.dl-ts rect[style] { shape-rendering: crispEdges; }
.dl-ts-tip { top: 4px; transform: translateX(-50%); pointer-events: none; }  /* inside the plot, which clips */
.dl-ts-tip-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px var(--space-2); }
.dl-ts-tip-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.dl-tooltip-foot.dl-ts-tip-row { grid-template-columns: 1fr auto; }
.dl-heat { display: grid; gap: 2px; align-items: center; font-family: var(--font-ui); font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--chart-label); }
.dl-heat-row { padding-right: var(--space-2); white-space: nowrap; }
.dl-heat-col { white-space: nowrap; overflow: visible; width: 0; font-variant-numeric: tabular-nums; }
.dl-heat-cell { position: relative; display: block; height: 18px; }
.dl-heat-cell .dl-tooltip { pointer-events: none; }
.dl-heat-scale { display: inline-flex; align-items: center; gap: 4px; }
.dl-heat-scale i { display: block; width: 16px; height: 12px; border: var(--border-width-hairline) solid var(--border); }

/* ShareList (B10): name, count in `text-secondary`, share right-aligned in tabular digits, then a 4px square-ended bar. */
.dl-share { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-family: var(--font-ui); }
.dl-share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: var(--space-3); row-gap: var(--space-1);
  width: calc(100% + 2 * var(--space-2)); margin: 0 calc(-1 * var(--space-2)); padding: 6px var(--space-2);
  font: inherit; text-align: left; text-decoration: none; color: var(--text); background: none; border: 0; border-radius: var(--radius-xs); }
a.dl-share-row, button.dl-share-row { cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard); }
a.dl-share-row:hover, button.dl-share-row:hover { background: var(--state-hover); }
a.dl-share-row:focus-visible, button.dl-share-row:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.dl-share-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-ui-base); line-height: 18px; }
.dl-share-row.is-other .dl-share-label { color: var(--text-muted); }
.dl-share-count { font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dl-share-pct { min-width: 40px; text-align: right; font-weight: 500; font-size: var(--font-size-ui-base); line-height: 18px; font-variant-numeric: tabular-nums; }
.dl-share-bar { grid-column: 1 / -1; display: block; height: 4px; background: var(--chart-grid); }
.dl-share-bar > span { display: block; height: 100%; }

/* StatusStrip (B5): one cell per bucket, oldest left. */
.dl-strip { display: grid; gap: var(--space-2); min-width: 0; }
.dl-strip-cells { display: grid; gap: 2px; }
.dl-strip-cells > i { position: relative; display: block; }
.dl-strip-cells .dl-tooltip { pointer-events: none; }
.dl-strip .dl-chart-legend { margin-top: 0; }

/* StatusHero (B4): pulse with the state's icon, MB Empire title, meta line, reasons behind a disclosure. The bottom line is decoration. */
.dl-hero-status { position: relative; display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); overflow: hidden;
  font-family: var(--font-ui); color: var(--text); background: var(--surface); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-panel); }
.dl-hero-status::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--dl-tone-solid), transparent 70%); }
.dl-hero-pulse { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 0; border-radius: var(--radius-pill);
  color: var(--dl-tone-on-solid); background: var(--dl-tone-solid); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dl-tone-solid) 45%, transparent);
  animation: dl-pulse 2.4s var(--ease-standard) infinite; }
@keyframes dl-pulse { 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--dl-tone-solid) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.dl-hero-body { display: grid; gap: var(--space-1); min-width: 0; }
.dl-hero-title { margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--font-size-ui-section); line-height: 28px; color: var(--text); }
.dl-hero-meta { margin: 0; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-hero-reasons summary { width: max-content; font-weight: 500; font-size: var(--font-size-ui-md); line-height: 18px; color: var(--text-link); cursor: pointer; border-radius: var(--radius-xs); }
.dl-hero-reasons summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.dl-hero-reasons ul { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--font-size-ui-base); line-height: 20px; }
@media (prefers-reduced-motion: reduce) { .dl-hero-pulse { animation: none; } }

/* Times (B2): the time is a tooltip trigger in the text colour with a grey dotted underline (links are blue and never have a tooltip). */
.dl-datetime { padding: 0; font: inherit; color: inherit; text-align: inherit; background: none; border: 0; border-bottom: var(--border-width-hairline) dotted var(--text-muted);
  border-radius: 0; cursor: help; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-datetime:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.dl-tznote { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-family: var(--font-ui); font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-tznote .dl-icon { color: var(--info-text); }

/* Tabs with errors (B16): the count as icon and words in `danger-text`. */
.dl-tab-errors { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--danger-text); }

/* DateStepper (B16): previous and next day joined to the date field, one 36px control. */
.dl-stepper { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dl-stepper-joined { display: inline-flex; }
.dl-stepper-joined > .dl-abtn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dl-stepper-joined > .dl-abtn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dl-stepper-input { width: auto; border-radius: 0; margin: 0 calc(-1 * var(--border-width-hairline)); font-variant-numeric: tabular-nums; }
.dl-stepper-input:focus-visible { position: relative; z-index: 1; }

/* ImageField (B16): a 72px preview beside the URL and its buttons. */
.dl-imagefield-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.dl-imagefield-preview { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; color: var(--text-muted);
  background: var(--surface-subtle); border: var(--border-width-hairline) solid var(--border); border-radius: var(--radius-sm); }
.dl-imagefield-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-imagefield-side { display: grid; gap: var(--space-2); min-width: 0; }
.dl-imagefield-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* DangerZone (B15): inline, below the thing it changes. A `danger-border` outline, no fill and no coloured stripe. */
.dl-danger { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4); font-family: var(--font-ui); color: var(--text);
  background: var(--surface); border: var(--border-width-hairline) solid var(--danger-border); border-radius: var(--radius-panel); }
.dl-danger > .dl-field { justify-self: stretch; }
.dl-danger-title { margin: 0; font-weight: 500; font-size: var(--font-size-ui-lg); line-height: 20px; color: var(--danger-text); }
.dl-danger-text { margin: 0; font-size: var(--font-size-ui-base); line-height: 20px; color: var(--text-muted); }

/* Prose (B21): rendered text inside an app (terms, messages, help pages): 14/21px Inter, headings Inter Medium, at most 760px wide. */
.dl-prose { max-width: 760px; font-family: var(--font-ui); font-weight: 400; font-size: var(--font-size-ui-lg); line-height: 21px; color: var(--text); }
.dl-prose > * { margin: 0 0 var(--space-3); }
.dl-prose > :last-child { margin-bottom: 0; }
.dl-prose h1, .dl-prose h2 { margin-top: var(--space-5); font-weight: 500; font-size: 20px; line-height: 28px; }
.dl-prose h3 { margin-top: var(--space-5); font-weight: 500; font-size: 17px; line-height: 24px; }
.dl-prose h4 { margin-top: var(--space-4); font-weight: 500; font-size: 15px; line-height: 22px; }
.dl-prose > :first-child { margin-top: 0; }
.dl-prose strong, .dl-prose b { font-weight: 700; }
.dl-prose a { color: var(--text-link); }
.dl-prose ul, .dl-prose ol { padding-left: var(--space-5); }
.dl-prose li + li { margin-top: var(--space-1); }
.dl-prose blockquote { margin-left: 0; padding-left: var(--space-4); color: var(--text-muted); border-left: var(--border-width-strong) solid var(--border); }

/* ================= Round 6: DateRangePicker, FilterBar range, Sparkline tooltip (Bugsink Round 4 items 1 and 4) ================= */

/* DateRangePicker: 36 × 32px days with 4px between rows, so a selected day has room around its number; the range is one band per row,
   its first and last day solid blue and rounded on the outside. 13px Inter, weekdays 12px Medium. */
.dl-cal { display: grid; gap: var(--space-2); padding: var(--space-2); font-family: var(--font-ui); font-size: var(--font-size-ui-base); line-height: 18px; color: var(--text); }
.dl-cal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--border-width-hairline) solid var(--border); }
.dl-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(-1 * var(--space-6)); position: relative; z-index: 1; pointer-events: none; }
.dl-cal-nav > * { pointer-events: auto; }
.dl-cal-months { display: flex; gap: var(--space-5); }
.dl-cal-month { width: 252px; }
.dl-cal-title { display: flex; align-items: center; justify-content: center; gap: 2px; width: max-content; margin: 2px auto var(--space-2); padding: 3px 6px 3px 8px;
  border: 0; background: none; border-radius: var(--radius-xs); font: inherit; font-weight: 500; color: var(--text); cursor: pointer; }
.dl-cal-title:hover { background: var(--state-hover); }
.dl-cal-title .dl-icon { color: var(--text-muted); }
.dl-cal-wd, .dl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dl-cal-grid { row-gap: 4px; }
.dl-cal-wd span { padding-block: var(--space-1); text-align: center; font-size: var(--font-size-ui-xs); line-height: 16px; font-weight: 500; color: var(--text-muted); }
.dl-cal-day { height: 32px; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); font: inherit; font-variant-numeric: tabular-nums;
  color: var(--text); cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard); }
.dl-cal-day:not(.is-end):not(.is-in):not(:disabled):hover { background: var(--state-hover); }
.dl-cal-day.is-in { background: var(--state-selected); color: var(--state-selected-text); border-radius: 0; }
.dl-cal-day.is-end { background: var(--state-selected-indicator); color: var(--surface); font-weight: 500; }
.dl-cal-day.is-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dl-cal-day.is-stop { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dl-cal-grid > :nth-child(7n+1).is-in { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dl-cal-grid > :nth-child(7n).is-in { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dl-cal-grid > :nth-child(7n).is-start, .dl-cal-grid > :nth-child(7n+1).is-stop { border-radius: var(--radius-sm); }
.dl-cal-day.is-today:not(.is-end) { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.dl-cal-day:disabled { cursor: default; color: var(--state-disabled-text); }
.dl-cal-day:focus-visible, .dl-cal-title:focus-visible, .dl-cal-pick-cell:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); position: relative; z-index: 1; }
.dl-cal-pick { display: grid; gap: var(--space-3); width: calc(252px * 2 + var(--space-5)); max-width: 100%; }
.dl-cal-pick-head { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; }
.dl-cal-pick-head .dl-cal-title { margin: 0 auto; }
.dl-cal-pick-label { text-align: center; font-weight: 500; }
.dl-cal-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.dl-cal-pick-cell { height: 36px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--text); cursor: pointer; }
.dl-cal-pick-cell:hover:not(:disabled) { background: var(--state-hover); }
.dl-cal-pick-cell.is-end { background: var(--state-selected-indicator); color: var(--surface); font-weight: 500; }
.dl-cal-pick-cell.is-current { background: var(--state-selected); color: var(--state-selected-text); font-weight: 500; }
.dl-cal-pick-cell:disabled { color: var(--state-disabled-text); cursor: default; }
.dl-cal-pick-note { margin: 0; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding-top: var(--space-3); border-top: var(--border-width-hairline) solid var(--border); }
.dl-cal-sum { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.dl-cal-sum > .dl-icon { flex: none; }
.dl-cal-sum b { color: var(--text); font-weight: 500; }
.dl-cal-zone { display: block; font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-cal-actions { display: flex; gap: var(--space-2); }
@media (max-width: 639px) { .dl-cal-pick { width: 252px; } .dl-cal-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dl-cal-day { transition: none; } }
/* A menu that holds a panel (the FilterBar's custom range) instead of a list */
.dl-menu.is-panel { max-width: none; min-width: 0; width: max-content; padding: 0; }

/* Sparkline with `tooltip`: one Tab stop; each bar's hover area is its full height plus half the gap on both sides */
.dl-spark.has-tip { gap: 0; }
.dl-spark.has-tip:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.dl-spark-hit { position: relative; display: flex; align-items: flex-end; flex: 1 1 0; min-width: 1px; height: 100%; padding: 0 calc(var(--chart-stack-gap) / 2); }
.dl-spark-hit > .dl-spark-bar { flex: 1 1 0; }
.dl-spark-hit.is-on > .dl-spark-bar, .dl-spark-hit.is-on > .dl-spark-bar.is-empty { background: var(--state-selected-text); }
.dl-spark-hit .dl-tooltip { pointer-events: none; text-align: left; }
.dl-spark-hit .dl-tooltip.is-from-start { left: 0; transform: none; }
.dl-spark-hit .dl-tooltip.is-from-end { left: auto; right: 0; transform: none; }

/* AppBar (Round 7, H2): the Dolphin Blue bar of a one-page tool. White wordmark | product name on the left, actions and the theme
   switch on the right; the brand line along its top edge. Ghost buttons in it turn white like the sidebar's. */
.dl-appbar { position: relative; z-index: 15; display: flex; align-items: center; gap: var(--space-4); min-height: var(--page-head-height);
  padding: 0 var(--space-6); background: var(--nav-surface); color: var(--nav-text); font-family: var(--font-ui); }
.dl-appbar.is-sticky { position: sticky; top: 0; }
.dl-appbar-lockup { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin-right: auto; color: inherit; text-decoration: none; border-radius: var(--radius-xs); }
.dl-appbar-lockup:focus-visible { outline: var(--focus-ring-width) solid var(--nav-focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-appbar-logo { display: block; height: 30px; width: auto; flex: none; }
.dl-appbar-divider { width: var(--border-width-hairline); height: 28px; flex: none; background: var(--nav-divider); }
.dl-appbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--font-size-ui-lg); line-height: 20px; }
.dl-appbar-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.dl-appbar .dl-abtn-ghost { color: var(--nav-text); }
.dl-appbar .dl-abtn-ghost:hover, .dl-appbar .dl-abtn-ghost[aria-expanded="true"] { background: var(--nav-item-hover); }
.dl-appbar .dl-abtn-ghost:active { background: var(--nav-item-hover); }
.dl-appbar .dl-abtn:focus-visible { outline-color: var(--nav-focus-ring); }
.dl-appbar .dl-menu { color: var(--text); }
@media (max-width: 781px) { .dl-appbar { padding: 0 var(--space-4); gap: var(--space-3); } .dl-appbar-logo { height: 24px; } .dl-appbar-divider { height: 22px; } }

/* AuthCard and SignIn (Round 7, H9 / B20). */
.dl-auth { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-6) var(--space-4); background: var(--surface-brand); font-family: var(--font-ui); color: var(--text); }
.dl-auth-card { box-sizing: border-box; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface); border-radius: var(--radius-panel); }
.dl-auth-lockup { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.dl-auth-lockup img { height: 24px; width: auto; display: block; }
.dl-auth-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--font-size-ui-lg); line-height: 20px; color: var(--text-brand); }
.dl-auth-title { margin: 0; font-size: var(--font-size-ui-section); line-height: 28px; font-weight: 500; color: var(--text); text-wrap: balance; }
.dl-auth-intro, .dl-auth-hint { margin: 0; font-size: var(--font-size-ui-base); line-height: 20px; color: var(--text-muted); }
.dl-auth-hint { font-size: var(--font-size-ui-xs); line-height: 16px; }
.dl-auth-google-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
/* Google's sign-in button: white in both themes with its own grey outline and dark label (Google's branding rules). */
.dl-auth-google { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; height: 40px; padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--neutral-0); color: var(--neutral-1000);
  font: inherit; font-size: var(--font-size-ui-md); line-height: 18px; font-weight: 500; cursor: pointer; }
.dl-auth-google:hover { background: var(--neutral-50); }
.dl-auth-google:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dl-auth-google:disabled { cursor: not-allowed; opacity: 0.6; }
.dl-auth-or { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-muted); }
.dl-auth-or::before, .dl-auth-or::after { content: ""; flex: 1; height: var(--border-width-hairline); }
.dl-auth-or::before { background: linear-gradient(90deg, transparent, var(--border)); }
.dl-auth-or::after { background: linear-gradient(90deg, var(--border), transparent); }
.dl-auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.dl-auth-link { align-self: flex-start; margin-top: calc(-1 * var(--space-2)); font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--text-link); }
.dl-auth-link:hover { color: var(--text-link-hover); }
.dl-auth-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.dl-auth-foot { font-size: var(--font-size-ui-xs); line-height: 16px; color: var(--nav-text-muted); }
.dl-auth-foot a { color: var(--nav-text); }
.dl-auth-foot a:focus-visible { outline: var(--focus-ring-width) solid var(--nav-focus-ring); outline-offset: 2px; }