/* /assets/icons/regular/style.css */
@font-face {
  font-family: "Phosphor";
  src: url("/assets/icons/regular/Phosphor.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph.ph-acorn:before {
  content: "\eb9a";
}
.ph.ph-address-book:before {
  content: "\e6f8";
}
.ph.ph-address-book-tabs:before {
  content: "\ee4e";
}
.ph.ph-air-traffic-control:before {
  content: "\ecd8";
}
.ph.ph-airplane:before {
  content: "\e002";
}
.ph.ph-airplane-in-flight:before {
  content: "\e4fe";
}
.ph.ph-airplane-landing:before {
  content: "\e502";
}
.ph.ph-airplane-takeoff:before {
  content: "\e504";
}
.ph.ph-airplane-taxiing:before {
  content: "\e500";
}
.ph.ph-airplane-tilt:before {
  content: "\e5d6";
}
.ph.ph-airplay:before {
  content: "\e004";
}
.ph.ph-alarm:before {
  content: "\e006";
}
.ph.ph-alien:before {
  content: "\e8a6";
}
.ph.ph-align-bottom:before {
  content: "\e506";
}
.ph.ph-align-bottom-simple:before {
  content: "\eb0c";
}
.ph.ph-align-center-horizontal:before {
  content: "\e50a";
}
.ph.ph-align-center-horizontal-simple:before {
  content: "\eb0e";
}
.ph.ph-align-center-vertical:before {
  content: "\e50c";
}
.ph.ph-align-center-vertical-simple:before {
  content: "\eb10";
}
.ph.ph-align-left:before {
  content: "\e50e";
}
.ph.ph-align-left-simple:before {
  content: "\eaee";
}
.ph.ph-align-right:before {
  content: "\e510";
}
.ph.ph-align-right-simple:before {
  content: "\eb12";
}
.ph.ph-align-top:before {
  content: "\e512";
}
.ph.ph-align-top-simple:before {
  content: "\eb14";
}
.ph.ph-amazon-logo:before {
  content: "\e96c";
}
.ph.ph-ambulance:before {
  content: "\e572";
}
.ph.ph-anchor:before {
  content: "\e514";
}
.ph.ph-anchor-simple:before {
  content: "\e5d8";
}
.ph.ph-android-logo:before {
  content: "\e008";
}
.ph.ph-angle:before {
  content: "\e7bc";
}
.ph.ph-angular-logo:before {
  content: "\eb80";
}
.ph.ph-aperture:before {
  content: "\e00a";
}
.ph.ph-app-store-logo:before {
  content: "\e974";
}
.ph.ph-app-window:before {
  content: "\e5da";
}
.ph.ph-apple-logo:before {
  content: "\e516";
}
.ph.ph-apple-podcasts-logo:before {
  content: "\eb96";
}
.ph.ph-approximate-equals:before {
  content: "\edaa";
}
.ph.ph-archive:before {
  content: "\e00c";
}
.ph.ph-armchair:before {
  content: "\e012";
}
.ph.ph-arrow-arc-left:before {
  content: "\e014";
}
.ph.ph-arrow-arc-right:before {
  content: "\e016";
}
.ph.ph-arrow-bend-double-up-left:before {
  content: "\e03a";
}
.ph.ph-arrow-bend-double-up-right:before {
  content: "\e03c";
}
.ph.ph-arrow-bend-down-left:before {
  content: "\e018";
}
.ph.ph-arrow-bend-down-right:before {
  content: "\e01a";
}
.ph.ph-arrow-bend-left-down:before {
  content: "\e01c";
}
.ph.ph-arrow-bend-left-up:before {
  content: "\e01e";
}
.ph.ph-arrow-bend-right-down:before {
  content: "\e020";
}
.ph.ph-arrow-bend-right-up:before {
  content: "\e022";
}
.ph.ph-arrow-bend-up-left:before {
  content: "\e024";
}
.ph.ph-arrow-bend-up-right:before {
  content: "\e026";
}
.ph.ph-arrow-circle-down:before {
  content: "\e028";
}
.ph.ph-arrow-circle-down-left:before {
  content: "\e02a";
}
.ph.ph-arrow-circle-down-right:before {
  content: "\e02c";
}
.ph.ph-arrow-circle-left:before {
  content: "\e05a";
}
.ph.ph-arrow-circle-right:before {
  content: "\e02e";
}
.ph.ph-arrow-circle-up:before {
  content: "\e030";
}
.ph.ph-arrow-circle-up-left:before {
  content: "\e032";
}
.ph.ph-arrow-circle-up-right:before {
  content: "\e034";
}
.ph.ph-arrow-clockwise:before {
  content: "\e036";
}
.ph.ph-arrow-counter-clockwise:before {
  content: "\e038";
}
.ph.ph-arrow-down:before {
  content: "\e03e";
}
.ph.ph-arrow-down-left:before {
  content: "\e040";
}
.ph.ph-arrow-down-right:before {
  content: "\e042";
}
.ph.ph-arrow-elbow-down-left:before {
  content: "\e044";
}
.ph.ph-arrow-elbow-down-right:before {
  content: "\e046";
}
.ph.ph-arrow-elbow-left:before {
  content: "\e048";
}
.ph.ph-arrow-elbow-left-down:before {
  content: "\e04a";
}
.ph.ph-arrow-elbow-left-up:before {
  content: "\e04c";
}
.ph.ph-arrow-elbow-right:before {
  content: "\e04e";
}
.ph.ph-arrow-elbow-right-down:before {
  content: "\e050";
}
.ph.ph-arrow-elbow-right-up:before {
  content: "\e052";
}
.ph.ph-arrow-elbow-up-left:before {
  content: "\e054";
}
.ph.ph-arrow-elbow-up-right:before {
  content: "\e056";
}
.ph.ph-arrow-fat-down:before {
  content: "\e518";
}
.ph.ph-arrow-fat-left:before {
  content: "\e51a";
}
.ph.ph-arrow-fat-line-down:before {
  content: "\e51c";
}
.ph.ph-arrow-fat-line-left:before {
  content: "\e51e";
}
.ph.ph-arrow-fat-line-right:before {
  content: "\e520";
}
.ph.ph-arrow-fat-line-up:before {
  content: "\e522";
}
.ph.ph-arrow-fat-lines-down:before {
  content: "\e524";
}
.ph.ph-arrow-fat-lines-left:before {
  content: "\e526";
}
.ph.ph-arrow-fat-lines-right:before {
  content: "\e528";
}
.ph.ph-arrow-fat-lines-up:before {
  content: "\e52a";
}
.ph.ph-arrow-fat-right:before {
  content: "\e52c";
}
.ph.ph-arrow-fat-up:before {
  content: "\e52e";
}
.ph.ph-arrow-left:before {
  content: "\e058";
}
.ph.ph-arrow-line-down:before {
  content: "\e05c";
}
.ph.ph-arrow-line-down-left:before {
  content: "\e05e";
}
.ph.ph-arrow-line-down-right:before {
  content: "\e060";
}
.ph.ph-arrow-line-left:before {
  content: "\e062";
}
.ph.ph-arrow-line-right:before {
  content: "\e064";
}
.ph.ph-arrow-line-up:before {
  content: "\e066";
}
.ph.ph-arrow-line-up-left:before {
  content: "\e068";
}
.ph.ph-arrow-line-up-right:before {
  content: "\e06a";
}
.ph.ph-arrow-right:before {
  content: "\e06c";
}
.ph.ph-arrow-square-down:before {
  content: "\e06e";
}
.ph.ph-arrow-square-down-left:before {
  content: "\e070";
}
.ph.ph-arrow-square-down-right:before {
  content: "\e072";
}
.ph.ph-arrow-square-in:before {
  content: "\e5dc";
}
.ph.ph-arrow-square-left:before {
  content: "\e074";
}
.ph.ph-arrow-square-out:before {
  content: "\e5de";
}
.ph.ph-arrow-square-right:before {
  content: "\e076";
}
.ph.ph-arrow-square-up:before {
  content: "\e078";
}
.ph.ph-arrow-square-up-left:before {
  content: "\e07a";
}
.ph.ph-arrow-square-up-right:before {
  content: "\e07c";
}
.ph.ph-arrow-u-down-left:before {
  content: "\e07e";
}
.ph.ph-arrow-u-down-right:before {
  content: "\e080";
}
.ph.ph-arrow-u-left-down:before {
  content: "\e082";
}
.ph.ph-arrow-u-left-up:before {
  content: "\e084";
}
.ph.ph-arrow-u-right-down:before {
  content: "\e086";
}
.ph.ph-arrow-u-right-up:before {
  content: "\e088";
}
.ph.ph-arrow-u-up-left:before {
  content: "\e08a";
}
.ph.ph-arrow-u-up-right:before {
  content: "\e08c";
}
.ph.ph-arrow-up:before {
  content: "\e08e";
}
.ph.ph-arrow-up-left:before {
  content: "\e090";
}
.ph.ph-arrow-up-right:before {
  content: "\e092";
}
.ph.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph.ph-arrows-counter-clockwise:before {
  content: "\e096";
}
.ph.ph-arrows-down-up:before {
  content: "\e098";
}
.ph.ph-arrows-horizontal:before {
  content: "\eb06";
}
.ph.ph-arrows-in:before {
  content: "\e09a";
}
.ph.ph-arrows-in-cardinal:before {
  content: "\e09c";
}
.ph.ph-arrows-in-line-horizontal:before {
  content: "\e530";
}
.ph.ph-arrows-in-line-vertical:before {
  content: "\e532";
}
.ph.ph-arrows-in-simple:before {
  content: "\e09e";
}
.ph.ph-arrows-left-right:before {
  content: "\e0a0";
}
.ph.ph-arrows-merge:before {
  content: "\ed3e";
}
.ph.ph-arrows-out:before {
  content: "\e0a2";
}
.ph.ph-arrows-out-cardinal:before {
  content: "\e0a4";
}
.ph.ph-arrows-out-line-horizontal:before {
  content: "\e534";
}
.ph.ph-arrows-out-line-vertical:before {
  content: "\e536";
}
.ph.ph-arrows-out-simple:before {
  content: "\e0a6";
}
.ph.ph-arrows-split:before {
  content: "\ed3c";
}
.ph.ph-arrows-vertical:before {
  content: "\eb04";
}
.ph.ph-article:before {
  content: "\e0a8";
}
.ph.ph-article-medium:before {
  content: "\e5e0";
}
.ph.ph-article-ny-times:before {
  content: "\e5e2";
}
.ph.ph-asclepius:before {
  content: "\ee34";
}
.ph.ph-caduceus:before {
  content: "\ee34";
}
.ph.ph-asterisk:before {
  content: "\e0aa";
}
.ph.ph-asterisk-simple:before {
  content: "\e832";
}
.ph.ph-at:before {
  content: "\e0ac";
}
.ph.ph-atom:before {
  content: "\e5e4";
}
.ph.ph-avocado:before {
  content: "\ee04";
}
.ph.ph-axe:before {
  content: "\e9fc";
}
.ph.ph-baby:before {
  content: "\e774";
}
.ph.ph-baby-carriage:before {
  content: "\e818";
}
.ph.ph-backpack:before {
  content: "\e922";
}
.ph.ph-backspace:before {
  content: "\e0ae";
}
.ph.ph-bag:before {
  content: "\e0b0";
}
.ph.ph-bag-simple:before {
  content: "\e5e6";
}
.ph.ph-balloon:before {
  content: "\e76c";
}
.ph.ph-bandaids:before {
  content: "\e0b2";
}
.ph.ph-bank:before {
  content: "\e0b4";
}
.ph.ph-barbell:before {
  content: "\e0b6";
}
.ph.ph-barcode:before {
  content: "\e0b8";
}
.ph.ph-barn:before {
  content: "\ec72";
}
.ph.ph-barricade:before {
  content: "\e948";
}
.ph.ph-baseball:before {
  content: "\e71a";
}
.ph.ph-baseball-cap:before {
  content: "\ea28";
}
.ph.ph-baseball-helmet:before {
  content: "\ee4a";
}
.ph.ph-basket:before {
  content: "\e964";
}
.ph.ph-basketball:before {
  content: "\e724";
}
.ph.ph-bathtub:before {
  content: "\e81e";
}
.ph.ph-battery-charging:before {
  content: "\e0ba";
}
.ph.ph-battery-charging-vertical:before {
  content: "\e0bc";
}
.ph.ph-battery-empty:before {
  content: "\e0be";
}
.ph.ph-battery-full:before {
  content: "\e0c0";
}
.ph.ph-battery-high:before {
  content: "\e0c2";
}
.ph.ph-battery-low:before {
  content: "\e0c4";
}
.ph.ph-battery-medium:before {
  content: "\e0c6";
}
.ph.ph-battery-plus:before {
  content: "\e808";
}
.ph.ph-battery-plus-vertical:before {
  content: "\ec50";
}
.ph.ph-battery-vertical-empty:before {
  content: "\e7c6";
}
.ph.ph-battery-vertical-full:before {
  content: "\e7c4";
}
.ph.ph-battery-vertical-high:before {
  content: "\e7c2";
}
.ph.ph-battery-vertical-low:before {
  content: "\e7be";
}
.ph.ph-battery-vertical-medium:before {
  content: "\e7c0";
}
.ph.ph-battery-warning:before {
  content: "\e0c8";
}
.ph.ph-battery-warning-vertical:before {
  content: "\e0ca";
}
.ph.ph-beach-ball:before {
  content: "\ed24";
}
.ph.ph-beanie:before {
  content: "\ea2a";
}
.ph.ph-bed:before {
  content: "\e0cc";
}
.ph.ph-beer-bottle:before {
  content: "\e7b0";
}
.ph.ph-beer-stein:before {
  content: "\eb62";
}
.ph.ph-behance-logo:before {
  content: "\e7f4";
}
.ph.ph-bell:before {
  content: "\e0ce";
}
.ph.ph-bell-ringing:before {
  content: "\e5e8";
}
.ph.ph-bell-simple:before {
  content: "\e0d0";
}
.ph.ph-bell-simple-ringing:before {
  content: "\e5ea";
}
.ph.ph-bell-simple-slash:before {
  content: "\e0d2";
}
.ph.ph-bell-simple-z:before {
  content: "\e5ec";
}
.ph.ph-bell-slash:before {
  content: "\e0d4";
}
.ph.ph-bell-z:before {
  content: "\e5ee";
}
.ph.ph-belt:before {
  content: "\ea2c";
}
.ph.ph-bezier-curve:before {
  content: "\eb00";
}
.ph.ph-bicycle:before {
  content: "\e0d6";
}
.ph.ph-binary:before {
  content: "\ee60";
}
.ph.ph-binoculars:before {
  content: "\ea64";
}
.ph.ph-biohazard:before {
  content: "\e9e0";
}
.ph.ph-bird:before {
  content: "\e72c";
}
.ph.ph-blueprint:before {
  content: "\eda0";
}
.ph.ph-bluetooth:before {
  content: "\e0da";
}
.ph.ph-bluetooth-connected:before {
  content: "\e0dc";
}
.ph.ph-bluetooth-slash:before {
  content: "\e0de";
}
.ph.ph-bluetooth-x:before {
  content: "\e0e0";
}
.ph.ph-boat:before {
  content: "\e786";
}
.ph.ph-bomb:before {
  content: "\ee0a";
}
.ph.ph-bone:before {
  content: "\e7f2";
}
.ph.ph-book:before {
  content: "\e0e2";
}
.ph.ph-book-bookmark:before {
  content: "\e0e4";
}
.ph.ph-book-open:before {
  content: "\e0e6";
}
.ph.ph-book-open-text:before {
  content: "\e8f2";
}
.ph.ph-book-open-user:before {
  content: "\ede0";
}
.ph.ph-bookmark:before {
  content: "\e0e8";
}
.ph.ph-bookmark-simple:before {
  content: "\e0ea";
}
.ph.ph-bookmarks:before {
  content: "\e0ec";
}
.ph.ph-bookmarks-simple:before {
  content: "\e5f0";
}
.ph.ph-books:before {
  content: "\e758";
}
.ph.ph-boot:before {
  content: "\ecca";
}
.ph.ph-boules:before {
  content: "\e722";
}
.ph.ph-bounding-box:before {
  content: "\e6ce";
}
.ph.ph-bowl-food:before {
  content: "\eaa4";
}
.ph.ph-bowl-steam:before {
  content: "\e8e4";
}
.ph.ph-bowling-ball:before {
  content: "\ea34";
}
.ph.ph-box-arrow-down:before {
  content: "\e00e";
}
.ph.ph-archive-box:before {
  content: "\e00e";
}
.ph.ph-box-arrow-up:before {
  content: "\ee54";
}
.ph.ph-boxing-glove:before {
  content: "\ea36";
}
.ph.ph-brackets-angle:before {
  content: "\e862";
}
.ph.ph-brackets-curly:before {
  content: "\e860";
}
.ph.ph-brackets-round:before {
  content: "\e864";
}
.ph.ph-brackets-square:before {
  content: "\e85e";
}
.ph.ph-brain:before {
  content: "\e74e";
}
.ph.ph-brandy:before {
  content: "\e6b4";
}
.ph.ph-bread:before {
  content: "\e81c";
}
.ph.ph-bridge:before {
  content: "\ea68";
}
.ph.ph-briefcase:before {
  content: "\e0ee";
}
.ph.ph-briefcase-metal:before {
  content: "\e5f2";
}
.ph.ph-broadcast:before {
  content: "\e0f2";
}
.ph.ph-broom:before {
  content: "\ec54";
}
.ph.ph-browser:before {
  content: "\e0f4";
}
.ph.ph-browsers:before {
  content: "\e0f6";
}
.ph.ph-bug:before {
  content: "\e5f4";
}
.ph.ph-bug-beetle:before {
  content: "\e5f6";
}
.ph.ph-bug-droid:before {
  content: "\e5f8";
}
.ph.ph-building:before {
  content: "\e100";
}
.ph.ph-building-apartment:before {
  content: "\e0fe";
}
.ph.ph-building-office:before {
  content: "\e0ff";
}
.ph.ph-buildings:before {
  content: "\e102";
}
.ph.ph-bulldozer:before {
  content: "\ec6c";
}
.ph.ph-bus:before {
  content: "\e106";
}
.ph.ph-butterfly:before {
  content: "\ea6e";
}
.ph.ph-cable-car:before {
  content: "\e49c";
}
.ph.ph-cactus:before {
  content: "\e918";
}
.ph.ph-cake:before {
  content: "\e780";
}
.ph.ph-calculator:before {
  content: "\e538";
}
.ph.ph-calendar:before {
  content: "\e108";
}
.ph.ph-calendar-blank:before {
  content: "\e10a";
}
.ph.ph-calendar-check:before {
  content: "\e712";
}
.ph.ph-calendar-dot:before {
  content: "\e7b2";
}
.ph.ph-calendar-dots:before {
  content: "\e7b4";
}
.ph.ph-calendar-heart:before {
  content: "\e8b0";
}
.ph.ph-calendar-minus:before {
  content: "\ea14";
}
.ph.ph-calendar-plus:before {
  content: "\e714";
}
.ph.ph-calendar-slash:before {
  content: "\ea12";
}
.ph.ph-calendar-star:before {
  content: "\e8b2";
}
.ph.ph-calendar-x:before {
  content: "\e10c";
}
.ph.ph-call-bell:before {
  content: "\e7de";
}
.ph.ph-camera:before {
  content: "\e10e";
}
.ph.ph-camera-plus:before {
  content: "\ec58";
}
.ph.ph-camera-rotate:before {
  content: "\e7a4";
}
.ph.ph-camera-slash:before {
  content: "\e110";
}
.ph.ph-campfire:before {
  content: "\e9d8";
}
.ph.ph-car:before {
  content: "\e112";
}
.ph.ph-car-battery:before {
  content: "\ee30";
}
.ph.ph-car-profile:before {
  content: "\e8cc";
}
.ph.ph-car-simple:before {
  content: "\e114";
}
.ph.ph-cardholder:before {
  content: "\e5fa";
}
.ph.ph-cards:before {
  content: "\e0f8";
}
.ph.ph-cards-three:before {
  content: "\ee50";
}
.ph.ph-caret-circle-double-down:before {
  content: "\e116";
}
.ph.ph-caret-circle-double-left:before {
  content: "\e118";
}
.ph.ph-caret-circle-double-right:before {
  content: "\e11a";
}
.ph.ph-caret-circle-double-up:before {
  content: "\e11c";
}
.ph.ph-caret-circle-down:before {
  content: "\e11e";
}
.ph.ph-caret-circle-left:before {
  content: "\e120";
}
.ph.ph-caret-circle-right:before {
  content: "\e122";
}
.ph.ph-caret-circle-up:before {
  content: "\e124";
}
.ph.ph-caret-circle-up-down:before {
  content: "\e13e";
}
.ph.ph-caret-double-down:before {
  content: "\e126";
}
.ph.ph-caret-double-left:before {
  content: "\e128";
}
.ph.ph-caret-double-right:before {
  content: "\e12a";
}
.ph.ph-caret-double-up:before {
  content: "\e12c";
}
.ph.ph-caret-down:before {
  content: "\e136";
}
.ph.ph-caret-left:before {
  content: "\e138";
}
.ph.ph-caret-line-down:before {
  content: "\e134";
}
.ph.ph-caret-line-left:before {
  content: "\e132";
}
.ph.ph-caret-line-right:before {
  content: "\e130";
}
.ph.ph-caret-line-up:before {
  content: "\e12e";
}
.ph.ph-caret-right:before {
  content: "\e13a";
}
.ph.ph-caret-up:before {
  content: "\e13c";
}
.ph.ph-caret-up-down:before {
  content: "\e140";
}
.ph.ph-carrot:before {
  content: "\ed38";
}
.ph.ph-cash-register:before {
  content: "\ed80";
}
.ph.ph-cassette-tape:before {
  content: "\ed2e";
}
.ph.ph-castle-turret:before {
  content: "\e9d0";
}
.ph.ph-cat:before {
  content: "\e748";
}
.ph.ph-cell-signal-full:before {
  content: "\e142";
}
.ph.ph-cell-signal-high:before {
  content: "\e144";
}
.ph.ph-cell-signal-low:before {
  content: "\e146";
}
.ph.ph-cell-signal-medium:before {
  content: "\e148";
}
.ph.ph-cell-signal-none:before {
  content: "\e14a";
}
.ph.ph-cell-signal-slash:before {
  content: "\e14c";
}
.ph.ph-cell-signal-x:before {
  content: "\e14e";
}
.ph.ph-cell-tower:before {
  content: "\ebaa";
}
.ph.ph-certificate:before {
  content: "\e766";
}
.ph.ph-chair:before {
  content: "\e950";
}
.ph.ph-chalkboard:before {
  content: "\e5fc";
}
.ph.ph-chalkboard-simple:before {
  content: "\e5fe";
}
.ph.ph-chalkboard-teacher:before {
  content: "\e600";
}
.ph.ph-champagne:before {
  content: "\eaca";
}
.ph.ph-charging-station:before {
  content: "\e8d0";
}
.ph.ph-chart-bar:before {
  content: "\e150";
}
.ph.ph-chart-bar-horizontal:before {
  content: "\e152";
}
.ph.ph-chart-donut:before {
  content: "\eaa6";
}
.ph.ph-chart-line:before {
  content: "\e154";
}
.ph.ph-chart-line-down:before {
  content: "\e8b6";
}
.ph.ph-chart-line-up:before {
  content: "\e156";
}
.ph.ph-chart-pie:before {
  content: "\e158";
}
.ph.ph-chart-pie-slice:before {
  content: "\e15a";
}
.ph.ph-chart-polar:before {
  content: "\eaa8";
}
.ph.ph-chart-scatter:before {
  content: "\eaac";
}
.ph.ph-chat:before {
  content: "\e15c";
}
.ph.ph-chat-centered:before {
  content: "\e160";
}
.ph.ph-chat-centered-dots:before {
  content: "\e164";
}
.ph.ph-chat-centered-slash:before {
  content: "\e162";
}
.ph.ph-chat-centered-text:before {
  content: "\e166";
}
.ph.ph-chat-circle:before {
  content: "\e168";
}
.ph.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph.ph-chat-circle-slash:before {
  content: "\e16a";
}
.ph.ph-chat-circle-text:before {
  content: "\e16e";
}
.ph.ph-chat-dots:before {
  content: "\e170";
}
.ph.ph-chat-slash:before {
  content: "\e15e";
}
.ph.ph-chat-teardrop:before {
  content: "\e172";
}
.ph.ph-chat-teardrop-dots:before {
  content: "\e176";
}
.ph.ph-chat-teardrop-slash:before {
  content: "\e174";
}
.ph.ph-chat-teardrop-text:before {
  content: "\e178";
}
.ph.ph-chat-text:before {
  content: "\e17a";
}
.ph.ph-chats:before {
  content: "\e17c";
}
.ph.ph-chats-circle:before {
  content: "\e17e";
}
.ph.ph-chats-teardrop:before {
  content: "\e180";
}
.ph.ph-check:before {
  content: "\e182";
}
.ph.ph-check-circle:before {
  content: "\e184";
}
.ph.ph-check-fat:before {
  content: "\eba6";
}
.ph.ph-check-square:before {
  content: "\e186";
}
.ph.ph-check-square-offset:before {
  content: "\e188";
}
.ph.ph-checkerboard:before {
  content: "\e8c4";
}
.ph.ph-checks:before {
  content: "\e53a";
}
.ph.ph-cheers:before {
  content: "\ea4a";
}
.ph.ph-cheese:before {
  content: "\e9fe";
}
.ph.ph-chef-hat:before {
  content: "\ed8e";
}
.ph.ph-cherries:before {
  content: "\e830";
}
.ph.ph-church:before {
  content: "\ecea";
}
.ph.ph-cigarette:before {
  content: "\ed90";
}
.ph.ph-cigarette-slash:before {
  content: "\ed92";
}
.ph.ph-circle:before {
  content: "\e18a";
}
.ph.ph-circle-dashed:before {
  content: "\e602";
}
.ph.ph-circle-half:before {
  content: "\e18c";
}
.ph.ph-circle-half-tilt:before {
  content: "\e18e";
}
.ph.ph-circle-notch:before {
  content: "\eb44";
}
.ph.ph-circles-four:before {
  content: "\e190";
}
.ph.ph-circles-three:before {
  content: "\e192";
}
.ph.ph-circles-three-plus:before {
  content: "\e194";
}
.ph.ph-circuitry:before {
  content: "\e9c2";
}
.ph.ph-city:before {
  content: "\ea6a";
}
.ph.ph-clipboard:before {
  content: "\e196";
}
.ph.ph-clipboard-text:before {
  content: "\e198";
}
.ph.ph-clock:before {
  content: "\e19a";
}
.ph.ph-clock-afternoon:before {
  content: "\e19c";
}
.ph.ph-clock-clockwise:before {
  content: "\e19e";
}
.ph.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph.ph-clock-counter-clockwise:before {
  content: "\e1a0";
}
.ph.ph-clock-user:before {
  content: "\edec";
}
.ph.ph-closed-captioning:before {
  content: "\e1a4";
}
.ph.ph-cloud:before {
  content: "\e1aa";
}
.ph.ph-cloud-arrow-down:before {
  content: "\e1ac";
}
.ph.ph-cloud-arrow-up:before {
  content: "\e1ae";
}
.ph.ph-cloud-check:before {
  content: "\e1b0";
}
.ph.ph-cloud-fog:before {
  content: "\e53c";
}
.ph.ph-cloud-lightning:before {
  content: "\e1b2";
}
.ph.ph-cloud-moon:before {
  content: "\e53e";
}
.ph.ph-cloud-rain:before {
  content: "\e1b4";
}
.ph.ph-cloud-slash:before {
  content: "\e1b6";
}
.ph.ph-cloud-snow:before {
  content: "\e1b8";
}
.ph.ph-cloud-sun:before {
  content: "\e540";
}
.ph.ph-cloud-warning:before {
  content: "\ea98";
}
.ph.ph-cloud-x:before {
  content: "\ea96";
}
.ph.ph-clover:before {
  content: "\edc8";
}
.ph.ph-club:before {
  content: "\e1ba";
}
.ph.ph-coat-hanger:before {
  content: "\e7fe";
}
.ph.ph-coda-logo:before {
  content: "\e7ce";
}
.ph.ph-code:before {
  content: "\e1bc";
}
.ph.ph-code-block:before {
  content: "\eafe";
}
.ph.ph-code-simple:before {
  content: "\e1be";
}
.ph.ph-codepen-logo:before {
  content: "\e978";
}
.ph.ph-codesandbox-logo:before {
  content: "\ea06";
}
.ph.ph-coffee:before {
  content: "\e1c2";
}
.ph.ph-coffee-bean:before {
  content: "\e1c0";
}
.ph.ph-coin:before {
  content: "\e60e";
}
.ph.ph-coin-vertical:before {
  content: "\eb48";
}
.ph.ph-coins:before {
  content: "\e78e";
}
.ph.ph-columns:before {
  content: "\e546";
}
.ph.ph-columns-plus-left:before {
  content: "\e544";
}
.ph.ph-columns-plus-right:before {
  content: "\e542";
}
.ph.ph-command:before {
  content: "\e1c4";
}
.ph.ph-compass:before {
  content: "\e1c8";
}
.ph.ph-compass-rose:before {
  content: "\e1c6";
}
.ph.ph-compass-tool:before {
  content: "\ea0e";
}
.ph.ph-computer-tower:before {
  content: "\e548";
}
.ph.ph-confetti:before {
  content: "\e81a";
}
.ph.ph-contactless-payment:before {
  content: "\ed42";
}
.ph.ph-control:before {
  content: "\eca6";
}
.ph.ph-cookie:before {
  content: "\e6ca";
}
.ph.ph-cooking-pot:before {
  content: "\e764";
}
.ph.ph-copy:before {
  content: "\e1ca";
}
.ph.ph-copy-simple:before {
  content: "\e1cc";
}
.ph.ph-copyleft:before {
  content: "\e86a";
}
.ph.ph-copyright:before {
  content: "\e54a";
}
.ph.ph-corners-in:before {
  content: "\e1ce";
}
.ph.ph-corners-out:before {
  content: "\e1d0";
}
.ph.ph-couch:before {
  content: "\e7f6";
}
.ph.ph-court-basketball:before {
  content: "\ee36";
}
.ph.ph-cow:before {
  content: "\eabe";
}
.ph.ph-cowboy-hat:before {
  content: "\ed12";
}
.ph.ph-cpu:before {
  content: "\e610";
}
.ph.ph-crane:before {
  content: "\ed48";
}
.ph.ph-crane-tower:before {
  content: "\ed49";
}
.ph.ph-credit-card:before {
  content: "\e1d2";
}
.ph.ph-cricket:before {
  content: "\ee12";
}
.ph.ph-crop:before {
  content: "\e1d4";
}
.ph.ph-cross:before {
  content: "\e8a0";
}
.ph.ph-crosshair:before {
  content: "\e1d6";
}
.ph.ph-crosshair-simple:before {
  content: "\e1d8";
}
.ph.ph-crown:before {
  content: "\e614";
}
.ph.ph-crown-cross:before {
  content: "\ee5e";
}
.ph.ph-crown-simple:before {
  content: "\e616";
}
.ph.ph-cube:before {
  content: "\e1da";
}
.ph.ph-cube-focus:before {
  content: "\ed0a";
}
.ph.ph-cube-transparent:before {
  content: "\ec7c";
}
.ph.ph-currency-btc:before {
  content: "\e618";
}
.ph.ph-currency-circle-dollar:before {
  content: "\e54c";
}
.ph.ph-currency-cny:before {
  content: "\e54e";
}
.ph.ph-currency-dollar:before {
  content: "\e550";
}
.ph.ph-currency-dollar-simple:before {
  content: "\e552";
}
.ph.ph-currency-eth:before {
  content: "\eada";
}
.ph.ph-currency-eur:before {
  content: "\e554";
}
.ph.ph-currency-gbp:before {
  content: "\e556";
}
.ph.ph-currency-inr:before {
  content: "\e558";
}
.ph.ph-currency-jpy:before {
  content: "\e55a";
}
.ph.ph-currency-krw:before {
  content: "\e55c";
}
.ph.ph-currency-kzt:before {
  content: "\ec4c";
}
.ph.ph-currency-ngn:before {
  content: "\eb52";
}
.ph.ph-currency-rub:before {
  content: "\e55e";
}
.ph.ph-cursor:before {
  content: "\e1dc";
}
.ph.ph-cursor-click:before {
  content: "\e7c8";
}
.ph.ph-cursor-text:before {
  content: "\e7d8";
}
.ph.ph-cylinder:before {
  content: "\e8fc";
}
.ph.ph-database:before {
  content: "\e1de";
}
.ph.ph-desk:before {
  content: "\ed16";
}
.ph.ph-desktop:before {
  content: "\e560";
}
.ph.ph-desktop-tower:before {
  content: "\e562";
}
.ph.ph-detective:before {
  content: "\e83e";
}
.ph.ph-dev-to-logo:before {
  content: "\ed0e";
}
.ph.ph-device-mobile:before {
  content: "\e1e0";
}
.ph.ph-device-mobile-camera:before {
  content: "\e1e2";
}
.ph.ph-device-mobile-slash:before {
  content: "\ee46";
}
.ph.ph-device-mobile-speaker:before {
  content: "\e1e4";
}
.ph.ph-device-rotate:before {
  content: "\edf2";
}
.ph.ph-device-tablet:before {
  content: "\e1e6";
}
.ph.ph-device-tablet-camera:before {
  content: "\e1e8";
}
.ph.ph-device-tablet-speaker:before {
  content: "\e1ea";
}
.ph.ph-devices:before {
  content: "\eba4";
}
.ph.ph-diamond:before {
  content: "\e1ec";
}
.ph.ph-diamonds-four:before {
  content: "\e8f4";
}
.ph.ph-dice-five:before {
  content: "\e1ee";
}
.ph.ph-dice-four:before {
  content: "\e1f0";
}
.ph.ph-dice-one:before {
  content: "\e1f2";
}
.ph.ph-dice-six:before {
  content: "\e1f4";
}
.ph.ph-dice-three:before {
  content: "\e1f6";
}
.ph.ph-dice-two:before {
  content: "\e1f8";
}
.ph.ph-disc:before {
  content: "\e564";
}
.ph.ph-disco-ball:before {
  content: "\ed98";
}
.ph.ph-discord-logo:before {
  content: "\e61a";
}
.ph.ph-divide:before {
  content: "\e1fa";
}
.ph.ph-dna:before {
  content: "\e924";
}
.ph.ph-dog:before {
  content: "\e74a";
}
.ph.ph-door:before {
  content: "\e61c";
}
.ph.ph-door-open:before {
  content: "\e7e6";
}
.ph.ph-dot:before {
  content: "\ecde";
}
.ph.ph-dot-outline:before {
  content: "\ece0";
}
.ph.ph-dots-nine:before {
  content: "\e1fc";
}
.ph.ph-dots-six:before {
  content: "\e794";
}
.ph.ph-dots-six-vertical:before {
  content: "\eae2";
}
.ph.ph-dots-three:before {
  content: "\e1fe";
}
.ph.ph-dots-three-circle:before {
  content: "\e200";
}
.ph.ph-dots-three-circle-vertical:before {
  content: "\e202";
}
.ph.ph-dots-three-outline:before {
  content: "\e204";
}
.ph.ph-dots-three-outline-vertical:before {
  content: "\e206";
}
.ph.ph-dots-three-vertical:before {
  content: "\e208";
}
.ph.ph-download:before {
  content: "\e20a";
}
.ph.ph-download-simple:before {
  content: "\e20c";
}
.ph.ph-dress:before {
  content: "\ea7e";
}
.ph.ph-dresser:before {
  content: "\e94e";
}
.ph.ph-dribbble-logo:before {
  content: "\e20e";
}
.ph.ph-drone:before {
  content: "\ed74";
}
.ph.ph-drop:before {
  content: "\e210";
}
.ph.ph-drop-half:before {
  content: "\e566";
}
.ph.ph-drop-half-bottom:before {
  content: "\eb40";
}
.ph.ph-drop-simple:before {
  content: "\ee32";
}
.ph.ph-drop-slash:before {
  content: "\e954";
}
.ph.ph-dropbox-logo:before {
  content: "\e7d0";
}
.ph.ph-ear:before {
  content: "\e70c";
}
.ph.ph-ear-slash:before {
  content: "\e70e";
}
.ph.ph-egg:before {
  content: "\e812";
}
.ph.ph-egg-crack:before {
  content: "\eb64";
}
.ph.ph-eject:before {
  content: "\e212";
}
.ph.ph-eject-simple:before {
  content: "\e6ae";
}
.ph.ph-elevator:before {
  content: "\ecc0";
}
.ph.ph-empty:before {
  content: "\edbc";
}
.ph.ph-engine:before {
  content: "\ea80";
}
.ph.ph-envelope:before {
  content: "\e214";
}
.ph.ph-envelope-open:before {
  content: "\e216";
}
.ph.ph-envelope-simple:before {
  content: "\e218";
}
.ph.ph-envelope-simple-open:before {
  content: "\e21a";
}
.ph.ph-equalizer:before {
  content: "\ebbc";
}
.ph.ph-equals:before {
  content: "\e21c";
}
.ph.ph-eraser:before {
  content: "\e21e";
}
.ph.ph-escalator-down:before {
  content: "\ecba";
}
.ph.ph-escalator-up:before {
  content: "\ecbc";
}
.ph.ph-exam:before {
  content: "\e742";
}
.ph.ph-exclamation-mark:before {
  content: "\ee44";
}
.ph.ph-exclude:before {
  content: "\e882";
}
.ph.ph-exclude-square:before {
  content: "\e880";
}
.ph.ph-export:before {
  content: "\eaf0";
}
.ph.ph-eye:before {
  content: "\e220";
}
.ph.ph-eye-closed:before {
  content: "\e222";
}
.ph.ph-eye-slash:before {
  content: "\e224";
}
.ph.ph-eyedropper:before {
  content: "\e568";
}
.ph.ph-eyedropper-sample:before {
  content: "\eac4";
}
.ph.ph-eyeglasses:before {
  content: "\e7ba";
}
.ph.ph-eyes:before {
  content: "\ee5c";
}
.ph.ph-face-mask:before {
  content: "\e56a";
}
.ph.ph-facebook-logo:before {
  content: "\e226";
}
.ph.ph-factory:before {
  content: "\e760";
}
.ph.ph-faders:before {
  content: "\e228";
}
.ph.ph-faders-horizontal:before {
  content: "\e22a";
}
.ph.ph-fallout-shelter:before {
  content: "\e9de";
}
.ph.ph-fan:before {
  content: "\e9f2";
}
.ph.ph-farm:before {
  content: "\ec70";
}
.ph.ph-fast-forward:before {
  content: "\e6a6";
}
.ph.ph-fast-forward-circle:before {
  content: "\e22c";
}
.ph.ph-feather:before {
  content: "\e9c0";
}
.ph.ph-fediverse-logo:before {
  content: "\ed66";
}
.ph.ph-figma-logo:before {
  content: "\e22e";
}
.ph.ph-file:before {
  content: "\e230";
}
.ph.ph-file-archive:before {
  content: "\eb2a";
}
.ph.ph-file-arrow-down:before {
  content: "\e232";
}
.ph.ph-file-arrow-up:before {
  content: "\e61e";
}
.ph.ph-file-audio:before {
  content: "\ea20";
}
.ph.ph-file-c:before {
  content: "\eb32";
}
.ph.ph-file-c-sharp:before {
  content: "\eb30";
}
.ph.ph-file-cloud:before {
  content: "\e95e";
}
.ph.ph-file-code:before {
  content: "\e914";
}
.ph.ph-file-cpp:before {
  content: "\eb2e";
}
.ph.ph-file-css:before {
  content: "\eb34";
}
.ph.ph-file-csv:before {
  content: "\eb1c";
}
.ph.ph-file-dashed:before {
  content: "\e704";
}
.ph.ph-file-dotted:before {
  content: "\e704";
}
.ph.ph-file-doc:before {
  content: "\eb1e";
}
.ph.ph-file-html:before {
  content: "\eb38";
}
.ph.ph-file-image:before {
  content: "\ea24";
}
.ph.ph-file-ini:before {
  content: "\eb33";
}
.ph.ph-file-jpg:before {
  content: "\eb1a";
}
.ph.ph-file-js:before {
  content: "\eb24";
}
.ph.ph-file-jsx:before {
  content: "\eb3a";
}
.ph.ph-file-lock:before {
  content: "\e95c";
}
.ph.ph-file-magnifying-glass:before {
  content: "\e238";
}
.ph.ph-file-search:before {
  content: "\e238";
}
.ph.ph-file-md:before {
  content: "\ed50";
}
.ph.ph-file-minus:before {
  content: "\e234";
}
.ph.ph-file-pdf:before {
  content: "\e702";
}
.ph.ph-file-plus:before {
  content: "\e236";
}
.ph.ph-file-png:before {
  content: "\eb18";
}
.ph.ph-file-ppt:before {
  content: "\eb20";
}
.ph.ph-file-py:before {
  content: "\eb2c";
}
.ph.ph-file-rs:before {
  content: "\eb28";
}
.ph.ph-file-sql:before {
  content: "\ed4e";
}
.ph.ph-file-svg:before {
  content: "\ed08";
}
.ph.ph-file-text:before {
  content: "\e23a";
}
.ph.ph-file-ts:before {
  content: "\eb26";
}
.ph.ph-file-tsx:before {
  content: "\eb3c";
}
.ph.ph-file-txt:before {
  content: "\eb35";
}
.ph.ph-file-video:before {
  content: "\ea22";
}
.ph.ph-file-vue:before {
  content: "\eb3e";
}
.ph.ph-file-x:before {
  content: "\e23c";
}
.ph.ph-file-xls:before {
  content: "\eb22";
}
.ph.ph-file-zip:before {
  content: "\e958";
}
.ph.ph-files:before {
  content: "\e710";
}
.ph.ph-film-reel:before {
  content: "\e8c0";
}
.ph.ph-film-script:before {
  content: "\eb50";
}
.ph.ph-film-slate:before {
  content: "\e8c2";
}
.ph.ph-film-strip:before {
  content: "\e792";
}
.ph.ph-fingerprint:before {
  content: "\e23e";
}
.ph.ph-fingerprint-simple:before {
  content: "\e240";
}
.ph.ph-finn-the-human:before {
  content: "\e56c";
}
.ph.ph-fire:before {
  content: "\e242";
}
.ph.ph-fire-extinguisher:before {
  content: "\e9e8";
}
.ph.ph-fire-simple:before {
  content: "\e620";
}
.ph.ph-fire-truck:before {
  content: "\e574";
}
.ph.ph-first-aid:before {
  content: "\e56e";
}
.ph.ph-first-aid-kit:before {
  content: "\e570";
}
.ph.ph-fish:before {
  content: "\e728";
}
.ph.ph-fish-simple:before {
  content: "\e72a";
}
.ph.ph-flag:before {
  content: "\e244";
}
.ph.ph-flag-banner:before {
  content: "\e622";
}
.ph.ph-flag-banner-fold:before {
  content: "\ecf2";
}
.ph.ph-flag-checkered:before {
  content: "\ea38";
}
.ph.ph-flag-pennant:before {
  content: "\ecf0";
}
.ph.ph-flame:before {
  content: "\e624";
}
.ph.ph-flashlight:before {
  content: "\e246";
}
.ph.ph-flask:before {
  content: "\e79e";
}
.ph.ph-flip-horizontal:before {
  content: "\ed6a";
}
.ph.ph-flip-vertical:before {
  content: "\ed6c";
}
.ph.ph-floppy-disk:before {
  content: "\e248";
}
.ph.ph-floppy-disk-back:before {
  content: "\eaf4";
}
.ph.ph-flow-arrow:before {
  content: "\e6ec";
}
.ph.ph-flower:before {
  content: "\e75e";
}
.ph.ph-flower-lotus:before {
  content: "\e6cc";
}
.ph.ph-flower-tulip:before {
  content: "\eacc";
}
.ph.ph-flying-saucer:before {
  content: "\eb4a";
}
.ph.ph-folder:before {
  content: "\e24a";
}
.ph.ph-folder-notch:before {
  content: "\e24a";
}
.ph.ph-folder-dashed:before {
  content: "\e8f8";
}
.ph.ph-folder-dotted:before {
  content: "\e8f8";
}
.ph.ph-folder-lock:before {
  content: "\ea3c";
}
.ph.ph-folder-minus:before {
  content: "\e254";
}
.ph.ph-folder-notch-minus:before {
  content: "\e254";
}
.ph.ph-folder-open:before {
  content: "\e256";
}
.ph.ph-folder-notch-open:before {
  content: "\e256";
}
.ph.ph-folder-plus:before {
  content: "\e258";
}
.ph.ph-folder-notch-plus:before {
  content: "\e258";
}
.ph.ph-folder-simple:before {
  content: "\e25a";
}
.ph.ph-folder-simple-dashed:before {
  content: "\ec2a";
}
.ph.ph-folder-simple-dotted:before {
  content: "\ec2a";
}
.ph.ph-folder-simple-lock:before {
  content: "\eb5e";
}
.ph.ph-folder-simple-minus:before {
  content: "\e25c";
}
.ph.ph-folder-simple-plus:before {
  content: "\e25e";
}
.ph.ph-folder-simple-star:before {
  content: "\ec2e";
}
.ph.ph-folder-simple-user:before {
  content: "\eb60";
}
.ph.ph-folder-star:before {
  content: "\ea86";
}
.ph.ph-folder-user:before {
  content: "\eb46";
}
.ph.ph-folders:before {
  content: "\e260";
}
.ph.ph-football:before {
  content: "\e718";
}
.ph.ph-football-helmet:before {
  content: "\ee4c";
}
.ph.ph-footprints:before {
  content: "\ea88";
}
.ph.ph-fork-knife:before {
  content: "\e262";
}
.ph.ph-four-k:before {
  content: "\ea5c";
}
.ph.ph-frame-corners:before {
  content: "\e626";
}
.ph.ph-framer-logo:before {
  content: "\e264";
}
.ph.ph-function:before {
  content: "\ebe4";
}
.ph.ph-funnel:before {
  content: "\e266";
}
.ph.ph-funnel-simple:before {
  content: "\e268";
}
.ph.ph-funnel-simple-x:before {
  content: "\e26a";
}
.ph.ph-funnel-x:before {
  content: "\e26c";
}
.ph.ph-game-controller:before {
  content: "\e26e";
}
.ph.ph-garage:before {
  content: "\ecd6";
}
.ph.ph-gas-can:before {
  content: "\e8ce";
}
.ph.ph-gas-pump:before {
  content: "\e768";
}
.ph.ph-gauge:before {
  content: "\e628";
}
.ph.ph-gavel:before {
  content: "\ea32";
}
.ph.ph-gear:before {
  content: "\e270";
}
.ph.ph-gear-fine:before {
  content: "\e87c";
}
.ph.ph-gear-six:before {
  content: "\e272";
}
.ph.ph-gender-female:before {
  content: "\e6e0";
}
.ph.ph-gender-intersex:before {
  content: "\e6e6";
}
.ph.ph-gender-male:before {
  content: "\e6e2";
}
.ph.ph-gender-neuter:before {
  content: "\e6ea";
}
.ph.ph-gender-nonbinary:before {
  content: "\e6e4";
}
.ph.ph-gender-transgender:before {
  content: "\e6e8";
}
.ph.ph-ghost:before {
  content: "\e62a";
}
.ph.ph-gif:before {
  content: "\e274";
}
.ph.ph-gift:before {
  content: "\e276";
}
.ph.ph-git-branch:before {
  content: "\e278";
}
.ph.ph-git-commit:before {
  content: "\e27a";
}
.ph.ph-git-diff:before {
  content: "\e27c";
}
.ph.ph-git-fork:before {
  content: "\e27e";
}
.ph.ph-git-merge:before {
  content: "\e280";
}
.ph.ph-git-pull-request:before {
  content: "\e282";
}
.ph.ph-github-logo:before {
  content: "\e576";
}
.ph.ph-gitlab-logo:before {
  content: "\e694";
}
.ph.ph-gitlab-logo-simple:before {
  content: "\e696";
}
.ph.ph-globe:before {
  content: "\e288";
}
.ph.ph-globe-hemisphere-east:before {
  content: "\e28a";
}
.ph.ph-globe-hemisphere-west:before {
  content: "\e28c";
}
.ph.ph-globe-simple:before {
  content: "\e28e";
}
.ph.ph-globe-simple-x:before {
  content: "\e284";
}
.ph.ph-globe-stand:before {
  content: "\e290";
}
.ph.ph-globe-x:before {
  content: "\e286";
}
.ph.ph-goggles:before {
  content: "\ecb4";
}
.ph.ph-golf:before {
  content: "\ea3e";
}
.ph.ph-goodreads-logo:before {
  content: "\ed10";
}
.ph.ph-google-cardboard-logo:before {
  content: "\e7b6";
}
.ph.ph-google-chrome-logo:before {
  content: "\e976";
}
.ph.ph-google-drive-logo:before {
  content: "\e8f6";
}
.ph.ph-google-logo:before {
  content: "\e292";
}
.ph.ph-google-photos-logo:before {
  content: "\eb92";
}
.ph.ph-google-play-logo:before {
  content: "\e294";
}
.ph.ph-google-podcasts-logo:before {
  content: "\eb94";
}
.ph.ph-gps:before {
  content: "\edd8";
}
.ph.ph-gps-fix:before {
  content: "\edd6";
}
.ph.ph-gps-slash:before {
  content: "\edd4";
}
.ph.ph-gradient:before {
  content: "\eb42";
}
.ph.ph-graduation-cap:before {
  content: "\e62c";
}
.ph.ph-grains:before {
  content: "\ec68";
}
.ph.ph-grains-slash:before {
  content: "\ec6a";
}
.ph.ph-graph:before {
  content: "\eb58";
}
.ph.ph-graphics-card:before {
  content: "\e612";
}
.ph.ph-greater-than:before {
  content: "\edc4";
}
.ph.ph-greater-than-or-equal:before {
  content: "\eda2";
}
.ph.ph-grid-four:before {
  content: "\e296";
}
.ph.ph-grid-nine:before {
  content: "\ec8c";
}
.ph.ph-guitar:before {
  content: "\ea8a";
}
.ph.ph-hair-dryer:before {
  content: "\ea66";
}
.ph.ph-hamburger:before {
  content: "\e790";
}
.ph.ph-hammer:before {
  content: "\e80e";
}
.ph.ph-hand:before {
  content: "\e298";
}
.ph.ph-hand-arrow-down:before {
  content: "\ea4e";
}
.ph.ph-hand-arrow-up:before {
  content: "\ee5a";
}
.ph.ph-hand-coins:before {
  content: "\ea8c";
}
.ph.ph-hand-deposit:before {
  content: "\ee82";
}
.ph.ph-hand-eye:before {
  content: "\ea4c";
}
.ph.ph-hand-fist:before {
  content: "\e57a";
}
.ph.ph-hand-grabbing:before {
  content: "\e57c";
}
.ph.ph-hand-heart:before {
  content: "\e810";
}
.ph.ph-hand-palm:before {
  content: "\e57e";
}
.ph.ph-hand-peace:before {
  content: "\e7cc";
}
.ph.ph-hand-pointing:before {
  content: "\e29a";
}
.ph.ph-hand-soap:before {
  content: "\e630";
}
.ph.ph-hand-swipe-left:before {
  content: "\ec94";
}
.ph.ph-hand-swipe-right:before {
  content: "\ec92";
}
.ph.ph-hand-tap:before {
  content: "\ec90";
}
.ph.ph-hand-waving:before {
  content: "\e580";
}
.ph.ph-hand-withdraw:before {
  content: "\ee80";
}
.ph.ph-handbag:before {
  content: "\e29c";
}
.ph.ph-handbag-simple:before {
  content: "\e62e";
}
.ph.ph-hands-clapping:before {
  content: "\e6a0";
}
.ph.ph-hands-praying:before {
  content: "\ecc8";
}
.ph.ph-handshake:before {
  content: "\e582";
}
.ph.ph-hard-drive:before {
  content: "\e29e";
}
.ph.ph-hard-drives:before {
  content: "\e2a0";
}
.ph.ph-hard-hat:before {
  content: "\ed46";
}
.ph.ph-hash:before {
  content: "\e2a2";
}
.ph.ph-hash-straight:before {
  content: "\e2a4";
}
.ph.ph-head-circuit:before {
  content: "\e7d4";
}
.ph.ph-headlights:before {
  content: "\e6fe";
}
.ph.ph-headphones:before {
  content: "\e2a6";
}
.ph.ph-headset:before {
  content: "\e584";
}
.ph.ph-heart:before {
  content: "\e2a8";
}
.ph.ph-heart-break:before {
  content: "\ebe8";
}
.ph.ph-heart-half:before {
  content: "\ec48";
}
.ph.ph-heart-straight:before {
  content: "\e2aa";
}
.ph.ph-heart-straight-break:before {
  content: "\eb98";
}
.ph.ph-heartbeat:before {
  content: "\e2ac";
}
.ph.ph-hexagon:before {
  content: "\e2ae";
}
.ph.ph-high-definition:before {
  content: "\ea8e";
}
.ph.ph-high-heel:before {
  content: "\e8e8";
}
.ph.ph-highlighter:before {
  content: "\ec76";
}
.ph.ph-highlighter-circle:before {
  content: "\e632";
}
.ph.ph-hockey:before {
  content: "\ec86";
}
.ph.ph-hoodie:before {
  content: "\ecd0";
}
.ph.ph-horse:before {
  content: "\e2b0";
}
.ph.ph-hospital:before {
  content: "\e844";
}
.ph.ph-hourglass:before {
  content: "\e2b2";
}
.ph.ph-hourglass-high:before {
  content: "\e2b4";
}
.ph.ph-hourglass-low:before {
  content: "\e2b6";
}
.ph.ph-hourglass-medium:before {
  content: "\e2b8";
}
.ph.ph-hourglass-simple:before {
  content: "\e2ba";
}
.ph.ph-hourglass-simple-high:before {
  content: "\e2bc";
}
.ph.ph-hourglass-simple-low:before {
  content: "\e2be";
}
.ph.ph-hourglass-simple-medium:before {
  content: "\e2c0";
}
.ph.ph-house:before {
  content: "\e2c2";
}
.ph.ph-house-line:before {
  content: "\e2c4";
}
.ph.ph-house-simple:before {
  content: "\e2c6";
}
.ph.ph-hurricane:before {
  content: "\e88e";
}
.ph.ph-ice-cream:before {
  content: "\e804";
}
.ph.ph-identification-badge:before {
  content: "\e6f6";
}
.ph.ph-identification-card:before {
  content: "\e2c8";
}
.ph.ph-image:before {
  content: "\e2ca";
}
.ph.ph-image-broken:before {
  content: "\e7a8";
}
.ph.ph-image-square:before {
  content: "\e2cc";
}
.ph.ph-images:before {
  content: "\e836";
}
.ph.ph-images-square:before {
  content: "\e834";
}
.ph.ph-infinity:before {
  content: "\e634";
}
.ph.ph-lemniscate:before {
  content: "\e634";
}
.ph.ph-info:before {
  content: "\e2ce";
}
.ph.ph-instagram-logo:before {
  content: "\e2d0";
}
.ph.ph-intersect:before {
  content: "\e2d2";
}
.ph.ph-intersect-square:before {
  content: "\e87a";
}
.ph.ph-intersect-three:before {
  content: "\ecc4";
}
.ph.ph-intersection:before {
  content: "\edba";
}
.ph.ph-invoice:before {
  content: "\ee42";
}
.ph.ph-island:before {
  content: "\ee06";
}
.ph.ph-jar:before {
  content: "\e7e0";
}
.ph.ph-jar-label:before {
  content: "\e7e1";
}
.ph.ph-jeep:before {
  content: "\e2d4";
}
.ph.ph-joystick:before {
  content: "\ea5e";
}
.ph.ph-kanban:before {
  content: "\eb54";
}
.ph.ph-key:before {
  content: "\e2d6";
}
.ph.ph-key-return:before {
  content: "\e782";
}
.ph.ph-keyboard:before {
  content: "\e2d8";
}
.ph.ph-keyhole:before {
  content: "\ea78";
}
.ph.ph-knife:before {
  content: "\e636";
}
.ph.ph-ladder:before {
  content: "\e9e4";
}
.ph.ph-ladder-simple:before {
  content: "\ec26";
}
.ph.ph-lamp:before {
  content: "\e638";
}
.ph.ph-lamp-pendant:before {
  content: "\ee2e";
}
.ph.ph-laptop:before {
  content: "\e586";
}
.ph.ph-lasso:before {
  content: "\edc6";
}
.ph.ph-lastfm-logo:before {
  content: "\e842";
}
.ph.ph-layout:before {
  content: "\e6d6";
}
.ph.ph-leaf:before {
  content: "\e2da";
}
.ph.ph-lectern:before {
  content: "\e95a";
}
.ph.ph-lego:before {
  content: "\e8c6";
}
.ph.ph-lego-smiley:before {
  content: "\e8c7";
}
.ph.ph-less-than:before {
  content: "\edac";
}
.ph.ph-less-than-or-equal:before {
  content: "\eda4";
}
.ph.ph-letter-circle-h:before {
  content: "\ebf8";
}
.ph.ph-letter-circle-p:before {
  content: "\ec08";
}
.ph.ph-letter-circle-v:before {
  content: "\ec14";
}
.ph.ph-lifebuoy:before {
  content: "\e63a";
}
.ph.ph-lightbulb:before {
  content: "\e2dc";
}
.ph.ph-lightbulb-filament:before {
  content: "\e63c";
}
.ph.ph-lighthouse:before {
  content: "\e9f6";
}
.ph.ph-lightning:before {
  content: "\e2de";
}
.ph.ph-lightning-a:before {
  content: "\ea84";
}
.ph.ph-lightning-slash:before {
  content: "\e2e0";
}
.ph.ph-line-segment:before {
  content: "\e6d2";
}
.ph.ph-line-segments:before {
  content: "\e6d4";
}
.ph.ph-line-vertical:before {
  content: "\ed70";
}
.ph.ph-link:before {
  content: "\e2e2";
}
.ph.ph-link-break:before {
  content: "\e2e4";
}
.ph.ph-link-simple:before {
  content: "\e2e6";
}
.ph.ph-link-simple-break:before {
  content: "\e2e8";
}
.ph.ph-link-simple-horizontal:before {
  content: "\e2ea";
}
.ph.ph-link-simple-horizontal-break:before {
  content: "\e2ec";
}
.ph.ph-linkedin-logo:before {
  content: "\e2ee";
}
.ph.ph-linktree-logo:before {
  content: "\edee";
}
.ph.ph-linux-logo:before {
  content: "\eb02";
}
.ph.ph-list:before {
  content: "\e2f0";
}
.ph.ph-list-bullets:before {
  content: "\e2f2";
}
.ph.ph-list-checks:before {
  content: "\eadc";
}
.ph.ph-list-dashes:before {
  content: "\e2f4";
}
.ph.ph-list-heart:before {
  content: "\ebde";
}
.ph.ph-list-magnifying-glass:before {
  content: "\ebe0";
}
.ph.ph-list-numbers:before {
  content: "\e2f6";
}
.ph.ph-list-plus:before {
  content: "\e2f8";
}
.ph.ph-list-star:before {
  content: "\ebdc";
}
.ph.ph-lock:before {
  content: "\e2fa";
}
.ph.ph-lock-key:before {
  content: "\e2fe";
}
.ph.ph-lock-key-open:before {
  content: "\e300";
}
.ph.ph-lock-laminated:before {
  content: "\e302";
}
.ph.ph-lock-laminated-open:before {
  content: "\e304";
}
.ph.ph-lock-open:before {
  content: "\e306";
}
.ph.ph-lock-simple:before {
  content: "\e308";
}
.ph.ph-lock-simple-open:before {
  content: "\e30a";
}
.ph.ph-lockers:before {
  content: "\ecb8";
}
.ph.ph-log:before {
  content: "\ed82";
}
.ph.ph-magic-wand:before {
  content: "\e6b6";
}
.ph.ph-magnet:before {
  content: "\e680";
}
.ph.ph-magnet-straight:before {
  content: "\e682";
}
.ph.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph.ph-magnifying-glass-minus:before {
  content: "\e30e";
}
.ph.ph-magnifying-glass-plus:before {
  content: "\e310";
}
.ph.ph-mailbox:before {
  content: "\ec1e";
}
.ph.ph-map-pin:before {
  content: "\e316";
}
.ph.ph-map-pin-area:before {
  content: "\ee3a";
}
.ph.ph-map-pin-line:before {
  content: "\e318";
}
.ph.ph-map-pin-plus:before {
  content: "\e314";
}
.ph.ph-map-pin-simple:before {
  content: "\ee3e";
}
.ph.ph-map-pin-simple-area:before {
  content: "\ee3c";
}
.ph.ph-map-pin-simple-line:before {
  content: "\ee38";
}
.ph.ph-map-trifold:before {
  content: "\e31a";
}
.ph.ph-markdown-logo:before {
  content: "\e508";
}
.ph.ph-marker-circle:before {
  content: "\e640";
}
.ph.ph-martini:before {
  content: "\e31c";
}
.ph.ph-mask-happy:before {
  content: "\e9f4";
}
.ph.ph-mask-sad:before {
  content: "\eb9e";
}
.ph.ph-mastodon-logo:before {
  content: "\ed68";
}
.ph.ph-math-operations:before {
  content: "\e31e";
}
.ph.ph-matrix-logo:before {
  content: "\ed64";
}
.ph.ph-medal:before {
  content: "\e320";
}
.ph.ph-medal-military:before {
  content: "\ecfc";
}
.ph.ph-medium-logo:before {
  content: "\e322";
}
.ph.ph-megaphone:before {
  content: "\e324";
}
.ph.ph-megaphone-simple:before {
  content: "\e642";
}
.ph.ph-member-of:before {
  content: "\edc2";
}
.ph.ph-memory:before {
  content: "\e9c4";
}
.ph.ph-messenger-logo:before {
  content: "\e6d8";
}
.ph.ph-meta-logo:before {
  content: "\ed02";
}
.ph.ph-meteor:before {
  content: "\e9ba";
}
.ph.ph-metronome:before {
  content: "\ec8e";
}
.ph.ph-microphone:before {
  content: "\e326";
}
.ph.ph-microphone-slash:before {
  content: "\e328";
}
.ph.ph-microphone-stage:before {
  content: "\e75c";
}
.ph.ph-microscope:before {
  content: "\ec7a";
}
.ph.ph-microsoft-excel-logo:before {
  content: "\eb6c";
}
.ph.ph-microsoft-outlook-logo:before {
  content: "\eb70";
}
.ph.ph-microsoft-powerpoint-logo:before {
  content: "\eace";
}
.ph.ph-microsoft-teams-logo:before {
  content: "\eb66";
}
.ph.ph-microsoft-word-logo:before {
  content: "\eb6a";
}
.ph.ph-minus:before {
  content: "\e32a";
}
.ph.ph-minus-circle:before {
  content: "\e32c";
}
.ph.ph-minus-square:before {
  content: "\ed4c";
}
.ph.ph-money:before {
  content: "\e588";
}
.ph.ph-money-wavy:before {
  content: "\ee68";
}
.ph.ph-monitor:before {
  content: "\e32e";
}
.ph.ph-monitor-arrow-up:before {
  content: "\e58a";
}
.ph.ph-monitor-play:before {
  content: "\e58c";
}
.ph.ph-moon:before {
  content: "\e330";
}
.ph.ph-moon-stars:before {
  content: "\e58e";
}
.ph.ph-moped:before {
  content: "\e824";
}
.ph.ph-moped-front:before {
  content: "\e822";
}
.ph.ph-mosque:before {
  content: "\ecee";
}
.ph.ph-motorcycle:before {
  content: "\e80a";
}
.ph.ph-mountains:before {
  content: "\e7ae";
}
.ph.ph-mouse:before {
  content: "\e33a";
}
.ph.ph-mouse-left-click:before {
  content: "\e334";
}
.ph.ph-mouse-middle-click:before {
  content: "\e338";
}
.ph.ph-mouse-right-click:before {
  content: "\e336";
}
.ph.ph-mouse-scroll:before {
  content: "\e332";
}
.ph.ph-mouse-simple:before {
  content: "\e644";
}
.ph.ph-music-note:before {
  content: "\e33c";
}
.ph.ph-music-note-simple:before {
  content: "\e33e";
}
.ph.ph-music-notes:before {
  content: "\e340";
}
.ph.ph-music-notes-minus:before {
  content: "\ee0c";
}
.ph.ph-music-notes-plus:before {
  content: "\eb7c";
}
.ph.ph-music-notes-simple:before {
  content: "\e342";
}
.ph.ph-navigation-arrow:before {
  content: "\eade";
}
.ph.ph-needle:before {
  content: "\e82e";
}
.ph.ph-network:before {
  content: "\edde";
}
.ph.ph-network-slash:before {
  content: "\eddc";
}
.ph.ph-network-x:before {
  content: "\edda";
}
.ph.ph-newspaper:before {
  content: "\e344";
}
.ph.ph-newspaper-clipping:before {
  content: "\e346";
}
.ph.ph-not-equals:before {
  content: "\eda6";
}
.ph.ph-not-member-of:before {
  content: "\edae";
}
.ph.ph-not-subset-of:before {
  content: "\edb0";
}
.ph.ph-not-superset-of:before {
  content: "\edb2";
}
.ph.ph-notches:before {
  content: "\ed3a";
}
.ph.ph-note:before {
  content: "\e348";
}
.ph.ph-note-blank:before {
  content: "\e34a";
}
.ph.ph-note-pencil:before {
  content: "\e34c";
}
.ph.ph-notebook:before {
  content: "\e34e";
}
.ph.ph-notepad:before {
  content: "\e63e";
}
.ph.ph-notification:before {
  content: "\e6fa";
}
.ph.ph-notion-logo:before {
  content: "\e9a0";
}
.ph.ph-nuclear-plant:before {
  content: "\ed7c";
}
.ph.ph-number-circle-eight:before {
  content: "\e352";
}
.ph.ph-number-circle-five:before {
  content: "\e358";
}
.ph.ph-number-circle-four:before {
  content: "\e35e";
}
.ph.ph-number-circle-nine:before {
  content: "\e364";
}
.ph.ph-number-circle-one:before {
  content: "\e36a";
}
.ph.ph-number-circle-seven:before {
  content: "\e370";
}
.ph.ph-number-circle-six:before {
  content: "\e376";
}
.ph.ph-number-circle-three:before {
  content: "\e37c";
}
.ph.ph-number-circle-two:before {
  content: "\e382";
}
.ph.ph-number-circle-zero:before {
  content: "\e388";
}
.ph.ph-number-eight:before {
  content: "\e350";
}
.ph.ph-number-five:before {
  content: "\e356";
}
.ph.ph-number-four:before {
  content: "\e35c";
}
.ph.ph-number-nine:before {
  content: "\e362";
}
.ph.ph-number-one:before {
  content: "\e368";
}
.ph.ph-number-seven:before {
  content: "\e36e";
}
.ph.ph-number-six:before {
  content: "\e374";
}
.ph.ph-number-square-eight:before {
  content: "\e354";
}
.ph.ph-number-square-five:before {
  content: "\e35a";
}
.ph.ph-number-square-four:before {
  content: "\e360";
}
.ph.ph-number-square-nine:before {
  content: "\e366";
}
.ph.ph-number-square-one:before {
  content: "\e36c";
}
.ph.ph-number-square-seven:before {
  content: "\e372";
}
.ph.ph-number-square-six:before {
  content: "\e378";
}
.ph.ph-number-square-three:before {
  content: "\e37e";
}
.ph.ph-number-square-two:before {
  content: "\e384";
}
.ph.ph-number-square-zero:before {
  content: "\e38a";
}
.ph.ph-number-three:before {
  content: "\e37a";
}
.ph.ph-number-two:before {
  content: "\e380";
}
.ph.ph-number-zero:before {
  content: "\e386";
}
.ph.ph-numpad:before {
  content: "\e3c8";
}
.ph.ph-nut:before {
  content: "\e38c";
}
.ph.ph-ny-times-logo:before {
  content: "\e646";
}
.ph.ph-octagon:before {
  content: "\e38e";
}
.ph.ph-office-chair:before {
  content: "\ea46";
}
.ph.ph-onigiri:before {
  content: "\ee2c";
}
.ph.ph-open-ai-logo:before {
  content: "\e7d2";
}
.ph.ph-option:before {
  content: "\e8a8";
}
.ph.ph-orange:before {
  content: "\ee40";
}
.ph.ph-orange-slice:before {
  content: "\ed36";
}
.ph.ph-oven:before {
  content: "\ed8c";
}
.ph.ph-package:before {
  content: "\e390";
}
.ph.ph-paint-brush:before {
  content: "\e6f0";
}
.ph.ph-paint-brush-broad:before {
  content: "\e590";
}
.ph.ph-paint-brush-household:before {
  content: "\e6f2";
}
.ph.ph-paint-bucket:before {
  content: "\e392";
}
.ph.ph-paint-roller:before {
  content: "\e6f4";
}
.ph.ph-palette:before {
  content: "\e6c8";
}
.ph.ph-panorama:before {
  content: "\eaa2";
}
.ph.ph-pants:before {
  content: "\ec88";
}
.ph.ph-paper-plane:before {
  content: "\e394";
}
.ph.ph-paper-plane-right:before {
  content: "\e396";
}
.ph.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph.ph-paperclip:before {
  content: "\e39a";
}
.ph.ph-paperclip-horizontal:before {
  content: "\e592";
}
.ph.ph-parachute:before {
  content: "\ea7c";
}
.ph.ph-paragraph:before {
  content: "\e960";
}
.ph.ph-parallelogram:before {
  content: "\ecc6";
}
.ph.ph-park:before {
  content: "\ecb2";
}
.ph.ph-password:before {
  content: "\e752";
}
.ph.ph-path:before {
  content: "\e39c";
}
.ph.ph-patreon-logo:before {
  content: "\e98a";
}
.ph.ph-pause:before {
  content: "\e39e";
}
.ph.ph-pause-circle:before {
  content: "\e3a0";
}
.ph.ph-paw-print:before {
  content: "\e648";
}
.ph.ph-paypal-logo:before {
  content: "\e98c";
}
.ph.ph-peace:before {
  content: "\e3a2";
}
.ph.ph-pen:before {
  content: "\e3aa";
}
.ph.ph-pen-nib:before {
  content: "\e3ac";
}
.ph.ph-pen-nib-straight:before {
  content: "\e64a";
}
.ph.ph-pencil:before {
  content: "\e3ae";
}
.ph.ph-pencil-circle:before {
  content: "\e3b0";
}
.ph.ph-pencil-line:before {
  content: "\e3b2";
}
.ph.ph-pencil-ruler:before {
  content: "\e906";
}
.ph.ph-pencil-simple:before {
  content: "\e3b4";
}
.ph.ph-pencil-simple-line:before {
  content: "\ebc6";
}
.ph.ph-pencil-simple-slash:before {
  content: "\ecf6";
}
.ph.ph-pencil-slash:before {
  content: "\ecf8";
}
.ph.ph-pentagon:before {
  content: "\ec7e";
}
.ph.ph-pentagram:before {
  content: "\ec5c";
}
.ph.ph-pepper:before {
  content: "\e94a";
}
.ph.ph-percent:before {
  content: "\e3b6";
}
.ph.ph-person:before {
  content: "\e3a8";
}
.ph.ph-person-arms-spread:before {
  content: "\ecfe";
}
.ph.ph-person-simple:before {
  content: "\e72e";
}
.ph.ph-person-simple-bike:before {
  content: "\e734";
}
.ph.ph-person-simple-circle:before {
  content: "\ee58";
}
.ph.ph-person-simple-hike:before {
  content: "\ed54";
}
.ph.ph-person-simple-run:before {
  content: "\e730";
}
.ph.ph-person-simple-ski:before {
  content: "\e71c";
}
.ph.ph-person-simple-snowboard:before {
  content: "\e71e";
}
.ph.ph-person-simple-swim:before {
  content: "\e736";
}
.ph.ph-person-simple-tai-chi:before {
  content: "\ed5c";
}
.ph.ph-person-simple-throw:before {
  content: "\e732";
}
.ph.ph-person-simple-walk:before {
  content: "\e73a";
}
.ph.ph-perspective:before {
  content: "\ebe6";
}
.ph.ph-phone:before {
  content: "\e3b8";
}
.ph.ph-phone-call:before {
  content: "\e3ba";
}
.ph.ph-phone-disconnect:before {
  content: "\e3bc";
}
.ph.ph-phone-incoming:before {
  content: "\e3be";
}
.ph.ph-phone-list:before {
  content: "\e3cc";
}
.ph.ph-phone-outgoing:before {
  content: "\e3c0";
}
.ph.ph-phone-pause:before {
  content: "\e3ca";
}
.ph.ph-phone-plus:before {
  content: "\ec56";
}
.ph.ph-phone-slash:before {
  content: "\e3c2";
}
.ph.ph-phone-transfer:before {
  content: "\e3c6";
}
.ph.ph-phone-x:before {
  content: "\e3c4";
}
.ph.ph-phosphor-logo:before {
  content: "\e3ce";
}
.ph.ph-pi:before {
  content: "\ec80";
}
.ph.ph-piano-keys:before {
  content: "\e9c8";
}
.ph.ph-picnic-table:before {
  content: "\ee26";
}
.ph.ph-picture-in-picture:before {
  content: "\e64c";
}
.ph.ph-piggy-bank:before {
  content: "\ea04";
}
.ph.ph-pill:before {
  content: "\e700";
}
.ph.ph-ping-pong:before {
  content: "\ea42";
}
.ph.ph-pint-glass:before {
  content: "\edd0";
}
.ph.ph-pinterest-logo:before {
  content: "\e64e";
}
.ph.ph-pinwheel:before {
  content: "\eb9c";
}
.ph.ph-pipe:before {
  content: "\ed86";
}
.ph.ph-pipe-wrench:before {
  content: "\ed88";
}
.ph.ph-pix-logo:before {
  content: "\ecc2";
}
.ph.ph-pizza:before {
  content: "\e796";
}
.ph.ph-placeholder:before {
  content: "\e650";
}
.ph.ph-planet:before {
  content: "\e652";
}
.ph.ph-plant:before {
  content: "\ebae";
}
.ph.ph-play:before {
  content: "\e3d0";
}
.ph.ph-play-circle:before {
  content: "\e3d2";
}
.ph.ph-play-pause:before {
  content: "\e8be";
}
.ph.ph-playlist:before {
  content: "\e6aa";
}
.ph.ph-plug:before {
  content: "\e946";
}
.ph.ph-plug-charging:before {
  content: "\eb5c";
}
.ph.ph-plugs:before {
  content: "\eb56";
}
.ph.ph-plugs-connected:before {
  content: "\eb5a";
}
.ph.ph-plus:before {
  content: "\e3d4";
}
.ph.ph-plus-circle:before {
  content: "\e3d6";
}
.ph.ph-plus-minus:before {
  content: "\e3d8";
}
.ph.ph-plus-square:before {
  content: "\ed4a";
}
.ph.ph-poker-chip:before {
  content: "\e594";
}
.ph.ph-police-car:before {
  content: "\ec4a";
}
.ph.ph-polygon:before {
  content: "\e6d0";
}
.ph.ph-popcorn:before {
  content: "\eb4e";
}
.ph.ph-popsicle:before {
  content: "\ebbe";
}
.ph.ph-potted-plant:before {
  content: "\ec22";
}
.ph.ph-power:before {
  content: "\e3da";
}
.ph.ph-prescription:before {
  content: "\e7a2";
}
.ph.ph-presentation:before {
  content: "\e654";
}
.ph.ph-presentation-chart:before {
  content: "\e656";
}
.ph.ph-printer:before {
  content: "\e3dc";
}
.ph.ph-prohibit:before {
  content: "\e3de";
}
.ph.ph-prohibit-inset:before {
  content: "\e3e0";
}
.ph.ph-projector-screen:before {
  content: "\e658";
}
.ph.ph-projector-screen-chart:before {
  content: "\e65a";
}
.ph.ph-pulse:before {
  content: "\e000";
}
.ph.ph-activity:before {
  content: "\e000";
}
.ph.ph-push-pin:before {
  content: "\e3e2";
}
.ph.ph-push-pin-simple:before {
  content: "\e65c";
}
.ph.ph-push-pin-simple-slash:before {
  content: "\e65e";
}
.ph.ph-push-pin-slash:before {
  content: "\e3e4";
}
.ph.ph-puzzle-piece:before {
  content: "\e596";
}
.ph.ph-qr-code:before {
  content: "\e3e6";
}
.ph.ph-question:before {
  content: "\e3e8";
}
.ph.ph-question-mark:before {
  content: "\e3e9";
}
.ph.ph-queue:before {
  content: "\e6ac";
}
.ph.ph-quotes:before {
  content: "\e660";
}
.ph.ph-rabbit:before {
  content: "\eac2";
}
.ph.ph-racquet:before {
  content: "\ee02";
}
.ph.ph-radical:before {
  content: "\e3ea";
}
.ph.ph-radio:before {
  content: "\e77e";
}
.ph.ph-radio-button:before {
  content: "\eb08";
}
.ph.ph-radioactive:before {
  content: "\e9dc";
}
.ph.ph-rainbow:before {
  content: "\e598";
}
.ph.ph-rainbow-cloud:before {
  content: "\e59a";
}
.ph.ph-ranking:before {
  content: "\ed62";
}
.ph.ph-read-cv-logo:before {
  content: "\ed0c";
}
.ph.ph-receipt:before {
  content: "\e3ec";
}
.ph.ph-receipt-x:before {
  content: "\ed40";
}
.ph.ph-record:before {
  content: "\e3ee";
}
.ph.ph-rectangle:before {
  content: "\e3f0";
}
.ph.ph-rectangle-dashed:before {
  content: "\e3f2";
}
.ph.ph-recycle:before {
  content: "\e75a";
}
.ph.ph-reddit-logo:before {
  content: "\e59c";
}
.ph.ph-repeat:before {
  content: "\e3f6";
}
.ph.ph-repeat-once:before {
  content: "\e3f8";
}
.ph.ph-replit-logo:before {
  content: "\eb8a";
}
.ph.ph-resize:before {
  content: "\ed6e";
}
.ph.ph-rewind:before {
  content: "\e6a8";
}
.ph.ph-rewind-circle:before {
  content: "\e3fa";
}
.ph.ph-road-horizon:before {
  content: "\e838";
}
.ph.ph-robot:before {
  content: "\e762";
}
.ph.ph-rocket:before {
  content: "\e3fc";
}
.ph.ph-rocket-launch:before {
  content: "\e3fe";
}
.ph.ph-rows:before {
  content: "\e5a2";
}
.ph.ph-rows-plus-bottom:before {
  content: "\e59e";
}
.ph.ph-rows-plus-top:before {
  content: "\e5a0";
}
.ph.ph-rss:before {
  content: "\e400";
}
.ph.ph-rss-simple:before {
  content: "\e402";
}
.ph.ph-rug:before {
  content: "\ea1a";
}
.ph.ph-ruler:before {
  content: "\e6b8";
}
.ph.ph-sailboat:before {
  content: "\e78a";
}
.ph.ph-scales:before {
  content: "\e750";
}
.ph.ph-scan:before {
  content: "\ebb6";
}
.ph.ph-scan-smiley:before {
  content: "\ebb4";
}
.ph.ph-scissors:before {
  content: "\eae0";
}
.ph.ph-scooter:before {
  content: "\e820";
}
.ph.ph-screencast:before {
  content: "\e404";
}
.ph.ph-screwdriver:before {
  content: "\e86e";
}
.ph.ph-scribble:before {
  content: "\e806";
}
.ph.ph-scribble-loop:before {
  content: "\e662";
}
.ph.ph-scroll:before {
  content: "\eb7a";
}
.ph.ph-seal:before {
  content: "\e604";
}
.ph.ph-circle-wavy:before {
  content: "\e604";
}
.ph.ph-seal-check:before {
  content: "\e606";
}
.ph.ph-circle-wavy-check:before {
  content: "\e606";
}
.ph.ph-seal-percent:before {
  content: "\e60a";
}
.ph.ph-seal-question:before {
  content: "\e608";
}
.ph.ph-circle-wavy-question:before {
  content: "\e608";
}
.ph.ph-seal-warning:before {
  content: "\e60c";
}
.ph.ph-circle-wavy-warning:before {
  content: "\e60c";
}
.ph.ph-seat:before {
  content: "\eb8e";
}
.ph.ph-seatbelt:before {
  content: "\edfe";
}
.ph.ph-security-camera:before {
  content: "\eca4";
}
.ph.ph-selection:before {
  content: "\e69a";
}
.ph.ph-selection-all:before {
  content: "\e746";
}
.ph.ph-selection-background:before {
  content: "\eaf8";
}
.ph.ph-selection-foreground:before {
  content: "\eaf6";
}
.ph.ph-selection-inverse:before {
  content: "\e744";
}
.ph.ph-selection-plus:before {
  content: "\e69c";
}
.ph.ph-selection-slash:before {
  content: "\e69e";
}
.ph.ph-shapes:before {
  content: "\ec5e";
}
.ph.ph-share:before {
  content: "\e406";
}
.ph.ph-share-fat:before {
  content: "\ed52";
}
.ph.ph-share-network:before {
  content: "\e408";
}
.ph.ph-shield:before {
  content: "\e40a";
}
.ph.ph-shield-check:before {
  content: "\e40c";
}
.ph.ph-shield-checkered:before {
  content: "\e708";
}
.ph.ph-shield-chevron:before {
  content: "\e40e";
}
.ph.ph-shield-plus:before {
  content: "\e706";
}
.ph.ph-shield-slash:before {
  content: "\e410";
}
.ph.ph-shield-star:before {
  content: "\ec34";
}
.ph.ph-shield-warning:before {
  content: "\e412";
}
.ph.ph-shipping-container:before {
  content: "\e78c";
}
.ph.ph-shirt-folded:before {
  content: "\ea92";
}
.ph.ph-shooting-star:before {
  content: "\ecfa";
}
.ph.ph-shopping-bag:before {
  content: "\e416";
}
.ph.ph-shopping-bag-open:before {
  content: "\e418";
}
.ph.ph-shopping-cart:before {
  content: "\e41e";
}
.ph.ph-shopping-cart-simple:before {
  content: "\e420";
}
.ph.ph-shovel:before {
  content: "\e9e6";
}
.ph.ph-shower:before {
  content: "\e776";
}
.ph.ph-shrimp:before {
  content: "\eab4";
}
.ph.ph-shuffle:before {
  content: "\e422";
}
.ph.ph-shuffle-angular:before {
  content: "\e424";
}
.ph.ph-shuffle-simple:before {
  content: "\e426";
}
.ph.ph-sidebar:before {
  content: "\eab6";
}
.ph.ph-sidebar-simple:before {
  content: "\ec24";
}
.ph.ph-sigma:before {
  content: "\eab8";
}
.ph.ph-sign-in:before {
  content: "\e428";
}
.ph.ph-sign-out:before {
  content: "\e42a";
}
.ph.ph-signature:before {
  content: "\ebac";
}
.ph.ph-signpost:before {
  content: "\e89c";
}
.ph.ph-sim-card:before {
  content: "\e664";
}
.ph.ph-siren:before {
  content: "\e9b8";
}
.ph.ph-sketch-logo:before {
  content: "\e42c";
}
.ph.ph-skip-back:before {
  content: "\e5a4";
}
.ph.ph-skip-back-circle:before {
  content: "\e42e";
}
.ph.ph-skip-forward:before {
  content: "\e5a6";
}
.ph.ph-skip-forward-circle:before {
  content: "\e430";
}
.ph.ph-skull:before {
  content: "\e916";
}
.ph.ph-skype-logo:before {
  content: "\e8dc";
}
.ph.ph-slack-logo:before {
  content: "\e5a8";
}
.ph.ph-sliders:before {
  content: "\e432";
}
.ph.ph-sliders-horizontal:before {
  content: "\e434";
}
.ph.ph-slideshow:before {
  content: "\ed32";
}
.ph.ph-smiley:before {
  content: "\e436";
}
.ph.ph-smiley-angry:before {
  content: "\ec62";
}
.ph.ph-smiley-blank:before {
  content: "\e438";
}
.ph.ph-smiley-meh:before {
  content: "\e43a";
}
.ph.ph-smiley-melting:before {
  content: "\ee56";
}
.ph.ph-smiley-nervous:before {
  content: "\e43c";
}
.ph.ph-smiley-sad:before {
  content: "\e43e";
}
.ph.ph-smiley-sticker:before {
  content: "\e440";
}
.ph.ph-smiley-wink:before {
  content: "\e666";
}
.ph.ph-smiley-x-eyes:before {
  content: "\e442";
}
.ph.ph-snapchat-logo:before {
  content: "\e668";
}
.ph.ph-sneaker:before {
  content: "\e80c";
}
.ph.ph-sneaker-move:before {
  content: "\ed60";
}
.ph.ph-snowflake:before {
  content: "\e5aa";
}
.ph.ph-soccer-ball:before {
  content: "\e716";
}
.ph.ph-sock:before {
  content: "\ecce";
}
.ph.ph-solar-panel:before {
  content: "\ed7a";
}
.ph.ph-solar-roof:before {
  content: "\ed7b";
}
.ph.ph-sort-ascending:before {
  content: "\e444";
}
.ph.ph-sort-descending:before {
  content: "\e446";
}
.ph.ph-soundcloud-logo:before {
  content: "\e8de";
}
.ph.ph-spade:before {
  content: "\e448";
}
.ph.ph-sparkle:before {
  content: "\e6a2";
}
.ph.ph-speaker-hifi:before {
  content: "\ea08";
}
.ph.ph-speaker-high:before {
  content: "\e44a";
}
.ph.ph-speaker-low:before {
  content: "\e44c";
}
.ph.ph-speaker-none:before {
  content: "\e44e";
}
.ph.ph-speaker-simple-high:before {
  content: "\e450";
}
.ph.ph-speaker-simple-low:before {
  content: "\e452";
}
.ph.ph-speaker-simple-none:before {
  content: "\e454";
}
.ph.ph-speaker-simple-slash:before {
  content: "\e456";
}
.ph.ph-speaker-simple-x:before {
  content: "\e458";
}
.ph.ph-speaker-slash:before {
  content: "\e45a";
}
.ph.ph-speaker-x:before {
  content: "\e45c";
}
.ph.ph-speedometer:before {
  content: "\ee74";
}
.ph.ph-sphere:before {
  content: "\ee66";
}
.ph.ph-spinner:before {
  content: "\e66a";
}
.ph.ph-spinner-ball:before {
  content: "\ee28";
}
.ph.ph-spinner-gap:before {
  content: "\e66c";
}
.ph.ph-spiral:before {
  content: "\e9fa";
}
.ph.ph-split-horizontal:before {
  content: "\e872";
}
.ph.ph-split-vertical:before {
  content: "\e876";
}
.ph.ph-spotify-logo:before {
  content: "\e66e";
}
.ph.ph-spray-bottle:before {
  content: "\e7e4";
}
.ph.ph-square:before {
  content: "\e45e";
}
.ph.ph-square-half:before {
  content: "\e462";
}
.ph.ph-square-half-bottom:before {
  content: "\eb16";
}
.ph.ph-square-logo:before {
  content: "\e690";
}
.ph.ph-square-split-horizontal:before {
  content: "\e870";
}
.ph.ph-square-split-vertical:before {
  content: "\e874";
}
.ph.ph-squares-four:before {
  content: "\e464";
}
.ph.ph-stack:before {
  content: "\e466";
}
.ph.ph-stack-minus:before {
  content: "\edf4";
}
.ph.ph-stack-overflow-logo:before {
  content: "\eb78";
}
.ph.ph-stack-plus:before {
  content: "\edf6";
}
.ph.ph-stack-simple:before {
  content: "\e468";
}
.ph.ph-stairs:before {
  content: "\e8ec";
}
.ph.ph-stamp:before {
  content: "\ea48";
}
.ph.ph-standard-definition:before {
  content: "\ea90";
}
.ph.ph-star:before {
  content: "\e46a";
}
.ph.ph-star-and-crescent:before {
  content: "\ecf4";
}
.ph.ph-star-four:before {
  content: "\e6a4";
}
.ph.ph-star-half:before {
  content: "\e70a";
}
.ph.ph-star-of-david:before {
  content: "\e89e";
}
.ph.ph-steam-logo:before {
  content: "\ead4";
}
.ph.ph-steering-wheel:before {
  content: "\e9ac";
}
.ph.ph-steps:before {
  content: "\ecbe";
}
.ph.ph-stethoscope:before {
  content: "\e7ea";
}
.ph.ph-sticker:before {
  content: "\e5ac";
}
.ph.ph-stool:before {
  content: "\ea44";
}
.ph.ph-stop:before {
  content: "\e46c";
}
.ph.ph-stop-circle:before {
  content: "\e46e";
}
.ph.ph-storefront:before {
  content: "\e470";
}
.ph.ph-strategy:before {
  content: "\ea3a";
}
.ph.ph-stripe-logo:before {
  content: "\e698";
}
.ph.ph-student:before {
  content: "\e73e";
}
.ph.ph-subset-of:before {
  content: "\edc0";
}
.ph.ph-subset-proper-of:before {
  content: "\edb6";
}
.ph.ph-subtitles:before {
  content: "\e1a8";
}
.ph.ph-subtitles-slash:before {
  content: "\e1a6";
}
.ph.ph-subtract:before {
  content: "\ebd6";
}
.ph.ph-subtract-square:before {
  content: "\ebd4";
}
.ph.ph-subway:before {
  content: "\e498";
}
.ph.ph-suitcase:before {
  content: "\e5ae";
}
.ph.ph-suitcase-rolling:before {
  content: "\e9b0";
}
.ph.ph-suitcase-simple:before {
  content: "\e5b0";
}
.ph.ph-sun:before {
  content: "\e472";
}
.ph.ph-sun-dim:before {
  content: "\e474";
}
.ph.ph-sun-horizon:before {
  content: "\e5b6";
}
.ph.ph-sunglasses:before {
  content: "\e816";
}
.ph.ph-superset-of:before {
  content: "\edb8";
}
.ph.ph-superset-proper-of:before {
  content: "\edb4";
}
.ph.ph-swap:before {
  content: "\e83c";
}
.ph.ph-swatches:before {
  content: "\e5b8";
}
.ph.ph-swimming-pool:before {
  content: "\ecb6";
}
.ph.ph-sword:before {
  content: "\e5ba";
}
.ph.ph-synagogue:before {
  content: "\ecec";
}
.ph.ph-syringe:before {
  content: "\e968";
}
.ph.ph-t-shirt:before {
  content: "\e670";
}
.ph.ph-table:before {
  content: "\e476";
}
.ph.ph-tabs:before {
  content: "\e778";
}
.ph.ph-tag:before {
  content: "\e478";
}
.ph.ph-tag-chevron:before {
  content: "\e672";
}
.ph.ph-tag-simple:before {
  content: "\e47a";
}
.ph.ph-target:before {
  content: "\e47c";
}
.ph.ph-taxi:before {
  content: "\e902";
}
.ph.ph-tea-bag:before {
  content: "\e8e6";
}
.ph.ph-telegram-logo:before {
  content: "\e5bc";
}
.ph.ph-television:before {
  content: "\e754";
}
.ph.ph-television-simple:before {
  content: "\eae6";
}
.ph.ph-tennis-ball:before {
  content: "\e720";
}
.ph.ph-tent:before {
  content: "\e8ba";
}
.ph.ph-terminal:before {
  content: "\e47e";
}
.ph.ph-terminal-window:before {
  content: "\eae8";
}
.ph.ph-test-tube:before {
  content: "\e7a0";
}
.ph.ph-text-a-underline:before {
  content: "\ed34";
}
.ph.ph-text-aa:before {
  content: "\e6ee";
}
.ph.ph-text-align-center:before {
  content: "\e480";
}
.ph.ph-text-align-justify:before {
  content: "\e482";
}
.ph.ph-text-align-left:before {
  content: "\e484";
}
.ph.ph-text-align-right:before {
  content: "\e486";
}
.ph.ph-text-b:before {
  content: "\e5be";
}
.ph.ph-text-bolder:before {
  content: "\e5be";
}
.ph.ph-text-columns:before {
  content: "\ec96";
}
.ph.ph-text-h:before {
  content: "\e6ba";
}
.ph.ph-text-h-five:before {
  content: "\e6c4";
}
.ph.ph-text-h-four:before {
  content: "\e6c2";
}
.ph.ph-text-h-one:before {
  content: "\e6bc";
}
.ph.ph-text-h-six:before {
  content: "\e6c6";
}
.ph.ph-text-h-three:before {
  content: "\e6c0";
}
.ph.ph-text-h-two:before {
  content: "\e6be";
}
.ph.ph-text-indent:before {
  content: "\ea1e";
}
.ph.ph-text-italic:before {
  content: "\e5c0";
}
.ph.ph-text-outdent:before {
  content: "\ea1c";
}
.ph.ph-text-strikethrough:before {
  content: "\e5c2";
}
.ph.ph-text-subscript:before {
  content: "\ec98";
}
.ph.ph-text-superscript:before {
  content: "\ec9a";
}
.ph.ph-text-t:before {
  content: "\e48a";
}
.ph.ph-text-t-slash:before {
  content: "\e488";
}
.ph.ph-text-underline:before {
  content: "\e5c4";
}
.ph.ph-textbox:before {
  content: "\eb0a";
}
.ph.ph-thermometer:before {
  content: "\e5c6";
}
.ph.ph-thermometer-cold:before {
  content: "\e5c8";
}
.ph.ph-thermometer-hot:before {
  content: "\e5ca";
}
.ph.ph-thermometer-simple:before {
  content: "\e5cc";
}
.ph.ph-threads-logo:before {
  content: "\ed9e";
}
.ph.ph-three-d:before {
  content: "\ea5a";
}
.ph.ph-thumbs-down:before {
  content: "\e48c";
}
.ph.ph-thumbs-up:before {
  content: "\e48e";
}
.ph.ph-ticket:before {
  content: "\e490";
}
.ph.ph-tidal-logo:before {
  content: "\ed1c";
}
.ph.ph-tiktok-logo:before {
  content: "\eaf2";
}
.ph.ph-tilde:before {
  content: "\eda8";
}
.ph.ph-timer:before {
  content: "\e492";
}
.ph.ph-tip-jar:before {
  content: "\e7e2";
}
.ph.ph-tipi:before {
  content: "\ed30";
}
.ph.ph-tire:before {
  content: "\edd2";
}
.ph.ph-toggle-left:before {
  content: "\e674";
}
.ph.ph-toggle-right:before {
  content: "\e676";
}
.ph.ph-toilet:before {
  content: "\e79a";
}
.ph.ph-toilet-paper:before {
  content: "\e79c";
}
.ph.ph-toolbox:before {
  content: "\eca0";
}
.ph.ph-tooth:before {
  content: "\e9cc";
}
.ph.ph-tornado:before {
  content: "\e88c";
}
.ph.ph-tote:before {
  content: "\e494";
}
.ph.ph-tote-simple:before {
  content: "\e678";
}
.ph.ph-towel:before {
  content: "\ede6";
}
.ph.ph-tractor:before {
  content: "\ec6e";
}
.ph.ph-trademark:before {
  content: "\e9f0";
}
.ph.ph-trademark-registered:before {
  content: "\e3f4";
}
.ph.ph-traffic-cone:before {
  content: "\e9a8";
}
.ph.ph-traffic-sign:before {
  content: "\e67a";
}
.ph.ph-traffic-signal:before {
  content: "\e9aa";
}
.ph.ph-train:before {
  content: "\e496";
}
.ph.ph-train-regional:before {
  content: "\e49e";
}
.ph.ph-train-simple:before {
  content: "\e4a0";
}
.ph.ph-tram:before {
  content: "\e9ec";
}
.ph.ph-translate:before {
  content: "\e4a2";
}
.ph.ph-trash:before {
  content: "\e4a6";
}
.ph.ph-trash-simple:before {
  content: "\e4a8";
}
.ph.ph-tray:before {
  content: "\e4aa";
}
.ph.ph-tray-arrow-down:before {
  content: "\e010";
}
.ph.ph-archive-tray:before {
  content: "\e010";
}
.ph.ph-tray-arrow-up:before {
  content: "\ee52";
}
.ph.ph-treasure-chest:before {
  content: "\ede2";
}
.ph.ph-tree:before {
  content: "\e6da";
}
.ph.ph-tree-evergreen:before {
  content: "\e6dc";
}
.ph.ph-tree-palm:before {
  content: "\e91a";
}
.ph.ph-tree-structure:before {
  content: "\e67c";
}
.ph.ph-tree-view:before {
  content: "\ee48";
}
.ph.ph-trend-down:before {
  content: "\e4ac";
}
.ph.ph-trend-up:before {
  content: "\e4ae";
}
.ph.ph-triangle:before {
  content: "\e4b0";
}
.ph.ph-triangle-dashed:before {
  content: "\e4b2";
}
.ph.ph-trolley:before {
  content: "\e5b2";
}
.ph.ph-trolley-suitcase:before {
  content: "\e5b4";
}
.ph.ph-trophy:before {
  content: "\e67e";
}
.ph.ph-truck:before {
  content: "\e4b4";
}
.ph.ph-truck-trailer:before {
  content: "\e4b6";
}
.ph.ph-tumblr-logo:before {
  content: "\e8d4";
}
.ph.ph-twitch-logo:before {
  content: "\e5ce";
}
.ph.ph-twitter-logo:before {
  content: "\e4ba";
}
.ph.ph-umbrella:before {
  content: "\e684";
}
.ph.ph-umbrella-simple:before {
  content: "\e686";
}
.ph.ph-union:before {
  content: "\edbe";
}
.ph.ph-unite:before {
  content: "\e87e";
}
.ph.ph-unite-square:before {
  content: "\e878";
}
.ph.ph-upload:before {
  content: "\e4be";
}
.ph.ph-upload-simple:before {
  content: "\e4c0";
}
.ph.ph-usb:before {
  content: "\e956";
}
.ph.ph-user:before {
  content: "\e4c2";
}
.ph.ph-user-check:before {
  content: "\eafa";
}
.ph.ph-user-circle:before {
  content: "\e4c4";
}
.ph.ph-user-circle-check:before {
  content: "\ec38";
}
.ph.ph-user-circle-dashed:before {
  content: "\ec36";
}
.ph.ph-user-circle-gear:before {
  content: "\e4c6";
}
.ph.ph-user-circle-minus:before {
  content: "\e4c8";
}
.ph.ph-user-circle-plus:before {
  content: "\e4ca";
}
.ph.ph-user-focus:before {
  content: "\e6fc";
}
.ph.ph-user-gear:before {
  content: "\e4cc";
}
.ph.ph-user-list:before {
  content: "\e73c";
}
.ph.ph-user-minus:before {
  content: "\e4ce";
}
.ph.ph-user-plus:before {
  content: "\e4d0";
}
.ph.ph-user-rectangle:before {
  content: "\e4d2";
}
.ph.ph-user-sound:before {
  content: "\eca8";
}
.ph.ph-user-square:before {
  content: "\e4d4";
}
.ph.ph-user-switch:before {
  content: "\e756";
}
.ph.ph-users:before {
  content: "\e4d6";
}
.ph.ph-users-four:before {
  content: "\e68c";
}
.ph.ph-users-three:before {
  content: "\e68e";
}
.ph.ph-van:before {
  content: "\e826";
}
.ph.ph-vault:before {
  content: "\e76e";
}
.ph.ph-vector-three:before {
  content: "\ee62";
}
.ph.ph-vector-two:before {
  content: "\ee64";
}
.ph.ph-vibrate:before {
  content: "\e4d8";
}
.ph.ph-video:before {
  content: "\e740";
}
.ph.ph-video-camera:before {
  content: "\e4da";
}
.ph.ph-video-camera-slash:before {
  content: "\e4dc";
}
.ph.ph-video-conference:before {
  content: "\edce";
}
.ph.ph-vignette:before {
  content: "\eba2";
}
.ph.ph-vinyl-record:before {
  content: "\ecac";
}
.ph.ph-virtual-reality:before {
  content: "\e7b8";
}
.ph.ph-virus:before {
  content: "\e7d6";
}
.ph.ph-visor:before {
  content: "\ee2a";
}
.ph.ph-voicemail:before {
  content: "\e4de";
}
.ph.ph-volleyball:before {
  content: "\e726";
}
.ph.ph-wall:before {
  content: "\e688";
}
.ph.ph-wallet:before {
  content: "\e68a";
}
.ph.ph-warehouse:before {
  content: "\ecd4";
}
.ph.ph-warning:before {
  content: "\e4e0";
}
.ph.ph-warning-circle:before {
  content: "\e4e2";
}
.ph.ph-warning-diamond:before {
  content: "\e7fc";
}
.ph.ph-warning-octagon:before {
  content: "\e4e4";
}
.ph.ph-washing-machine:before {
  content: "\ede8";
}
.ph.ph-watch:before {
  content: "\e4e6";
}
.ph.ph-wave-sawtooth:before {
  content: "\ea9c";
}
.ph.ph-wave-sine:before {
  content: "\ea9a";
}
.ph.ph-wave-square:before {
  content: "\ea9e";
}
.ph.ph-wave-triangle:before {
  content: "\eaa0";
}
.ph.ph-waveform:before {
  content: "\e802";
}
.ph.ph-waveform-slash:before {
  content: "\e800";
}
.ph.ph-waves:before {
  content: "\e6de";
}
.ph.ph-webcam:before {
  content: "\e9b2";
}
.ph.ph-webcam-slash:before {
  content: "\ecdc";
}
.ph.ph-webhooks-logo:before {
  content: "\ecae";
}
.ph.ph-wechat-logo:before {
  content: "\e8d2";
}
.ph.ph-whatsapp-logo:before {
  content: "\e5d0";
}
.ph.ph-wheelchair:before {
  content: "\e4e8";
}
.ph.ph-wheelchair-motion:before {
  content: "\e89a";
}
.ph.ph-wifi-high:before {
  content: "\e4ea";
}
.ph.ph-wifi-low:before {
  content: "\e4ec";
}
.ph.ph-wifi-medium:before {
  content: "\e4ee";
}
.ph.ph-wifi-none:before {
  content: "\e4f0";
}
.ph.ph-wifi-slash:before {
  content: "\e4f2";
}
.ph.ph-wifi-x:before {
  content: "\e4f4";
}
.ph.ph-wind:before {
  content: "\e5d2";
}
.ph.ph-windmill:before {
  content: "\e9f8";
}
.ph.ph-windows-logo:before {
  content: "\e692";
}
.ph.ph-wine:before {
  content: "\e6b2";
}
.ph.ph-wrench:before {
  content: "\e5d4";
}
.ph.ph-x:before {
  content: "\e4f6";
}
.ph.ph-x-circle:before {
  content: "\e4f8";
}
.ph.ph-x-logo:before {
  content: "\e4bc";
}
.ph.ph-x-square:before {
  content: "\e4fa";
}
.ph.ph-yarn:before {
  content: "\ed9a";
}
.ph.ph-yin-yang:before {
  content: "\e92a";
}
.ph.ph-youtube-logo:before {
  content: "\e4fc";
}

/* /assets/icons/fill/style.css */
@font-face {
  font-family: "Phosphor-Fill";
  src: url("/assets/icons/fill/Phosphor-Fill.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-fill {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Fill" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-fill.ph-acorn:before {
  content: "\eb9a";
}
.ph-fill.ph-address-book:before {
  content: "\e6f8";
}
.ph-fill.ph-address-book-tabs:before {
  content: "\ee4e";
}
.ph-fill.ph-air-traffic-control:before {
  content: "\ecd8";
}
.ph-fill.ph-airplane:before {
  content: "\e002";
}
.ph-fill.ph-airplane-in-flight:before {
  content: "\e4fe";
}
.ph-fill.ph-airplane-landing:before {
  content: "\e502";
}
.ph-fill.ph-airplane-takeoff:before {
  content: "\e504";
}
.ph-fill.ph-airplane-taxiing:before {
  content: "\e500";
}
.ph-fill.ph-airplane-tilt:before {
  content: "\e5d6";
}
.ph-fill.ph-airplay:before {
  content: "\e004";
}
.ph-fill.ph-alarm:before {
  content: "\e006";
}
.ph-fill.ph-alien:before {
  content: "\e8a6";
}
.ph-fill.ph-align-bottom:before {
  content: "\e506";
}
.ph-fill.ph-align-bottom-simple:before {
  content: "\eb0c";
}
.ph-fill.ph-align-center-horizontal:before {
  content: "\e50a";
}
.ph-fill.ph-align-center-horizontal-simple:before {
  content: "\eb0e";
}
.ph-fill.ph-align-center-vertical:before {
  content: "\e50c";
}
.ph-fill.ph-align-center-vertical-simple:before {
  content: "\eb10";
}
.ph-fill.ph-align-left:before {
  content: "\e50e";
}
.ph-fill.ph-align-left-simple:before {
  content: "\eaee";
}
.ph-fill.ph-align-right:before {
  content: "\e510";
}
.ph-fill.ph-align-right-simple:before {
  content: "\eb12";
}
.ph-fill.ph-align-top:before {
  content: "\e512";
}
.ph-fill.ph-align-top-simple:before {
  content: "\eb14";
}
.ph-fill.ph-amazon-logo:before {
  content: "\e96c";
}
.ph-fill.ph-ambulance:before {
  content: "\e572";
}
.ph-fill.ph-anchor:before {
  content: "\e514";
}
.ph-fill.ph-anchor-simple:before {
  content: "\e5d8";
}
.ph-fill.ph-android-logo:before {
  content: "\e008";
}
.ph-fill.ph-angle:before {
  content: "\e7bc";
}
.ph-fill.ph-angular-logo:before {
  content: "\eb80";
}
.ph-fill.ph-aperture:before {
  content: "\e00a";
}
.ph-fill.ph-app-store-logo:before {
  content: "\e974";
}
.ph-fill.ph-app-window:before {
  content: "\e5da";
}
.ph-fill.ph-apple-logo:before {
  content: "\e516";
}
.ph-fill.ph-apple-podcasts-logo:before {
  content: "\eb96";
}
.ph-fill.ph-approximate-equals:before {
  content: "\edaa";
}
.ph-fill.ph-archive:before {
  content: "\e00c";
}
.ph-fill.ph-armchair:before {
  content: "\e012";
}
.ph-fill.ph-arrow-arc-left:before {
  content: "\e014";
}
.ph-fill.ph-arrow-arc-right:before {
  content: "\e016";
}
.ph-fill.ph-arrow-bend-double-up-left:before {
  content: "\e03a";
}
.ph-fill.ph-arrow-bend-double-up-right:before {
  content: "\e03c";
}
.ph-fill.ph-arrow-bend-down-left:before {
  content: "\e018";
}
.ph-fill.ph-arrow-bend-down-right:before {
  content: "\e01a";
}
.ph-fill.ph-arrow-bend-left-down:before {
  content: "\e01c";
}
.ph-fill.ph-arrow-bend-left-up:before {
  content: "\e01e";
}
.ph-fill.ph-arrow-bend-right-down:before {
  content: "\e020";
}
.ph-fill.ph-arrow-bend-right-up:before {
  content: "\e022";
}
.ph-fill.ph-arrow-bend-up-left:before {
  content: "\e024";
}
.ph-fill.ph-arrow-bend-up-right:before {
  content: "\e026";
}
.ph-fill.ph-arrow-circle-down:before {
  content: "\e028";
}
.ph-fill.ph-arrow-circle-down-left:before {
  content: "\e02a";
}
.ph-fill.ph-arrow-circle-down-right:before {
  content: "\e02c";
}
.ph-fill.ph-arrow-circle-left:before {
  content: "\e05a";
}
.ph-fill.ph-arrow-circle-right:before {
  content: "\e02e";
}
.ph-fill.ph-arrow-circle-up:before {
  content: "\e030";
}
.ph-fill.ph-arrow-circle-up-left:before {
  content: "\e032";
}
.ph-fill.ph-arrow-circle-up-right:before {
  content: "\e034";
}
.ph-fill.ph-arrow-clockwise:before {
  content: "\e036";
}
.ph-fill.ph-arrow-counter-clockwise:before {
  content: "\e038";
}
.ph-fill.ph-arrow-down:before {
  content: "\e03e";
}
.ph-fill.ph-arrow-down-left:before {
  content: "\e040";
}
.ph-fill.ph-arrow-down-right:before {
  content: "\e042";
}
.ph-fill.ph-arrow-elbow-down-left:before {
  content: "\e044";
}
.ph-fill.ph-arrow-elbow-down-right:before {
  content: "\e046";
}
.ph-fill.ph-arrow-elbow-left:before {
  content: "\e048";
}
.ph-fill.ph-arrow-elbow-left-down:before {
  content: "\e04a";
}
.ph-fill.ph-arrow-elbow-left-up:before {
  content: "\e04c";
}
.ph-fill.ph-arrow-elbow-right:before {
  content: "\e04e";
}
.ph-fill.ph-arrow-elbow-right-down:before {
  content: "\e050";
}
.ph-fill.ph-arrow-elbow-right-up:before {
  content: "\e052";
}
.ph-fill.ph-arrow-elbow-up-left:before {
  content: "\e054";
}
.ph-fill.ph-arrow-elbow-up-right:before {
  content: "\e056";
}
.ph-fill.ph-arrow-fat-down:before {
  content: "\e518";
}
.ph-fill.ph-arrow-fat-left:before {
  content: "\e51a";
}
.ph-fill.ph-arrow-fat-line-down:before {
  content: "\e51c";
}
.ph-fill.ph-arrow-fat-line-left:before {
  content: "\e51e";
}
.ph-fill.ph-arrow-fat-line-right:before {
  content: "\e520";
}
.ph-fill.ph-arrow-fat-line-up:before {
  content: "\e522";
}
.ph-fill.ph-arrow-fat-lines-down:before {
  content: "\e524";
}
.ph-fill.ph-arrow-fat-lines-left:before {
  content: "\e526";
}
.ph-fill.ph-arrow-fat-lines-right:before {
  content: "\e528";
}
.ph-fill.ph-arrow-fat-lines-up:before {
  content: "\e52a";
}
.ph-fill.ph-arrow-fat-right:before {
  content: "\e52c";
}
.ph-fill.ph-arrow-fat-up:before {
  content: "\e52e";
}
.ph-fill.ph-arrow-left:before {
  content: "\e058";
}
.ph-fill.ph-arrow-line-down:before {
  content: "\e05c";
}
.ph-fill.ph-arrow-line-down-left:before {
  content: "\e05e";
}
.ph-fill.ph-arrow-line-down-right:before {
  content: "\e060";
}
.ph-fill.ph-arrow-line-left:before {
  content: "\e062";
}
.ph-fill.ph-arrow-line-right:before {
  content: "\e064";
}
.ph-fill.ph-arrow-line-up:before {
  content: "\e066";
}
.ph-fill.ph-arrow-line-up-left:before {
  content: "\e068";
}
.ph-fill.ph-arrow-line-up-right:before {
  content: "\e06a";
}
.ph-fill.ph-arrow-right:before {
  content: "\e06c";
}
.ph-fill.ph-arrow-square-down:before {
  content: "\e06e";
}
.ph-fill.ph-arrow-square-down-left:before {
  content: "\e070";
}
.ph-fill.ph-arrow-square-down-right:before {
  content: "\e072";
}
.ph-fill.ph-arrow-square-in:before {
  content: "\e5dc";
}
.ph-fill.ph-arrow-square-left:before {
  content: "\e074";
}
.ph-fill.ph-arrow-square-out:before {
  content: "\e5de";
}
.ph-fill.ph-arrow-square-right:before {
  content: "\e076";
}
.ph-fill.ph-arrow-square-up:before {
  content: "\e078";
}
.ph-fill.ph-arrow-square-up-left:before {
  content: "\e07a";
}
.ph-fill.ph-arrow-square-up-right:before {
  content: "\e07c";
}
.ph-fill.ph-arrow-u-down-left:before {
  content: "\e07e";
}
.ph-fill.ph-arrow-u-down-right:before {
  content: "\e080";
}
.ph-fill.ph-arrow-u-left-down:before {
  content: "\e082";
}
.ph-fill.ph-arrow-u-left-up:before {
  content: "\e084";
}
.ph-fill.ph-arrow-u-right-down:before {
  content: "\e086";
}
.ph-fill.ph-arrow-u-right-up:before {
  content: "\e088";
}
.ph-fill.ph-arrow-u-up-left:before {
  content: "\e08a";
}
.ph-fill.ph-arrow-u-up-right:before {
  content: "\e08c";
}
.ph-fill.ph-arrow-up:before {
  content: "\e08e";
}
.ph-fill.ph-arrow-up-left:before {
  content: "\e090";
}
.ph-fill.ph-arrow-up-right:before {
  content: "\e092";
}
.ph-fill.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph-fill.ph-arrows-counter-clockwise:before {
  content: "\e096";
}
.ph-fill.ph-arrows-down-up:before {
  content: "\e098";
}
.ph-fill.ph-arrows-horizontal:before {
  content: "\eb06";
}
.ph-fill.ph-arrows-in:before {
  content: "\e09a";
}
.ph-fill.ph-arrows-in-cardinal:before {
  content: "\e09c";
}
.ph-fill.ph-arrows-in-line-horizontal:before {
  content: "\e530";
}
.ph-fill.ph-arrows-in-line-vertical:before {
  content: "\e532";
}
.ph-fill.ph-arrows-in-simple:before {
  content: "\e09e";
}
.ph-fill.ph-arrows-left-right:before {
  content: "\e0a0";
}
.ph-fill.ph-arrows-merge:before {
  content: "\ed3e";
}
.ph-fill.ph-arrows-out:before {
  content: "\e0a2";
}
.ph-fill.ph-arrows-out-cardinal:before {
  content: "\e0a4";
}
.ph-fill.ph-arrows-out-line-horizontal:before {
  content: "\e534";
}
.ph-fill.ph-arrows-out-line-vertical:before {
  content: "\e536";
}
.ph-fill.ph-arrows-out-simple:before {
  content: "\e0a6";
}
.ph-fill.ph-arrows-split:before {
  content: "\ed3c";
}
.ph-fill.ph-arrows-vertical:before {
  content: "\eb04";
}
.ph-fill.ph-article:before {
  content: "\e0a8";
}
.ph-fill.ph-article-medium:before {
  content: "\e5e0";
}
.ph-fill.ph-article-ny-times:before {
  content: "\e5e2";
}
.ph-fill.ph-asclepius:before {
  content: "\ee34";
}
.ph-fill.ph-caduceus:before {
  content: "\ee34";
}
.ph-fill.ph-asterisk:before {
  content: "\e0aa";
}
.ph-fill.ph-asterisk-simple:before {
  content: "\e832";
}
.ph-fill.ph-at:before {
  content: "\e0ac";
}
.ph-fill.ph-atom:before {
  content: "\e5e4";
}
.ph-fill.ph-avocado:before {
  content: "\ee04";
}
.ph-fill.ph-axe:before {
  content: "\e9fc";
}
.ph-fill.ph-baby:before {
  content: "\e774";
}
.ph-fill.ph-baby-carriage:before {
  content: "\e818";
}
.ph-fill.ph-backpack:before {
  content: "\e922";
}
.ph-fill.ph-backspace:before {
  content: "\e0ae";
}
.ph-fill.ph-bag:before {
  content: "\e0b0";
}
.ph-fill.ph-bag-simple:before {
  content: "\e5e6";
}
.ph-fill.ph-balloon:before {
  content: "\e76c";
}
.ph-fill.ph-bandaids:before {
  content: "\e0b2";
}
.ph-fill.ph-bank:before {
  content: "\e0b4";
}
.ph-fill.ph-barbell:before {
  content: "\e0b6";
}
.ph-fill.ph-barcode:before {
  content: "\e0b8";
}
.ph-fill.ph-barn:before {
  content: "\ec72";
}
.ph-fill.ph-barricade:before {
  content: "\e948";
}
.ph-fill.ph-baseball:before {
  content: "\e71a";
}
.ph-fill.ph-baseball-cap:before {
  content: "\ea28";
}
.ph-fill.ph-baseball-helmet:before {
  content: "\ee4a";
}
.ph-fill.ph-basket:before {
  content: "\e964";
}
.ph-fill.ph-basketball:before {
  content: "\e724";
}
.ph-fill.ph-bathtub:before {
  content: "\e81e";
}
.ph-fill.ph-battery-charging:before {
  content: "\e0ba";
}
.ph-fill.ph-battery-charging-vertical:before {
  content: "\e0bc";
}
.ph-fill.ph-battery-empty:before {
  content: "\e0be";
}
.ph-fill.ph-battery-full:before {
  content: "\e0c0";
}
.ph-fill.ph-battery-high:before {
  content: "\e0c2";
}
.ph-fill.ph-battery-low:before {
  content: "\e0c4";
}
.ph-fill.ph-battery-medium:before {
  content: "\e0c6";
}
.ph-fill.ph-battery-plus:before {
  content: "\e808";
}
.ph-fill.ph-battery-plus-vertical:before {
  content: "\ec50";
}
.ph-fill.ph-battery-vertical-empty:before {
  content: "\e7c6";
}
.ph-fill.ph-battery-vertical-full:before {
  content: "\e7c4";
}
.ph-fill.ph-battery-vertical-high:before {
  content: "\e7c2";
}
.ph-fill.ph-battery-vertical-low:before {
  content: "\e7be";
}
.ph-fill.ph-battery-vertical-medium:before {
  content: "\e7c0";
}
.ph-fill.ph-battery-warning:before {
  content: "\e0c8";
}
.ph-fill.ph-battery-warning-vertical:before {
  content: "\e0ca";
}
.ph-fill.ph-beach-ball:before {
  content: "\ed24";
}
.ph-fill.ph-beanie:before {
  content: "\ea2a";
}
.ph-fill.ph-bed:before {
  content: "\e0cc";
}
.ph-fill.ph-beer-bottle:before {
  content: "\e7b0";
}
.ph-fill.ph-beer-stein:before {
  content: "\eb62";
}
.ph-fill.ph-behance-logo:before {
  content: "\e7f4";
}
.ph-fill.ph-bell:before {
  content: "\e0ce";
}
.ph-fill.ph-bell-ringing:before {
  content: "\e5e8";
}
.ph-fill.ph-bell-simple:before {
  content: "\e0d0";
}
.ph-fill.ph-bell-simple-ringing:before {
  content: "\e5ea";
}
.ph-fill.ph-bell-simple-slash:before {
  content: "\e0d2";
}
.ph-fill.ph-bell-simple-z:before {
  content: "\e5ec";
}
.ph-fill.ph-bell-slash:before {
  content: "\e0d4";
}
.ph-fill.ph-bell-z:before {
  content: "\e5ee";
}
.ph-fill.ph-belt:before {
  content: "\ea2c";
}
.ph-fill.ph-bezier-curve:before {
  content: "\eb00";
}
.ph-fill.ph-bicycle:before {
  content: "\e0d6";
}
.ph-fill.ph-binary:before {
  content: "\ee60";
}
.ph-fill.ph-binoculars:before {
  content: "\ea64";
}
.ph-fill.ph-biohazard:before {
  content: "\e9e0";
}
.ph-fill.ph-bird:before {
  content: "\e72c";
}
.ph-fill.ph-blueprint:before {
  content: "\eda0";
}
.ph-fill.ph-bluetooth:before {
  content: "\e0da";
}
.ph-fill.ph-bluetooth-connected:before {
  content: "\e0dc";
}
.ph-fill.ph-bluetooth-slash:before {
  content: "\e0de";
}
.ph-fill.ph-bluetooth-x:before {
  content: "\e0e0";
}
.ph-fill.ph-boat:before {
  content: "\e786";
}
.ph-fill.ph-bomb:before {
  content: "\ee0a";
}
.ph-fill.ph-bone:before {
  content: "\e7f2";
}
.ph-fill.ph-book:before {
  content: "\e0e2";
}
.ph-fill.ph-book-bookmark:before {
  content: "\e0e4";
}
.ph-fill.ph-book-open:before {
  content: "\e0e6";
}
.ph-fill.ph-book-open-text:before {
  content: "\e8f2";
}
.ph-fill.ph-book-open-user:before {
  content: "\ede0";
}
.ph-fill.ph-bookmark:before {
  content: "\e0e8";
}
.ph-fill.ph-bookmark-simple:before {
  content: "\e0ea";
}
.ph-fill.ph-bookmarks:before {
  content: "\e0ec";
}
.ph-fill.ph-bookmarks-simple:before {
  content: "\e5f0";
}
.ph-fill.ph-books:before {
  content: "\e758";
}
.ph-fill.ph-boot:before {
  content: "\ecca";
}
.ph-fill.ph-boules:before {
  content: "\e722";
}
.ph-fill.ph-bounding-box:before {
  content: "\e6ce";
}
.ph-fill.ph-bowl-food:before {
  content: "\eaa4";
}
.ph-fill.ph-bowl-steam:before {
  content: "\e8e4";
}
.ph-fill.ph-bowling-ball:before {
  content: "\ea34";
}
.ph-fill.ph-box-arrow-down:before {
  content: "\e00e";
}
.ph-fill.ph-archive-box:before {
  content: "\e00e";
}
.ph-fill.ph-box-arrow-up:before {
  content: "\ee54";
}
.ph-fill.ph-boxing-glove:before {
  content: "\ea36";
}
.ph-fill.ph-brackets-angle:before {
  content: "\e862";
}
.ph-fill.ph-brackets-curly:before {
  content: "\e860";
}
.ph-fill.ph-brackets-round:before {
  content: "\e864";
}
.ph-fill.ph-brackets-square:before {
  content: "\e85e";
}
.ph-fill.ph-brain:before {
  content: "\e74e";
}
.ph-fill.ph-brandy:before {
  content: "\e6b4";
}
.ph-fill.ph-bread:before {
  content: "\e81c";
}
.ph-fill.ph-bridge:before {
  content: "\ea68";
}
.ph-fill.ph-briefcase:before {
  content: "\e0ee";
}
.ph-fill.ph-briefcase-metal:before {
  content: "\e5f2";
}
.ph-fill.ph-broadcast:before {
  content: "\e0f2";
}
.ph-fill.ph-broom:before {
  content: "\ec54";
}
.ph-fill.ph-browser:before {
  content: "\e0f4";
}
.ph-fill.ph-browsers:before {
  content: "\e0f6";
}
.ph-fill.ph-bug:before {
  content: "\e5f4";
}
.ph-fill.ph-bug-beetle:before {
  content: "\e5f6";
}
.ph-fill.ph-bug-droid:before {
  content: "\e5f8";
}
.ph-fill.ph-building:before {
  content: "\e100";
}
.ph-fill.ph-building-apartment:before {
  content: "\e0fe";
}
.ph-fill.ph-building-office:before {
  content: "\e0ff";
}
.ph-fill.ph-buildings:before {
  content: "\e102";
}
.ph-fill.ph-bulldozer:before {
  content: "\ec6c";
}
.ph-fill.ph-bus:before {
  content: "\e106";
}
.ph-fill.ph-butterfly:before {
  content: "\ea6e";
}
.ph-fill.ph-cable-car:before {
  content: "\e49c";
}
.ph-fill.ph-cactus:before {
  content: "\e918";
}
.ph-fill.ph-cake:before {
  content: "\e780";
}
.ph-fill.ph-calculator:before {
  content: "\e538";
}
.ph-fill.ph-calendar:before {
  content: "\e108";
}
.ph-fill.ph-calendar-blank:before {
  content: "\e10a";
}
.ph-fill.ph-calendar-check:before {
  content: "\e712";
}
.ph-fill.ph-calendar-dot:before {
  content: "\e7b2";
}
.ph-fill.ph-calendar-dots:before {
  content: "\e7b4";
}
.ph-fill.ph-calendar-heart:before {
  content: "\e8b0";
}
.ph-fill.ph-calendar-minus:before {
  content: "\ea14";
}
.ph-fill.ph-calendar-plus:before {
  content: "\e714";
}
.ph-fill.ph-calendar-slash:before {
  content: "\ea12";
}
.ph-fill.ph-calendar-star:before {
  content: "\e8b2";
}
.ph-fill.ph-calendar-x:before {
  content: "\e10c";
}
.ph-fill.ph-call-bell:before {
  content: "\e7de";
}
.ph-fill.ph-camera:before {
  content: "\e10e";
}
.ph-fill.ph-camera-plus:before {
  content: "\ec58";
}
.ph-fill.ph-camera-rotate:before {
  content: "\e7a4";
}
.ph-fill.ph-camera-slash:before {
  content: "\e110";
}
.ph-fill.ph-campfire:before {
  content: "\e9d8";
}
.ph-fill.ph-car:before {
  content: "\e112";
}
.ph-fill.ph-car-battery:before {
  content: "\ee30";
}
.ph-fill.ph-car-profile:before {
  content: "\e8cc";
}
.ph-fill.ph-car-simple:before {
  content: "\e114";
}
.ph-fill.ph-cardholder:before {
  content: "\e5fa";
}
.ph-fill.ph-cards:before {
  content: "\e0f8";
}
.ph-fill.ph-cards-three:before {
  content: "\ee50";
}
.ph-fill.ph-caret-circle-double-down:before {
  content: "\e116";
}
.ph-fill.ph-caret-circle-double-left:before {
  content: "\e118";
}
.ph-fill.ph-caret-circle-double-right:before {
  content: "\e11a";
}
.ph-fill.ph-caret-circle-double-up:before {
  content: "\e11c";
}
.ph-fill.ph-caret-circle-down:before {
  content: "\e11e";
}
.ph-fill.ph-caret-circle-left:before {
  content: "\e120";
}
.ph-fill.ph-caret-circle-right:before {
  content: "\e122";
}
.ph-fill.ph-caret-circle-up:before {
  content: "\e124";
}
.ph-fill.ph-caret-circle-up-down:before {
  content: "\e13e";
}
.ph-fill.ph-caret-double-down:before {
  content: "\e126";
}
.ph-fill.ph-caret-double-left:before {
  content: "\e128";
}
.ph-fill.ph-caret-double-right:before {
  content: "\e12a";
}
.ph-fill.ph-caret-double-up:before {
  content: "\e12c";
}
.ph-fill.ph-caret-down:before {
  content: "\e136";
}
.ph-fill.ph-caret-left:before {
  content: "\e138";
}
.ph-fill.ph-caret-line-down:before {
  content: "\e134";
}
.ph-fill.ph-caret-line-left:before {
  content: "\e132";
}
.ph-fill.ph-caret-line-right:before {
  content: "\e130";
}
.ph-fill.ph-caret-line-up:before {
  content: "\e12e";
}
.ph-fill.ph-caret-right:before {
  content: "\e13a";
}
.ph-fill.ph-caret-up:before {
  content: "\e13c";
}
.ph-fill.ph-caret-up-down:before {
  content: "\e140";
}
.ph-fill.ph-carrot:before {
  content: "\ed38";
}
.ph-fill.ph-cash-register:before {
  content: "\ed80";
}
.ph-fill.ph-cassette-tape:before {
  content: "\ed2e";
}
.ph-fill.ph-castle-turret:before {
  content: "\e9d0";
}
.ph-fill.ph-cat:before {
  content: "\e748";
}
.ph-fill.ph-cell-signal-full:before {
  content: "\e142";
}
.ph-fill.ph-cell-signal-high:before {
  content: "\e144";
}
.ph-fill.ph-cell-signal-low:before {
  content: "\e146";
}
.ph-fill.ph-cell-signal-medium:before {
  content: "\e148";
}
.ph-fill.ph-cell-signal-none:before {
  content: "\e14a";
}
.ph-fill.ph-cell-signal-slash:before {
  content: "\e14c";
}
.ph-fill.ph-cell-signal-x:before {
  content: "\e14e";
}
.ph-fill.ph-cell-tower:before {
  content: "\ebaa";
}
.ph-fill.ph-certificate:before {
  content: "\e766";
}
.ph-fill.ph-chair:before {
  content: "\e950";
}
.ph-fill.ph-chalkboard:before {
  content: "\e5fc";
}
.ph-fill.ph-chalkboard-simple:before {
  content: "\e5fe";
}
.ph-fill.ph-chalkboard-teacher:before {
  content: "\e600";
}
.ph-fill.ph-champagne:before {
  content: "\eaca";
}
.ph-fill.ph-charging-station:before {
  content: "\e8d0";
}
.ph-fill.ph-chart-bar:before {
  content: "\e150";
}
.ph-fill.ph-chart-bar-horizontal:before {
  content: "\e152";
}
.ph-fill.ph-chart-donut:before {
  content: "\eaa6";
}
.ph-fill.ph-chart-line:before {
  content: "\e154";
}
.ph-fill.ph-chart-line-down:before {
  content: "\e8b6";
}
.ph-fill.ph-chart-line-up:before {
  content: "\e156";
}
.ph-fill.ph-chart-pie:before {
  content: "\e158";
}
.ph-fill.ph-chart-pie-slice:before {
  content: "\e15a";
}
.ph-fill.ph-chart-polar:before {
  content: "\eaa8";
}
.ph-fill.ph-chart-scatter:before {
  content: "\eaac";
}
.ph-fill.ph-chat:before {
  content: "\e15c";
}
.ph-fill.ph-chat-centered:before {
  content: "\e160";
}
.ph-fill.ph-chat-centered-dots:before {
  content: "\e164";
}
.ph-fill.ph-chat-centered-slash:before {
  content: "\e162";
}
.ph-fill.ph-chat-centered-text:before {
  content: "\e166";
}
.ph-fill.ph-chat-circle:before {
  content: "\e168";
}
.ph-fill.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph-fill.ph-chat-circle-slash:before {
  content: "\e16a";
}
.ph-fill.ph-chat-circle-text:before {
  content: "\e16e";
}
.ph-fill.ph-chat-dots:before {
  content: "\e170";
}
.ph-fill.ph-chat-slash:before {
  content: "\e15e";
}
.ph-fill.ph-chat-teardrop:before {
  content: "\e172";
}
.ph-fill.ph-chat-teardrop-dots:before {
  content: "\e176";
}
.ph-fill.ph-chat-teardrop-slash:before {
  content: "\e174";
}
.ph-fill.ph-chat-teardrop-text:before {
  content: "\e178";
}
.ph-fill.ph-chat-text:before {
  content: "\e17a";
}
.ph-fill.ph-chats:before {
  content: "\e17c";
}
.ph-fill.ph-chats-circle:before {
  content: "\e17e";
}
.ph-fill.ph-chats-teardrop:before {
  content: "\e180";
}
.ph-fill.ph-check:before {
  content: "\e182";
}
.ph-fill.ph-check-circle:before {
  content: "\e184";
}
.ph-fill.ph-check-fat:before {
  content: "\eba6";
}
.ph-fill.ph-check-square:before {
  content: "\e186";
}
.ph-fill.ph-check-square-offset:before {
  content: "\e188";
}
.ph-fill.ph-checkerboard:before {
  content: "\e8c4";
}
.ph-fill.ph-checks:before {
  content: "\e53a";
}
.ph-fill.ph-cheers:before {
  content: "\ea4a";
}
.ph-fill.ph-cheese:before {
  content: "\e9fe";
}
.ph-fill.ph-chef-hat:before {
  content: "\ed8e";
}
.ph-fill.ph-cherries:before {
  content: "\e830";
}
.ph-fill.ph-church:before {
  content: "\ecea";
}
.ph-fill.ph-cigarette:before {
  content: "\ed90";
}
.ph-fill.ph-cigarette-slash:before {
  content: "\ed92";
}
.ph-fill.ph-circle:before {
  content: "\e18a";
}
.ph-fill.ph-circle-dashed:before {
  content: "\e602";
}
.ph-fill.ph-circle-half:before {
  content: "\e18c";
}
.ph-fill.ph-circle-half-tilt:before {
  content: "\e18e";
}
.ph-fill.ph-circle-notch:before {
  content: "\eb44";
}
.ph-fill.ph-circles-four:before {
  content: "\e190";
}
.ph-fill.ph-circles-three:before {
  content: "\e192";
}
.ph-fill.ph-circles-three-plus:before {
  content: "\e194";
}
.ph-fill.ph-circuitry:before {
  content: "\e9c2";
}
.ph-fill.ph-city:before {
  content: "\ea6a";
}
.ph-fill.ph-clipboard:before {
  content: "\e196";
}
.ph-fill.ph-clipboard-text:before {
  content: "\e198";
}
.ph-fill.ph-clock:before {
  content: "\e19a";
}
.ph-fill.ph-clock-afternoon:before {
  content: "\e19c";
}
.ph-fill.ph-clock-clockwise:before {
  content: "\e19e";
}
.ph-fill.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph-fill.ph-clock-counter-clockwise:before {
  content: "\e1a0";
}
.ph-fill.ph-clock-user:before {
  content: "\edec";
}
.ph-fill.ph-closed-captioning:before {
  content: "\e1a4";
}
.ph-fill.ph-cloud:before {
  content: "\e1aa";
}
.ph-fill.ph-cloud-arrow-down:before {
  content: "\e1ac";
}
.ph-fill.ph-cloud-arrow-up:before {
  content: "\e1ae";
}
.ph-fill.ph-cloud-check:before {
  content: "\e1b0";
}
.ph-fill.ph-cloud-fog:before {
  content: "\e53c";
}
.ph-fill.ph-cloud-lightning:before {
  content: "\e1b2";
}
.ph-fill.ph-cloud-moon:before {
  content: "\e53e";
}
.ph-fill.ph-cloud-rain:before {
  content: "\e1b4";
}
.ph-fill.ph-cloud-slash:before {
  content: "\e1b6";
}
.ph-fill.ph-cloud-snow:before {
  content: "\e1b8";
}
.ph-fill.ph-cloud-sun:before {
  content: "\e540";
}
.ph-fill.ph-cloud-warning:before {
  content: "\ea98";
}
.ph-fill.ph-cloud-x:before {
  content: "\ea96";
}
.ph-fill.ph-clover:before {
  content: "\edc8";
}
.ph-fill.ph-club:before {
  content: "\e1ba";
}
.ph-fill.ph-coat-hanger:before {
  content: "\e7fe";
}
.ph-fill.ph-coda-logo:before {
  content: "\e7ce";
}
.ph-fill.ph-code:before {
  content: "\e1bc";
}
.ph-fill.ph-code-block:before {
  content: "\eafe";
}
.ph-fill.ph-code-simple:before {
  content: "\e1be";
}
.ph-fill.ph-codepen-logo:before {
  content: "\e978";
}
.ph-fill.ph-codesandbox-logo:before {
  content: "\ea06";
}
.ph-fill.ph-coffee:before {
  content: "\e1c2";
}
.ph-fill.ph-coffee-bean:before {
  content: "\e1c0";
}
.ph-fill.ph-coin:before {
  content: "\e60e";
}
.ph-fill.ph-coin-vertical:before {
  content: "\eb48";
}
.ph-fill.ph-coins:before {
  content: "\e78e";
}
.ph-fill.ph-columns:before {
  content: "\e546";
}
.ph-fill.ph-columns-plus-left:before {
  content: "\e544";
}
.ph-fill.ph-columns-plus-right:before {
  content: "\e542";
}
.ph-fill.ph-command:before {
  content: "\e1c4";
}
.ph-fill.ph-compass:before {
  content: "\e1c8";
}
.ph-fill.ph-compass-rose:before {
  content: "\e1c6";
}
.ph-fill.ph-compass-tool:before {
  content: "\ea0e";
}
.ph-fill.ph-computer-tower:before {
  content: "\e548";
}
.ph-fill.ph-confetti:before {
  content: "\e81a";
}
.ph-fill.ph-contactless-payment:before {
  content: "\ed42";
}
.ph-fill.ph-control:before {
  content: "\eca6";
}
.ph-fill.ph-cookie:before {
  content: "\e6ca";
}
.ph-fill.ph-cooking-pot:before {
  content: "\e764";
}
.ph-fill.ph-copy:before {
  content: "\e1ca";
}
.ph-fill.ph-copy-simple:before {
  content: "\e1cc";
}
.ph-fill.ph-copyleft:before {
  content: "\e86a";
}
.ph-fill.ph-copyright:before {
  content: "\e54a";
}
.ph-fill.ph-corners-in:before {
  content: "\e1ce";
}
.ph-fill.ph-corners-out:before {
  content: "\e1d0";
}
.ph-fill.ph-couch:before {
  content: "\e7f6";
}
.ph-fill.ph-court-basketball:before {
  content: "\ee36";
}
.ph-fill.ph-cow:before {
  content: "\eabe";
}
.ph-fill.ph-cowboy-hat:before {
  content: "\ed12";
}
.ph-fill.ph-cpu:before {
  content: "\e610";
}
.ph-fill.ph-crane:before {
  content: "\ed48";
}
.ph-fill.ph-crane-tower:before {
  content: "\ed49";
}
.ph-fill.ph-credit-card:before {
  content: "\e1d2";
}
.ph-fill.ph-cricket:before {
  content: "\ee12";
}
.ph-fill.ph-crop:before {
  content: "\e1d4";
}
.ph-fill.ph-cross:before {
  content: "\e8a0";
}
.ph-fill.ph-crosshair:before {
  content: "\e1d6";
}
.ph-fill.ph-crosshair-simple:before {
  content: "\e1d8";
}
.ph-fill.ph-crown:before {
  content: "\e614";
}
.ph-fill.ph-crown-cross:before {
  content: "\ee5e";
}
.ph-fill.ph-crown-simple:before {
  content: "\e616";
}
.ph-fill.ph-cube:before {
  content: "\e1da";
}
.ph-fill.ph-cube-focus:before {
  content: "\ed0a";
}
.ph-fill.ph-cube-transparent:before {
  content: "\ec7c";
}
.ph-fill.ph-currency-btc:before {
  content: "\e618";
}
.ph-fill.ph-currency-circle-dollar:before {
  content: "\e54c";
}
.ph-fill.ph-currency-cny:before {
  content: "\e54e";
}
.ph-fill.ph-currency-dollar:before {
  content: "\e550";
}
.ph-fill.ph-currency-dollar-simple:before {
  content: "\e552";
}
.ph-fill.ph-currency-eth:before {
  content: "\eada";
}
.ph-fill.ph-currency-eur:before {
  content: "\e554";
}
.ph-fill.ph-currency-gbp:before {
  content: "\e556";
}
.ph-fill.ph-currency-inr:before {
  content: "\e558";
}
.ph-fill.ph-currency-jpy:before {
  content: "\e55a";
}
.ph-fill.ph-currency-krw:before {
  content: "\e55c";
}
.ph-fill.ph-currency-kzt:before {
  content: "\ec4c";
}
.ph-fill.ph-currency-ngn:before {
  content: "\eb52";
}
.ph-fill.ph-currency-rub:before {
  content: "\e55e";
}
.ph-fill.ph-cursor:before {
  content: "\e1dc";
}
.ph-fill.ph-cursor-click:before {
  content: "\e7c8";
}
.ph-fill.ph-cursor-text:before {
  content: "\e7d8";
}
.ph-fill.ph-cylinder:before {
  content: "\e8fc";
}
.ph-fill.ph-database:before {
  content: "\e1de";
}
.ph-fill.ph-desk:before {
  content: "\ed16";
}
.ph-fill.ph-desktop:before {
  content: "\e560";
}
.ph-fill.ph-desktop-tower:before {
  content: "\e562";
}
.ph-fill.ph-detective:before {
  content: "\e83e";
}
.ph-fill.ph-dev-to-logo:before {
  content: "\ed0e";
}
.ph-fill.ph-device-mobile:before {
  content: "\e1e0";
}
.ph-fill.ph-device-mobile-camera:before {
  content: "\e1e2";
}
.ph-fill.ph-device-mobile-slash:before {
  content: "\ee46";
}
.ph-fill.ph-device-mobile-speaker:before {
  content: "\e1e4";
}
.ph-fill.ph-device-rotate:before {
  content: "\edf2";
}
.ph-fill.ph-device-tablet:before {
  content: "\e1e6";
}
.ph-fill.ph-device-tablet-camera:before {
  content: "\e1e8";
}
.ph-fill.ph-device-tablet-speaker:before {
  content: "\e1ea";
}
.ph-fill.ph-devices:before {
  content: "\eba4";
}
.ph-fill.ph-diamond:before {
  content: "\e1ec";
}
.ph-fill.ph-diamonds-four:before {
  content: "\e8f4";
}
.ph-fill.ph-dice-five:before {
  content: "\e1ee";
}
.ph-fill.ph-dice-four:before {
  content: "\e1f0";
}
.ph-fill.ph-dice-one:before {
  content: "\e1f2";
}
.ph-fill.ph-dice-six:before {
  content: "\e1f4";
}
.ph-fill.ph-dice-three:before {
  content: "\e1f6";
}
.ph-fill.ph-dice-two:before {
  content: "\e1f8";
}
.ph-fill.ph-disc:before {
  content: "\e564";
}
.ph-fill.ph-disco-ball:before {
  content: "\ed98";
}
.ph-fill.ph-discord-logo:before {
  content: "\e61a";
}
.ph-fill.ph-divide:before {
  content: "\e1fa";
}
.ph-fill.ph-dna:before {
  content: "\e924";
}
.ph-fill.ph-dog:before {
  content: "\e74a";
}
.ph-fill.ph-door:before {
  content: "\e61c";
}
.ph-fill.ph-door-open:before {
  content: "\e7e6";
}
.ph-fill.ph-dot:before {
  content: "\ecde";
}
.ph-fill.ph-dot-outline:before {
  content: "\ece0";
}
.ph-fill.ph-dots-nine:before {
  content: "\e1fc";
}
.ph-fill.ph-dots-six:before {
  content: "\e794";
}
.ph-fill.ph-dots-six-vertical:before {
  content: "\eae2";
}
.ph-fill.ph-dots-three:before {
  content: "\e1fe";
}
.ph-fill.ph-dots-three-circle:before {
  content: "\e200";
}
.ph-fill.ph-dots-three-circle-vertical:before {
  content: "\e202";
}
.ph-fill.ph-dots-three-outline:before {
  content: "\e204";
}
.ph-fill.ph-dots-three-outline-vertical:before {
  content: "\e206";
}
.ph-fill.ph-dots-three-vertical:before {
  content: "\e208";
}
.ph-fill.ph-download:before {
  content: "\e20a";
}
.ph-fill.ph-download-simple:before {
  content: "\e20c";
}
.ph-fill.ph-dress:before {
  content: "\ea7e";
}
.ph-fill.ph-dresser:before {
  content: "\e94e";
}
.ph-fill.ph-dribbble-logo:before {
  content: "\e20e";
}
.ph-fill.ph-drone:before {
  content: "\ed74";
}
.ph-fill.ph-drop:before {
  content: "\e210";
}
.ph-fill.ph-drop-half:before {
  content: "\e566";
}
.ph-fill.ph-drop-half-bottom:before {
  content: "\eb40";
}
.ph-fill.ph-drop-simple:before {
  content: "\ee32";
}
.ph-fill.ph-drop-slash:before {
  content: "\e954";
}
.ph-fill.ph-dropbox-logo:before {
  content: "\e7d0";
}
.ph-fill.ph-ear:before {
  content: "\e70c";
}
.ph-fill.ph-ear-slash:before {
  content: "\e70e";
}
.ph-fill.ph-egg:before {
  content: "\e812";
}
.ph-fill.ph-egg-crack:before {
  content: "\eb64";
}
.ph-fill.ph-eject:before {
  content: "\e212";
}
.ph-fill.ph-eject-simple:before {
  content: "\e6ae";
}
.ph-fill.ph-elevator:before {
  content: "\ecc0";
}
.ph-fill.ph-empty:before {
  content: "\edbc";
}
.ph-fill.ph-engine:before {
  content: "\ea80";
}
.ph-fill.ph-envelope:before {
  content: "\e214";
}
.ph-fill.ph-envelope-open:before {
  content: "\e216";
}
.ph-fill.ph-envelope-simple:before {
  content: "\e218";
}
.ph-fill.ph-envelope-simple-open:before {
  content: "\e21a";
}
.ph-fill.ph-equalizer:before {
  content: "\ebbc";
}
.ph-fill.ph-equals:before {
  content: "\e21c";
}
.ph-fill.ph-eraser:before {
  content: "\e21e";
}
.ph-fill.ph-escalator-down:before {
  content: "\ecba";
}
.ph-fill.ph-escalator-up:before {
  content: "\ecbc";
}
.ph-fill.ph-exam:before {
  content: "\e742";
}
.ph-fill.ph-exclamation-mark:before {
  content: "\ee44";
}
.ph-fill.ph-exclude:before {
  content: "\e882";
}
.ph-fill.ph-exclude-square:before {
  content: "\e880";
}
.ph-fill.ph-export:before {
  content: "\eaf0";
}
.ph-fill.ph-eye:before {
  content: "\e220";
}
.ph-fill.ph-eye-closed:before {
  content: "\e222";
}
.ph-fill.ph-eye-slash:before {
  content: "\e224";
}
.ph-fill.ph-eyedropper:before {
  content: "\e568";
}
.ph-fill.ph-eyedropper-sample:before {
  content: "\eac4";
}
.ph-fill.ph-eyeglasses:before {
  content: "\e7ba";
}
.ph-fill.ph-eyes:before {
  content: "\ee5c";
}
.ph-fill.ph-face-mask:before {
  content: "\e56a";
}
.ph-fill.ph-facebook-logo:before {
  content: "\e226";
}
.ph-fill.ph-factory:before {
  content: "\e760";
}
.ph-fill.ph-faders:before {
  content: "\e228";
}
.ph-fill.ph-faders-horizontal:before {
  content: "\e22a";
}
.ph-fill.ph-fallout-shelter:before {
  content: "\e9de";
}
.ph-fill.ph-fan:before {
  content: "\e9f2";
}
.ph-fill.ph-farm:before {
  content: "\ec70";
}
.ph-fill.ph-fast-forward:before {
  content: "\e6a6";
}
.ph-fill.ph-fast-forward-circle:before {
  content: "\e22c";
}
.ph-fill.ph-feather:before {
  content: "\e9c0";
}
.ph-fill.ph-fediverse-logo:before {
  content: "\ed66";
}
.ph-fill.ph-figma-logo:before {
  content: "\e22e";
}
.ph-fill.ph-file:before {
  content: "\e230";
}
.ph-fill.ph-file-archive:before {
  content: "\eb2a";
}
.ph-fill.ph-file-arrow-down:before {
  content: "\e232";
}
.ph-fill.ph-file-arrow-up:before {
  content: "\e61e";
}
.ph-fill.ph-file-audio:before {
  content: "\ea20";
}
.ph-fill.ph-file-c:before {
  content: "\eb32";
}
.ph-fill.ph-file-c-sharp:before {
  content: "\eb30";
}
.ph-fill.ph-file-cloud:before {
  content: "\e95e";
}
.ph-fill.ph-file-code:before {
  content: "\e914";
}
.ph-fill.ph-file-cpp:before {
  content: "\eb2e";
}
.ph-fill.ph-file-css:before {
  content: "\eb34";
}
.ph-fill.ph-file-csv:before {
  content: "\eb1c";
}
.ph-fill.ph-file-dashed:before {
  content: "\e704";
}
.ph-fill.ph-file-dotted:before {
  content: "\e704";
}
.ph-fill.ph-file-doc:before {
  content: "\eb1e";
}
.ph-fill.ph-file-html:before {
  content: "\eb38";
}
.ph-fill.ph-file-image:before {
  content: "\ea24";
}
.ph-fill.ph-file-ini:before {
  content: "\eb33";
}
.ph-fill.ph-file-jpg:before {
  content: "\eb1a";
}
.ph-fill.ph-file-js:before {
  content: "\eb24";
}
.ph-fill.ph-file-jsx:before {
  content: "\eb3a";
}
.ph-fill.ph-file-lock:before {
  content: "\e95c";
}
.ph-fill.ph-file-magnifying-glass:before {
  content: "\e238";
}
.ph-fill.ph-file-search:before {
  content: "\e238";
}
.ph-fill.ph-file-md:before {
  content: "\ed50";
}
.ph-fill.ph-file-minus:before {
  content: "\e234";
}
.ph-fill.ph-file-pdf:before {
  content: "\e702";
}
.ph-fill.ph-file-plus:before {
  content: "\e236";
}
.ph-fill.ph-file-png:before {
  content: "\eb18";
}
.ph-fill.ph-file-ppt:before {
  content: "\eb20";
}
.ph-fill.ph-file-py:before {
  content: "\eb2c";
}
.ph-fill.ph-file-rs:before {
  content: "\eb28";
}
.ph-fill.ph-file-sql:before {
  content: "\ed4e";
}
.ph-fill.ph-file-svg:before {
  content: "\ed08";
}
.ph-fill.ph-file-text:before {
  content: "\e23a";
}
.ph-fill.ph-file-ts:before {
  content: "\eb26";
}
.ph-fill.ph-file-tsx:before {
  content: "\eb3c";
}
.ph-fill.ph-file-txt:before {
  content: "\eb35";
}
.ph-fill.ph-file-video:before {
  content: "\ea22";
}
.ph-fill.ph-file-vue:before {
  content: "\eb3e";
}
.ph-fill.ph-file-x:before {
  content: "\e23c";
}
.ph-fill.ph-file-xls:before {
  content: "\eb22";
}
.ph-fill.ph-file-zip:before {
  content: "\e958";
}
.ph-fill.ph-files:before {
  content: "\e710";
}
.ph-fill.ph-film-reel:before {
  content: "\e8c0";
}
.ph-fill.ph-film-script:before {
  content: "\eb50";
}
.ph-fill.ph-film-slate:before {
  content: "\e8c2";
}
.ph-fill.ph-film-strip:before {
  content: "\e792";
}
.ph-fill.ph-fingerprint:before {
  content: "\e23e";
}
.ph-fill.ph-fingerprint-simple:before {
  content: "\e240";
}
.ph-fill.ph-finn-the-human:before {
  content: "\e56c";
}
.ph-fill.ph-fire:before {
  content: "\e242";
}
.ph-fill.ph-fire-extinguisher:before {
  content: "\e9e8";
}
.ph-fill.ph-fire-simple:before {
  content: "\e620";
}
.ph-fill.ph-fire-truck:before {
  content: "\e574";
}
.ph-fill.ph-first-aid:before {
  content: "\e56e";
}
.ph-fill.ph-first-aid-kit:before {
  content: "\e570";
}
.ph-fill.ph-fish:before {
  content: "\e728";
}
.ph-fill.ph-fish-simple:before {
  content: "\e72a";
}
.ph-fill.ph-flag:before {
  content: "\e244";
}
.ph-fill.ph-flag-banner:before {
  content: "\e622";
}
.ph-fill.ph-flag-banner-fold:before {
  content: "\ecf2";
}
.ph-fill.ph-flag-checkered:before {
  content: "\ea38";
}
.ph-fill.ph-flag-pennant:before {
  content: "\ecf0";
}
.ph-fill.ph-flame:before {
  content: "\e624";
}
.ph-fill.ph-flashlight:before {
  content: "\e246";
}
.ph-fill.ph-flask:before {
  content: "\e79e";
}
.ph-fill.ph-flip-horizontal:before {
  content: "\ed6a";
}
.ph-fill.ph-flip-vertical:before {
  content: "\ed6c";
}
.ph-fill.ph-floppy-disk:before {
  content: "\e248";
}
.ph-fill.ph-floppy-disk-back:before {
  content: "\eaf4";
}
.ph-fill.ph-flow-arrow:before {
  content: "\e6ec";
}
.ph-fill.ph-flower:before {
  content: "\e75e";
}
.ph-fill.ph-flower-lotus:before {
  content: "\e6cc";
}
.ph-fill.ph-flower-tulip:before {
  content: "\eacc";
}
.ph-fill.ph-flying-saucer:before {
  content: "\eb4a";
}
.ph-fill.ph-folder:before {
  content: "\e24a";
}
.ph-fill.ph-folder-notch:before {
  content: "\e24a";
}
.ph-fill.ph-folder-dashed:before {
  content: "\e8f8";
}
.ph-fill.ph-folder-dotted:before {
  content: "\e8f8";
}
.ph-fill.ph-folder-lock:before {
  content: "\ea3c";
}
.ph-fill.ph-folder-minus:before {
  content: "\e254";
}
.ph-fill.ph-folder-notch-minus:before {
  content: "\e254";
}
.ph-fill.ph-folder-open:before {
  content: "\e256";
}
.ph-fill.ph-folder-notch-open:before {
  content: "\e256";
}
.ph-fill.ph-folder-plus:before {
  content: "\e258";
}
.ph-fill.ph-folder-notch-plus:before {
  content: "\e258";
}
.ph-fill.ph-folder-simple:before {
  content: "\e25a";
}
.ph-fill.ph-folder-simple-dashed:before {
  content: "\ec2a";
}
.ph-fill.ph-folder-simple-dotted:before {
  content: "\ec2a";
}
.ph-fill.ph-folder-simple-lock:before {
  content: "\eb5e";
}
.ph-fill.ph-folder-simple-minus:before {
  content: "\e25c";
}
.ph-fill.ph-folder-simple-plus:before {
  content: "\e25e";
}
.ph-fill.ph-folder-simple-star:before {
  content: "\ec2e";
}
.ph-fill.ph-folder-simple-user:before {
  content: "\eb60";
}
.ph-fill.ph-folder-star:before {
  content: "\ea86";
}
.ph-fill.ph-folder-user:before {
  content: "\eb46";
}
.ph-fill.ph-folders:before {
  content: "\e260";
}
.ph-fill.ph-football:before {
  content: "\e718";
}
.ph-fill.ph-football-helmet:before {
  content: "\ee4c";
}
.ph-fill.ph-footprints:before {
  content: "\ea88";
}
.ph-fill.ph-fork-knife:before {
  content: "\e262";
}
.ph-fill.ph-four-k:before {
  content: "\ea5c";
}
.ph-fill.ph-frame-corners:before {
  content: "\e626";
}
.ph-fill.ph-framer-logo:before {
  content: "\e264";
}
.ph-fill.ph-function:before {
  content: "\ebe4";
}
.ph-fill.ph-funnel:before {
  content: "\e266";
}
.ph-fill.ph-funnel-simple:before {
  content: "\e268";
}
.ph-fill.ph-funnel-simple-x:before {
  content: "\e26a";
}
.ph-fill.ph-funnel-x:before {
  content: "\e26c";
}
.ph-fill.ph-game-controller:before {
  content: "\e26e";
}
.ph-fill.ph-garage:before {
  content: "\ecd6";
}
.ph-fill.ph-gas-can:before {
  content: "\e8ce";
}
.ph-fill.ph-gas-pump:before {
  content: "\e768";
}
.ph-fill.ph-gauge:before {
  content: "\e628";
}
.ph-fill.ph-gavel:before {
  content: "\ea32";
}
.ph-fill.ph-gear:before {
  content: "\e270";
}
.ph-fill.ph-gear-fine:before {
  content: "\e87c";
}
.ph-fill.ph-gear-six:before {
  content: "\e272";
}
.ph-fill.ph-gender-female:before {
  content: "\e6e0";
}
.ph-fill.ph-gender-intersex:before {
  content: "\e6e6";
}
.ph-fill.ph-gender-male:before {
  content: "\e6e2";
}
.ph-fill.ph-gender-neuter:before {
  content: "\e6ea";
}
.ph-fill.ph-gender-nonbinary:before {
  content: "\e6e4";
}
.ph-fill.ph-gender-transgender:before {
  content: "\e6e8";
}
.ph-fill.ph-ghost:before {
  content: "\e62a";
}
.ph-fill.ph-gif:before {
  content: "\e274";
}
.ph-fill.ph-gift:before {
  content: "\e276";
}
.ph-fill.ph-git-branch:before {
  content: "\e278";
}
.ph-fill.ph-git-commit:before {
  content: "\e27a";
}
.ph-fill.ph-git-diff:before {
  content: "\e27c";
}
.ph-fill.ph-git-fork:before {
  content: "\e27e";
}
.ph-fill.ph-git-merge:before {
  content: "\e280";
}
.ph-fill.ph-git-pull-request:before {
  content: "\e282";
}
.ph-fill.ph-github-logo:before {
  content: "\e576";
}
.ph-fill.ph-gitlab-logo:before {
  content: "\e694";
}
.ph-fill.ph-gitlab-logo-simple:before {
  content: "\e696";
}
.ph-fill.ph-globe:before {
  content: "\e288";
}
.ph-fill.ph-globe-hemisphere-east:before {
  content: "\e28a";
}
.ph-fill.ph-globe-hemisphere-west:before {
  content: "\e28c";
}
.ph-fill.ph-globe-simple:before {
  content: "\e28e";
}
.ph-fill.ph-globe-simple-x:before {
  content: "\e284";
}
.ph-fill.ph-globe-stand:before {
  content: "\e290";
}
.ph-fill.ph-globe-x:before {
  content: "\e286";
}
.ph-fill.ph-goggles:before {
  content: "\ecb4";
}
.ph-fill.ph-golf:before {
  content: "\ea3e";
}
.ph-fill.ph-goodreads-logo:before {
  content: "\ed10";
}
.ph-fill.ph-google-cardboard-logo:before {
  content: "\e7b6";
}
.ph-fill.ph-google-chrome-logo:before {
  content: "\e976";
}
.ph-fill.ph-google-drive-logo:before {
  content: "\e8f6";
}
.ph-fill.ph-google-logo:before {
  content: "\e292";
}
.ph-fill.ph-google-photos-logo:before {
  content: "\eb92";
}
.ph-fill.ph-google-play-logo:before {
  content: "\e294";
}
.ph-fill.ph-google-podcasts-logo:before {
  content: "\eb94";
}
.ph-fill.ph-gps:before {
  content: "\edd8";
}
.ph-fill.ph-gps-fix:before {
  content: "\edd6";
}
.ph-fill.ph-gps-slash:before {
  content: "\edd4";
}
.ph-fill.ph-gradient:before {
  content: "\eb42";
}
.ph-fill.ph-graduation-cap:before {
  content: "\e62c";
}
.ph-fill.ph-grains:before {
  content: "\ec68";
}
.ph-fill.ph-grains-slash:before {
  content: "\ec6a";
}
.ph-fill.ph-graph:before {
  content: "\eb58";
}
.ph-fill.ph-graphics-card:before {
  content: "\e612";
}
.ph-fill.ph-greater-than:before {
  content: "\edc4";
}
.ph-fill.ph-greater-than-or-equal:before {
  content: "\eda2";
}
.ph-fill.ph-grid-four:before {
  content: "\e296";
}
.ph-fill.ph-grid-nine:before {
  content: "\ec8c";
}
.ph-fill.ph-guitar:before {
  content: "\ea8a";
}
.ph-fill.ph-hair-dryer:before {
  content: "\ea66";
}
.ph-fill.ph-hamburger:before {
  content: "\e790";
}
.ph-fill.ph-hammer:before {
  content: "\e80e";
}
.ph-fill.ph-hand:before {
  content: "\e298";
}
.ph-fill.ph-hand-arrow-down:before {
  content: "\ea4e";
}
.ph-fill.ph-hand-arrow-up:before {
  content: "\ee5a";
}
.ph-fill.ph-hand-coins:before {
  content: "\ea8c";
}
.ph-fill.ph-hand-deposit:before {
  content: "\ee82";
}
.ph-fill.ph-hand-eye:before {
  content: "\ea4c";
}
.ph-fill.ph-hand-fist:before {
  content: "\e57a";
}
.ph-fill.ph-hand-grabbing:before {
  content: "\e57c";
}
.ph-fill.ph-hand-heart:before {
  content: "\e810";
}
.ph-fill.ph-hand-palm:before {
  content: "\e57e";
}
.ph-fill.ph-hand-peace:before {
  content: "\e7cc";
}
.ph-fill.ph-hand-pointing:before {
  content: "\e29a";
}
.ph-fill.ph-hand-soap:before {
  content: "\e630";
}
.ph-fill.ph-hand-swipe-left:before {
  content: "\ec94";
}
.ph-fill.ph-hand-swipe-right:before {
  content: "\ec92";
}
.ph-fill.ph-hand-tap:before {
  content: "\ec90";
}
.ph-fill.ph-hand-waving:before {
  content: "\e580";
}
.ph-fill.ph-hand-withdraw:before {
  content: "\ee80";
}
.ph-fill.ph-handbag:before {
  content: "\e29c";
}
.ph-fill.ph-handbag-simple:before {
  content: "\e62e";
}
.ph-fill.ph-hands-clapping:before {
  content: "\e6a0";
}
.ph-fill.ph-hands-praying:before {
  content: "\ecc8";
}
.ph-fill.ph-handshake:before {
  content: "\e582";
}
.ph-fill.ph-hard-drive:before {
  content: "\e29e";
}
.ph-fill.ph-hard-drives:before {
  content: "\e2a0";
}
.ph-fill.ph-hard-hat:before {
  content: "\ed46";
}
.ph-fill.ph-hash:before {
  content: "\e2a2";
}
.ph-fill.ph-hash-straight:before {
  content: "\e2a4";
}
.ph-fill.ph-head-circuit:before {
  content: "\e7d4";
}
.ph-fill.ph-headlights:before {
  content: "\e6fe";
}
.ph-fill.ph-headphones:before {
  content: "\e2a6";
}
.ph-fill.ph-headset:before {
  content: "\e584";
}
.ph-fill.ph-heart:before {
  content: "\e2a8";
}
.ph-fill.ph-heart-break:before {
  content: "\ebe8";
}
.ph-fill.ph-heart-half:before {
  content: "\ec48";
}
.ph-fill.ph-heart-straight:before {
  content: "\e2aa";
}
.ph-fill.ph-heart-straight-break:before {
  content: "\eb98";
}
.ph-fill.ph-heartbeat:before {
  content: "\e2ac";
}
.ph-fill.ph-hexagon:before {
  content: "\e2ae";
}
.ph-fill.ph-high-definition:before {
  content: "\ea8e";
}
.ph-fill.ph-high-heel:before {
  content: "\e8e8";
}
.ph-fill.ph-highlighter:before {
  content: "\ec76";
}
.ph-fill.ph-highlighter-circle:before {
  content: "\e632";
}
.ph-fill.ph-hockey:before {
  content: "\ec86";
}
.ph-fill.ph-hoodie:before {
  content: "\ecd0";
}
.ph-fill.ph-horse:before {
  content: "\e2b0";
}
.ph-fill.ph-hospital:before {
  content: "\e844";
}
.ph-fill.ph-hourglass:before {
  content: "\e2b2";
}
.ph-fill.ph-hourglass-high:before {
  content: "\e2b4";
}
.ph-fill.ph-hourglass-low:before {
  content: "\e2b6";
}
.ph-fill.ph-hourglass-medium:before {
  content: "\e2b8";
}
.ph-fill.ph-hourglass-simple:before {
  content: "\e2ba";
}
.ph-fill.ph-hourglass-simple-high:before {
  content: "\e2bc";
}
.ph-fill.ph-hourglass-simple-low:before {
  content: "\e2be";
}
.ph-fill.ph-hourglass-simple-medium:before {
  content: "\e2c0";
}
.ph-fill.ph-house:before {
  content: "\e2c2";
}
.ph-fill.ph-house-line:before {
  content: "\e2c4";
}
.ph-fill.ph-house-simple:before {
  content: "\e2c6";
}
.ph-fill.ph-hurricane:before {
  content: "\e88e";
}
.ph-fill.ph-ice-cream:before {
  content: "\e804";
}
.ph-fill.ph-identification-badge:before {
  content: "\e6f6";
}
.ph-fill.ph-identification-card:before {
  content: "\e2c8";
}
.ph-fill.ph-image:before {
  content: "\e2ca";
}
.ph-fill.ph-image-broken:before {
  content: "\e7a8";
}
.ph-fill.ph-image-square:before {
  content: "\e2cc";
}
.ph-fill.ph-images:before {
  content: "\e836";
}
.ph-fill.ph-images-square:before {
  content: "\e834";
}
.ph-fill.ph-infinity:before {
  content: "\e634";
}
.ph-fill.ph-lemniscate:before {
  content: "\e634";
}
.ph-fill.ph-info:before {
  content: "\e2ce";
}
.ph-fill.ph-instagram-logo:before {
  content: "\e2d0";
}
.ph-fill.ph-intersect:before {
  content: "\e2d2";
}
.ph-fill.ph-intersect-square:before {
  content: "\e87a";
}
.ph-fill.ph-intersect-three:before {
  content: "\ecc4";
}
.ph-fill.ph-intersection:before {
  content: "\edba";
}
.ph-fill.ph-invoice:before {
  content: "\ee42";
}
.ph-fill.ph-island:before {
  content: "\ee06";
}
.ph-fill.ph-jar:before {
  content: "\e7e0";
}
.ph-fill.ph-jar-label:before {
  content: "\e7e1";
}
.ph-fill.ph-jeep:before {
  content: "\e2d4";
}
.ph-fill.ph-joystick:before {
  content: "\ea5e";
}
.ph-fill.ph-kanban:before {
  content: "\eb54";
}
.ph-fill.ph-key:before {
  content: "\e2d6";
}
.ph-fill.ph-key-return:before {
  content: "\e782";
}
.ph-fill.ph-keyboard:before {
  content: "\e2d8";
}
.ph-fill.ph-keyhole:before {
  content: "\ea78";
}
.ph-fill.ph-knife:before {
  content: "\e636";
}
.ph-fill.ph-ladder:before {
  content: "\e9e4";
}
.ph-fill.ph-ladder-simple:before {
  content: "\ec26";
}
.ph-fill.ph-lamp:before {
  content: "\e638";
}
.ph-fill.ph-lamp-pendant:before {
  content: "\ee2e";
}
.ph-fill.ph-laptop:before {
  content: "\e586";
}
.ph-fill.ph-lasso:before {
  content: "\edc6";
}
.ph-fill.ph-lastfm-logo:before {
  content: "\e842";
}
.ph-fill.ph-layout:before {
  content: "\e6d6";
}
.ph-fill.ph-leaf:before {
  content: "\e2da";
}
.ph-fill.ph-lectern:before {
  content: "\e95a";
}
.ph-fill.ph-lego:before {
  content: "\e8c6";
}
.ph-fill.ph-lego-smiley:before {
  content: "\e8c7";
}
.ph-fill.ph-less-than:before {
  content: "\edac";
}
.ph-fill.ph-less-than-or-equal:before {
  content: "\eda4";
}
.ph-fill.ph-letter-circle-h:before {
  content: "\ebf8";
}
.ph-fill.ph-letter-circle-p:before {
  content: "\ec08";
}
.ph-fill.ph-letter-circle-v:before {
  content: "\ec14";
}
.ph-fill.ph-lifebuoy:before {
  content: "\e63a";
}
.ph-fill.ph-lightbulb:before {
  content: "\e2dc";
}
.ph-fill.ph-lightbulb-filament:before {
  content: "\e63c";
}
.ph-fill.ph-lighthouse:before {
  content: "\e9f6";
}
.ph-fill.ph-lightning:before {
  content: "\e2de";
}
.ph-fill.ph-lightning-a:before {
  content: "\ea84";
}
.ph-fill.ph-lightning-slash:before {
  content: "\e2e0";
}
.ph-fill.ph-line-segment:before {
  content: "\e6d2";
}
.ph-fill.ph-line-segments:before {
  content: "\e6d4";
}
.ph-fill.ph-line-vertical:before {
  content: "\ed70";
}
.ph-fill.ph-link:before {
  content: "\e2e2";
}
.ph-fill.ph-link-break:before {
  content: "\e2e4";
}
.ph-fill.ph-link-simple:before {
  content: "\e2e6";
}
.ph-fill.ph-link-simple-break:before {
  content: "\e2e8";
}
.ph-fill.ph-link-simple-horizontal:before {
  content: "\e2ea";
}
.ph-fill.ph-link-simple-horizontal-break:before {
  content: "\e2ec";
}
.ph-fill.ph-linkedin-logo:before {
  content: "\e2ee";
}
.ph-fill.ph-linktree-logo:before {
  content: "\edee";
}
.ph-fill.ph-linux-logo:before {
  content: "\eb02";
}
.ph-fill.ph-list:before {
  content: "\e2f0";
}
.ph-fill.ph-list-bullets:before {
  content: "\e2f2";
}
.ph-fill.ph-list-checks:before {
  content: "\eadc";
}
.ph-fill.ph-list-dashes:before {
  content: "\e2f4";
}
.ph-fill.ph-list-heart:before {
  content: "\ebde";
}
.ph-fill.ph-list-magnifying-glass:before {
  content: "\ebe0";
}
.ph-fill.ph-list-numbers:before {
  content: "\e2f6";
}
.ph-fill.ph-list-plus:before {
  content: "\e2f8";
}
.ph-fill.ph-list-star:before {
  content: "\ebdc";
}
.ph-fill.ph-lock:before {
  content: "\e2fa";
}
.ph-fill.ph-lock-key:before {
  content: "\e2fe";
}
.ph-fill.ph-lock-key-open:before {
  content: "\e300";
}
.ph-fill.ph-lock-laminated:before {
  content: "\e302";
}
.ph-fill.ph-lock-laminated-open:before {
  content: "\e304";
}
.ph-fill.ph-lock-open:before {
  content: "\e306";
}
.ph-fill.ph-lock-simple:before {
  content: "\e308";
}
.ph-fill.ph-lock-simple-open:before {
  content: "\e30a";
}
.ph-fill.ph-lockers:before {
  content: "\ecb8";
}
.ph-fill.ph-log:before {
  content: "\ed82";
}
.ph-fill.ph-magic-wand:before {
  content: "\e6b6";
}
.ph-fill.ph-magnet:before {
  content: "\e680";
}
.ph-fill.ph-magnet-straight:before {
  content: "\e682";
}
.ph-fill.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph-fill.ph-magnifying-glass-minus:before {
  content: "\e30e";
}
.ph-fill.ph-magnifying-glass-plus:before {
  content: "\e310";
}
.ph-fill.ph-mailbox:before {
  content: "\ec1e";
}
.ph-fill.ph-map-pin:before {
  content: "\e316";
}
.ph-fill.ph-map-pin-area:before {
  content: "\ee3a";
}
.ph-fill.ph-map-pin-line:before {
  content: "\e318";
}
.ph-fill.ph-map-pin-plus:before {
  content: "\e314";
}
.ph-fill.ph-map-pin-simple:before {
  content: "\ee3e";
}
.ph-fill.ph-map-pin-simple-area:before {
  content: "\ee3c";
}
.ph-fill.ph-map-pin-simple-line:before {
  content: "\ee38";
}
.ph-fill.ph-map-trifold:before {
  content: "\e31a";
}
.ph-fill.ph-markdown-logo:before {
  content: "\e508";
}
.ph-fill.ph-marker-circle:before {
  content: "\e640";
}
.ph-fill.ph-martini:before {
  content: "\e31c";
}
.ph-fill.ph-mask-happy:before {
  content: "\e9f4";
}
.ph-fill.ph-mask-sad:before {
  content: "\eb9e";
}
.ph-fill.ph-mastodon-logo:before {
  content: "\ed68";
}
.ph-fill.ph-math-operations:before {
  content: "\e31e";
}
.ph-fill.ph-matrix-logo:before {
  content: "\ed64";
}
.ph-fill.ph-medal:before {
  content: "\e320";
}
.ph-fill.ph-medal-military:before {
  content: "\ecfc";
}
.ph-fill.ph-medium-logo:before {
  content: "\e322";
}
.ph-fill.ph-megaphone:before {
  content: "\e324";
}
.ph-fill.ph-megaphone-simple:before {
  content: "\e642";
}
.ph-fill.ph-member-of:before {
  content: "\edc2";
}
.ph-fill.ph-memory:before {
  content: "\e9c4";
}
.ph-fill.ph-messenger-logo:before {
  content: "\e6d8";
}
.ph-fill.ph-meta-logo:before {
  content: "\ed02";
}
.ph-fill.ph-meteor:before {
  content: "\e9ba";
}
.ph-fill.ph-metronome:before {
  content: "\ec8e";
}
.ph-fill.ph-microphone:before {
  content: "\e326";
}
.ph-fill.ph-microphone-slash:before {
  content: "\e328";
}
.ph-fill.ph-microphone-stage:before {
  content: "\e75c";
}
.ph-fill.ph-microscope:before {
  content: "\ec7a";
}
.ph-fill.ph-microsoft-excel-logo:before {
  content: "\eb6c";
}
.ph-fill.ph-microsoft-outlook-logo:before {
  content: "\eb70";
}
.ph-fill.ph-microsoft-powerpoint-logo:before {
  content: "\eace";
}
.ph-fill.ph-microsoft-teams-logo:before {
  content: "\eb66";
}
.ph-fill.ph-microsoft-word-logo:before {
  content: "\eb6a";
}
.ph-fill.ph-minus:before {
  content: "\e32a";
}
.ph-fill.ph-minus-circle:before {
  content: "\e32c";
}
.ph-fill.ph-minus-square:before {
  content: "\ed4c";
}
.ph-fill.ph-money:before {
  content: "\e588";
}
.ph-fill.ph-money-wavy:before {
  content: "\ee68";
}
.ph-fill.ph-monitor:before {
  content: "\e32e";
}
.ph-fill.ph-monitor-arrow-up:before {
  content: "\e58a";
}
.ph-fill.ph-monitor-play:before {
  content: "\e58c";
}
.ph-fill.ph-moon:before {
  content: "\e330";
}
.ph-fill.ph-moon-stars:before {
  content: "\e58e";
}
.ph-fill.ph-moped:before {
  content: "\e824";
}
.ph-fill.ph-moped-front:before {
  content: "\e822";
}
.ph-fill.ph-mosque:before {
  content: "\ecee";
}
.ph-fill.ph-motorcycle:before {
  content: "\e80a";
}
.ph-fill.ph-mountains:before {
  content: "\e7ae";
}
.ph-fill.ph-mouse:before {
  content: "\e33a";
}
.ph-fill.ph-mouse-left-click:before {
  content: "\e334";
}
.ph-fill.ph-mouse-middle-click:before {
  content: "\e338";
}
.ph-fill.ph-mouse-right-click:before {
  content: "\e336";
}
.ph-fill.ph-mouse-scroll:before {
  content: "\e332";
}
.ph-fill.ph-mouse-simple:before {
  content: "\e644";
}
.ph-fill.ph-music-note:before {
  content: "\e33c";
}
.ph-fill.ph-music-note-simple:before {
  content: "\e33e";
}
.ph-fill.ph-music-notes:before {
  content: "\e340";
}
.ph-fill.ph-music-notes-minus:before {
  content: "\ee0c";
}
.ph-fill.ph-music-notes-plus:before {
  content: "\eb7c";
}
.ph-fill.ph-music-notes-simple:before {
  content: "\e342";
}
.ph-fill.ph-navigation-arrow:before {
  content: "\eade";
}
.ph-fill.ph-needle:before {
  content: "\e82e";
}
.ph-fill.ph-network:before {
  content: "\edde";
}
.ph-fill.ph-network-slash:before {
  content: "\eddc";
}
.ph-fill.ph-network-x:before {
  content: "\edda";
}
.ph-fill.ph-newspaper:before {
  content: "\e344";
}
.ph-fill.ph-newspaper-clipping:before {
  content: "\e346";
}
.ph-fill.ph-not-equals:before {
  content: "\eda6";
}
.ph-fill.ph-not-member-of:before {
  content: "\edae";
}
.ph-fill.ph-not-subset-of:before {
  content: "\edb0";
}
.ph-fill.ph-not-superset-of:before {
  content: "\edb2";
}
.ph-fill.ph-notches:before {
  content: "\ed3a";
}
.ph-fill.ph-note:before {
  content: "\e348";
}
.ph-fill.ph-note-blank:before {
  content: "\e34a";
}
.ph-fill.ph-note-pencil:before {
  content: "\e34c";
}
.ph-fill.ph-notebook:before {
  content: "\e34e";
}
.ph-fill.ph-notepad:before {
  content: "\e63e";
}
.ph-fill.ph-notification:before {
  content: "\e6fa";
}
.ph-fill.ph-notion-logo:before {
  content: "\e9a0";
}
.ph-fill.ph-nuclear-plant:before {
  content: "\ed7c";
}
.ph-fill.ph-number-circle-eight:before {
  content: "\e352";
}
.ph-fill.ph-number-circle-five:before {
  content: "\e358";
}
.ph-fill.ph-number-circle-four:before {
  content: "\e35e";
}
.ph-fill.ph-number-circle-nine:before {
  content: "\e364";
}
.ph-fill.ph-number-circle-one:before {
  content: "\e36a";
}
.ph-fill.ph-number-circle-seven:before {
  content: "\e370";
}
.ph-fill.ph-number-circle-six:before {
  content: "\e376";
}
.ph-fill.ph-number-circle-three:before {
  content: "\e37c";
}
.ph-fill.ph-number-circle-two:before {
  content: "\e382";
}
.ph-fill.ph-number-circle-zero:before {
  content: "\e388";
}
.ph-fill.ph-number-eight:before {
  content: "\e350";
}
.ph-fill.ph-number-five:before {
  content: "\e356";
}
.ph-fill.ph-number-four:before {
  content: "\e35c";
}
.ph-fill.ph-number-nine:before {
  content: "\e362";
}
.ph-fill.ph-number-one:before {
  content: "\e368";
}
.ph-fill.ph-number-seven:before {
  content: "\e36e";
}
.ph-fill.ph-number-six:before {
  content: "\e374";
}
.ph-fill.ph-number-square-eight:before {
  content: "\e354";
}
.ph-fill.ph-number-square-five:before {
  content: "\e35a";
}
.ph-fill.ph-number-square-four:before {
  content: "\e360";
}
.ph-fill.ph-number-square-nine:before {
  content: "\e366";
}
.ph-fill.ph-number-square-one:before {
  content: "\e36c";
}
.ph-fill.ph-number-square-seven:before {
  content: "\e372";
}
.ph-fill.ph-number-square-six:before {
  content: "\e378";
}
.ph-fill.ph-number-square-three:before {
  content: "\e37e";
}
.ph-fill.ph-number-square-two:before {
  content: "\e384";
}
.ph-fill.ph-number-square-zero:before {
  content: "\e38a";
}
.ph-fill.ph-number-three:before {
  content: "\e37a";
}
.ph-fill.ph-number-two:before {
  content: "\e380";
}
.ph-fill.ph-number-zero:before {
  content: "\e386";
}
.ph-fill.ph-numpad:before {
  content: "\e3c8";
}
.ph-fill.ph-nut:before {
  content: "\e38c";
}
.ph-fill.ph-ny-times-logo:before {
  content: "\e646";
}
.ph-fill.ph-octagon:before {
  content: "\e38e";
}
.ph-fill.ph-office-chair:before {
  content: "\ea46";
}
.ph-fill.ph-onigiri:before {
  content: "\ee2c";
}
.ph-fill.ph-open-ai-logo:before {
  content: "\e7d2";
}
.ph-fill.ph-option:before {
  content: "\e8a8";
}
.ph-fill.ph-orange:before {
  content: "\ee40";
}
.ph-fill.ph-orange-slice:before {
  content: "\ed36";
}
.ph-fill.ph-oven:before {
  content: "\ed8c";
}
.ph-fill.ph-package:before {
  content: "\e390";
}
.ph-fill.ph-paint-brush:before {
  content: "\e6f0";
}
.ph-fill.ph-paint-brush-broad:before {
  content: "\e590";
}
.ph-fill.ph-paint-brush-household:before {
  content: "\e6f2";
}
.ph-fill.ph-paint-bucket:before {
  content: "\e392";
}
.ph-fill.ph-paint-roller:before {
  content: "\e6f4";
}
.ph-fill.ph-palette:before {
  content: "\e6c8";
}
.ph-fill.ph-panorama:before {
  content: "\eaa2";
}
.ph-fill.ph-pants:before {
  content: "\ec88";
}
.ph-fill.ph-paper-plane:before {
  content: "\e394";
}
.ph-fill.ph-paper-plane-right:before {
  content: "\e396";
}
.ph-fill.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph-fill.ph-paperclip:before {
  content: "\e39a";
}
.ph-fill.ph-paperclip-horizontal:before {
  content: "\e592";
}
.ph-fill.ph-parachute:before {
  content: "\ea7c";
}
.ph-fill.ph-paragraph:before {
  content: "\e960";
}
.ph-fill.ph-parallelogram:before {
  content: "\ecc6";
}
.ph-fill.ph-park:before {
  content: "\ecb2";
}
.ph-fill.ph-password:before {
  content: "\e752";
}
.ph-fill.ph-path:before {
  content: "\e39c";
}
.ph-fill.ph-patreon-logo:before {
  content: "\e98a";
}
.ph-fill.ph-pause:before {
  content: "\e39e";
}
.ph-fill.ph-pause-circle:before {
  content: "\e3a0";
}
.ph-fill.ph-paw-print:before {
  content: "\e648";
}
.ph-fill.ph-paypal-logo:before {
  content: "\e98c";
}
.ph-fill.ph-peace:before {
  content: "\e3a2";
}
.ph-fill.ph-pen:before {
  content: "\e3aa";
}
.ph-fill.ph-pen-nib:before {
  content: "\e3ac";
}
.ph-fill.ph-pen-nib-straight:before {
  content: "\e64a";
}
.ph-fill.ph-pencil:before {
  content: "\e3ae";
}
.ph-fill.ph-pencil-circle:before {
  content: "\e3b0";
}
.ph-fill.ph-pencil-line:before {
  content: "\e3b2";
}
.ph-fill.ph-pencil-ruler:before {
  content: "\e906";
}
.ph-fill.ph-pencil-simple:before {
  content: "\e3b4";
}
.ph-fill.ph-pencil-simple-line:before {
  content: "\ebc6";
}
.ph-fill.ph-pencil-simple-slash:before {
  content: "\ecf6";
}
.ph-fill.ph-pencil-slash:before {
  content: "\ecf8";
}
.ph-fill.ph-pentagon:before {
  content: "\ec7e";
}
.ph-fill.ph-pentagram:before {
  content: "\ec5c";
}
.ph-fill.ph-pepper:before {
  content: "\e94a";
}
.ph-fill.ph-percent:before {
  content: "\e3b6";
}
.ph-fill.ph-person:before {
  content: "\e3a8";
}
.ph-fill.ph-person-arms-spread:before {
  content: "\ecfe";
}
.ph-fill.ph-person-simple:before {
  content: "\e72e";
}
.ph-fill.ph-person-simple-bike:before {
  content: "\e734";
}
.ph-fill.ph-person-simple-circle:before {
  content: "\ee58";
}
.ph-fill.ph-person-simple-hike:before {
  content: "\ed54";
}
.ph-fill.ph-person-simple-run:before {
  content: "\e730";
}
.ph-fill.ph-person-simple-ski:before {
  content: "\e71c";
}
.ph-fill.ph-person-simple-snowboard:before {
  content: "\e71e";
}
.ph-fill.ph-person-simple-swim:before {
  content: "\e736";
}
.ph-fill.ph-person-simple-tai-chi:before {
  content: "\ed5c";
}
.ph-fill.ph-person-simple-throw:before {
  content: "\e732";
}
.ph-fill.ph-person-simple-walk:before {
  content: "\e73a";
}
.ph-fill.ph-perspective:before {
  content: "\ebe6";
}
.ph-fill.ph-phone:before {
  content: "\e3b8";
}
.ph-fill.ph-phone-call:before {
  content: "\e3ba";
}
.ph-fill.ph-phone-disconnect:before {
  content: "\e3bc";
}
.ph-fill.ph-phone-incoming:before {
  content: "\e3be";
}
.ph-fill.ph-phone-list:before {
  content: "\e3cc";
}
.ph-fill.ph-phone-outgoing:before {
  content: "\e3c0";
}
.ph-fill.ph-phone-pause:before {
  content: "\e3ca";
}
.ph-fill.ph-phone-plus:before {
  content: "\ec56";
}
.ph-fill.ph-phone-slash:before {
  content: "\e3c2";
}
.ph-fill.ph-phone-transfer:before {
  content: "\e3c6";
}
.ph-fill.ph-phone-x:before {
  content: "\e3c4";
}
.ph-fill.ph-phosphor-logo:before {
  content: "\e3ce";
}
.ph-fill.ph-pi:before {
  content: "\ec80";
}
.ph-fill.ph-piano-keys:before {
  content: "\e9c8";
}
.ph-fill.ph-picnic-table:before {
  content: "\ee26";
}
.ph-fill.ph-picture-in-picture:before {
  content: "\e64c";
}
.ph-fill.ph-piggy-bank:before {
  content: "\ea04";
}
.ph-fill.ph-pill:before {
  content: "\e700";
}
.ph-fill.ph-ping-pong:before {
  content: "\ea42";
}
.ph-fill.ph-pint-glass:before {
  content: "\edd0";
}
.ph-fill.ph-pinterest-logo:before {
  content: "\e64e";
}
.ph-fill.ph-pinwheel:before {
  content: "\eb9c";
}
.ph-fill.ph-pipe:before {
  content: "\ed86";
}
.ph-fill.ph-pipe-wrench:before {
  content: "\ed88";
}
.ph-fill.ph-pix-logo:before {
  content: "\ecc2";
}
.ph-fill.ph-pizza:before {
  content: "\e796";
}
.ph-fill.ph-placeholder:before {
  content: "\e650";
}
.ph-fill.ph-planet:before {
  content: "\e652";
}
.ph-fill.ph-plant:before {
  content: "\ebae";
}
.ph-fill.ph-play:before {
  content: "\e3d0";
}
.ph-fill.ph-play-circle:before {
  content: "\e3d2";
}
.ph-fill.ph-play-pause:before {
  content: "\e8be";
}
.ph-fill.ph-playlist:before {
  content: "\e6aa";
}
.ph-fill.ph-plug:before {
  content: "\e946";
}
.ph-fill.ph-plug-charging:before {
  content: "\eb5c";
}
.ph-fill.ph-plugs:before {
  content: "\eb56";
}
.ph-fill.ph-plugs-connected:before {
  content: "\eb5a";
}
.ph-fill.ph-plus:before {
  content: "\e3d4";
}
.ph-fill.ph-plus-circle:before {
  content: "\e3d6";
}
.ph-fill.ph-plus-minus:before {
  content: "\e3d8";
}
.ph-fill.ph-plus-square:before {
  content: "\ed4a";
}
.ph-fill.ph-poker-chip:before {
  content: "\e594";
}
.ph-fill.ph-police-car:before {
  content: "\ec4a";
}
.ph-fill.ph-polygon:before {
  content: "\e6d0";
}
.ph-fill.ph-popcorn:before {
  content: "\eb4e";
}
.ph-fill.ph-popsicle:before {
  content: "\ebbe";
}
.ph-fill.ph-potted-plant:before {
  content: "\ec22";
}
.ph-fill.ph-power:before {
  content: "\e3da";
}
.ph-fill.ph-prescription:before {
  content: "\e7a2";
}
.ph-fill.ph-presentation:before {
  content: "\e654";
}
.ph-fill.ph-presentation-chart:before {
  content: "\e656";
}
.ph-fill.ph-printer:before {
  content: "\e3dc";
}
.ph-fill.ph-prohibit:before {
  content: "\e3de";
}
.ph-fill.ph-prohibit-inset:before {
  content: "\e3e0";
}
.ph-fill.ph-projector-screen:before {
  content: "\e658";
}
.ph-fill.ph-projector-screen-chart:before {
  content: "\e65a";
}
.ph-fill.ph-pulse:before {
  content: "\e000";
}
.ph-fill.ph-activity:before {
  content: "\e000";
}
.ph-fill.ph-push-pin:before {
  content: "\e3e2";
}
.ph-fill.ph-push-pin-simple:before {
  content: "\e65c";
}
.ph-fill.ph-push-pin-simple-slash:before {
  content: "\e65e";
}
.ph-fill.ph-push-pin-slash:before {
  content: "\e3e4";
}
.ph-fill.ph-puzzle-piece:before {
  content: "\e596";
}
.ph-fill.ph-qr-code:before {
  content: "\e3e6";
}
.ph-fill.ph-question:before {
  content: "\e3e8";
}
.ph-fill.ph-question-mark:before {
  content: "\e3e9";
}
.ph-fill.ph-queue:before {
  content: "\e6ac";
}
.ph-fill.ph-quotes:before {
  content: "\e660";
}
.ph-fill.ph-rabbit:before {
  content: "\eac2";
}
.ph-fill.ph-racquet:before {
  content: "\ee02";
}
.ph-fill.ph-radical:before {
  content: "\e3ea";
}
.ph-fill.ph-radio:before {
  content: "\e77e";
}
.ph-fill.ph-radio-button:before {
  content: "\eb08";
}
.ph-fill.ph-radioactive:before {
  content: "\e9dc";
}
.ph-fill.ph-rainbow:before {
  content: "\e598";
}
.ph-fill.ph-rainbow-cloud:before {
  content: "\e59a";
}
.ph-fill.ph-ranking:before {
  content: "\ed62";
}
.ph-fill.ph-read-cv-logo:before {
  content: "\ed0c";
}
.ph-fill.ph-receipt:before {
  content: "\e3ec";
}
.ph-fill.ph-receipt-x:before {
  content: "\ed40";
}
.ph-fill.ph-record:before {
  content: "\e3ee";
}
.ph-fill.ph-rectangle:before {
  content: "\e3f0";
}
.ph-fill.ph-rectangle-dashed:before {
  content: "\e3f2";
}
.ph-fill.ph-recycle:before {
  content: "\e75a";
}
.ph-fill.ph-reddit-logo:before {
  content: "\e59c";
}
.ph-fill.ph-repeat:before {
  content: "\e3f6";
}
.ph-fill.ph-repeat-once:before {
  content: "\e3f8";
}
.ph-fill.ph-replit-logo:before {
  content: "\eb8a";
}
.ph-fill.ph-resize:before {
  content: "\ed6e";
}
.ph-fill.ph-rewind:before {
  content: "\e6a8";
}
.ph-fill.ph-rewind-circle:before {
  content: "\e3fa";
}
.ph-fill.ph-road-horizon:before {
  content: "\e838";
}
.ph-fill.ph-robot:before {
  content: "\e762";
}
.ph-fill.ph-rocket:before {
  content: "\e3fc";
}
.ph-fill.ph-rocket-launch:before {
  content: "\e3fe";
}
.ph-fill.ph-rows:before {
  content: "\e5a2";
}
.ph-fill.ph-rows-plus-bottom:before {
  content: "\e59e";
}
.ph-fill.ph-rows-plus-top:before {
  content: "\e5a0";
}
.ph-fill.ph-rss:before {
  content: "\e400";
}
.ph-fill.ph-rss-simple:before {
  content: "\e402";
}
.ph-fill.ph-rug:before {
  content: "\ea1a";
}
.ph-fill.ph-ruler:before {
  content: "\e6b8";
}
.ph-fill.ph-sailboat:before {
  content: "\e78a";
}
.ph-fill.ph-scales:before {
  content: "\e750";
}
.ph-fill.ph-scan:before {
  content: "\ebb6";
}
.ph-fill.ph-scan-smiley:before {
  content: "\ebb4";
}
.ph-fill.ph-scissors:before {
  content: "\eae0";
}
.ph-fill.ph-scooter:before {
  content: "\e820";
}
.ph-fill.ph-screencast:before {
  content: "\e404";
}
.ph-fill.ph-screwdriver:before {
  content: "\e86e";
}
.ph-fill.ph-scribble:before {
  content: "\e806";
}
.ph-fill.ph-scribble-loop:before {
  content: "\e662";
}
.ph-fill.ph-scroll:before {
  content: "\eb7a";
}
.ph-fill.ph-seal:before {
  content: "\e604";
}
.ph-fill.ph-circle-wavy:before {
  content: "\e604";
}
.ph-fill.ph-seal-check:before {
  content: "\e606";
}
.ph-fill.ph-circle-wavy-check:before {
  content: "\e606";
}
.ph-fill.ph-seal-percent:before {
  content: "\e60a";
}
.ph-fill.ph-seal-question:before {
  content: "\e608";
}
.ph-fill.ph-circle-wavy-question:before {
  content: "\e608";
}
.ph-fill.ph-seal-warning:before {
  content: "\e60c";
}
.ph-fill.ph-circle-wavy-warning:before {
  content: "\e60c";
}
.ph-fill.ph-seat:before {
  content: "\eb8e";
}
.ph-fill.ph-seatbelt:before {
  content: "\edfe";
}
.ph-fill.ph-security-camera:before {
  content: "\eca4";
}
.ph-fill.ph-selection:before {
  content: "\e69a";
}
.ph-fill.ph-selection-all:before {
  content: "\e746";
}
.ph-fill.ph-selection-background:before {
  content: "\eaf8";
}
.ph-fill.ph-selection-foreground:before {
  content: "\eaf6";
}
.ph-fill.ph-selection-inverse:before {
  content: "\e744";
}
.ph-fill.ph-selection-plus:before {
  content: "\e69c";
}
.ph-fill.ph-selection-slash:before {
  content: "\e69e";
}
.ph-fill.ph-shapes:before {
  content: "\ec5e";
}
.ph-fill.ph-share:before {
  content: "\e406";
}
.ph-fill.ph-share-fat:before {
  content: "\ed52";
}
.ph-fill.ph-share-network:before {
  content: "\e408";
}
.ph-fill.ph-shield:before {
  content: "\e40a";
}
.ph-fill.ph-shield-check:before {
  content: "\e40c";
}
.ph-fill.ph-shield-checkered:before {
  content: "\e708";
}
.ph-fill.ph-shield-chevron:before {
  content: "\e40e";
}
.ph-fill.ph-shield-plus:before {
  content: "\e706";
}
.ph-fill.ph-shield-slash:before {
  content: "\e410";
}
.ph-fill.ph-shield-star:before {
  content: "\ec34";
}
.ph-fill.ph-shield-warning:before {
  content: "\e412";
}
.ph-fill.ph-shipping-container:before {
  content: "\e78c";
}
.ph-fill.ph-shirt-folded:before {
  content: "\ea92";
}
.ph-fill.ph-shooting-star:before {
  content: "\ecfa";
}
.ph-fill.ph-shopping-bag:before {
  content: "\e416";
}
.ph-fill.ph-shopping-bag-open:before {
  content: "\e418";
}
.ph-fill.ph-shopping-cart:before {
  content: "\e41e";
}
.ph-fill.ph-shopping-cart-simple:before {
  content: "\e420";
}
.ph-fill.ph-shovel:before {
  content: "\e9e6";
}
.ph-fill.ph-shower:before {
  content: "\e776";
}
.ph-fill.ph-shrimp:before {
  content: "\eab4";
}
.ph-fill.ph-shuffle:before {
  content: "\e422";
}
.ph-fill.ph-shuffle-angular:before {
  content: "\e424";
}
.ph-fill.ph-shuffle-simple:before {
  content: "\e426";
}
.ph-fill.ph-sidebar:before {
  content: "\eab6";
}
.ph-fill.ph-sidebar-simple:before {
  content: "\ec24";
}
.ph-fill.ph-sigma:before {
  content: "\eab8";
}
.ph-fill.ph-sign-in:before {
  content: "\e428";
}
.ph-fill.ph-sign-out:before {
  content: "\e42a";
}
.ph-fill.ph-signature:before {
  content: "\ebac";
}
.ph-fill.ph-signpost:before {
  content: "\e89c";
}
.ph-fill.ph-sim-card:before {
  content: "\e664";
}
.ph-fill.ph-siren:before {
  content: "\e9b8";
}
.ph-fill.ph-sketch-logo:before {
  content: "\e42c";
}
.ph-fill.ph-skip-back:before {
  content: "\e5a4";
}
.ph-fill.ph-skip-back-circle:before {
  content: "\e42e";
}
.ph-fill.ph-skip-forward:before {
  content: "\e5a6";
}
.ph-fill.ph-skip-forward-circle:before {
  content: "\e430";
}
.ph-fill.ph-skull:before {
  content: "\e916";
}
.ph-fill.ph-skype-logo:before {
  content: "\e8dc";
}
.ph-fill.ph-slack-logo:before {
  content: "\e5a8";
}
.ph-fill.ph-sliders:before {
  content: "\e432";
}
.ph-fill.ph-sliders-horizontal:before {
  content: "\e434";
}
.ph-fill.ph-slideshow:before {
  content: "\ed32";
}
.ph-fill.ph-smiley:before {
  content: "\e436";
}
.ph-fill.ph-smiley-angry:before {
  content: "\ec62";
}
.ph-fill.ph-smiley-blank:before {
  content: "\e438";
}
.ph-fill.ph-smiley-meh:before {
  content: "\e43a";
}
.ph-fill.ph-smiley-melting:before {
  content: "\ee56";
}
.ph-fill.ph-smiley-nervous:before {
  content: "\e43c";
}
.ph-fill.ph-smiley-sad:before {
  content: "\e43e";
}
.ph-fill.ph-smiley-sticker:before {
  content: "\e440";
}
.ph-fill.ph-smiley-wink:before {
  content: "\e666";
}
.ph-fill.ph-smiley-x-eyes:before {
  content: "\e442";
}
.ph-fill.ph-snapchat-logo:before {
  content: "\e668";
}
.ph-fill.ph-sneaker:before {
  content: "\e80c";
}
.ph-fill.ph-sneaker-move:before {
  content: "\ed60";
}
.ph-fill.ph-snowflake:before {
  content: "\e5aa";
}
.ph-fill.ph-soccer-ball:before {
  content: "\e716";
}
.ph-fill.ph-sock:before {
  content: "\ecce";
}
.ph-fill.ph-solar-panel:before {
  content: "\ed7a";
}
.ph-fill.ph-solar-roof:before {
  content: "\ed7b";
}
.ph-fill.ph-sort-ascending:before {
  content: "\e444";
}
.ph-fill.ph-sort-descending:before {
  content: "\e446";
}
.ph-fill.ph-soundcloud-logo:before {
  content: "\e8de";
}
.ph-fill.ph-spade:before {
  content: "\e448";
}
.ph-fill.ph-sparkle:before {
  content: "\e6a2";
}
.ph-fill.ph-speaker-hifi:before {
  content: "\ea08";
}
.ph-fill.ph-speaker-high:before {
  content: "\e44a";
}
.ph-fill.ph-speaker-low:before {
  content: "\e44c";
}
.ph-fill.ph-speaker-none:before {
  content: "\e44e";
}
.ph-fill.ph-speaker-simple-high:before {
  content: "\e450";
}
.ph-fill.ph-speaker-simple-low:before {
  content: "\e452";
}
.ph-fill.ph-speaker-simple-none:before {
  content: "\e454";
}
.ph-fill.ph-speaker-simple-slash:before {
  content: "\e456";
}
.ph-fill.ph-speaker-simple-x:before {
  content: "\e458";
}
.ph-fill.ph-speaker-slash:before {
  content: "\e45a";
}
.ph-fill.ph-speaker-x:before {
  content: "\e45c";
}
.ph-fill.ph-speedometer:before {
  content: "\ee74";
}
.ph-fill.ph-sphere:before {
  content: "\ee66";
}
.ph-fill.ph-spinner:before {
  content: "\e66a";
}
.ph-fill.ph-spinner-ball:before {
  content: "\ee28";
}
.ph-fill.ph-spinner-gap:before {
  content: "\e66c";
}
.ph-fill.ph-spiral:before {
  content: "\e9fa";
}
.ph-fill.ph-split-horizontal:before {
  content: "\e872";
}
.ph-fill.ph-split-vertical:before {
  content: "\e876";
}
.ph-fill.ph-spotify-logo:before {
  content: "\e66e";
}
.ph-fill.ph-spray-bottle:before {
  content: "\e7e4";
}
.ph-fill.ph-square:before {
  content: "\e45e";
}
.ph-fill.ph-square-half:before {
  content: "\e462";
}
.ph-fill.ph-square-half-bottom:before {
  content: "\eb16";
}
.ph-fill.ph-square-logo:before {
  content: "\e690";
}
.ph-fill.ph-square-split-horizontal:before {
  content: "\e870";
}
.ph-fill.ph-square-split-vertical:before {
  content: "\e874";
}
.ph-fill.ph-squares-four:before {
  content: "\e464";
}
.ph-fill.ph-stack:before {
  content: "\e466";
}
.ph-fill.ph-stack-minus:before {
  content: "\edf4";
}
.ph-fill.ph-stack-overflow-logo:before {
  content: "\eb78";
}
.ph-fill.ph-stack-plus:before {
  content: "\edf6";
}
.ph-fill.ph-stack-simple:before {
  content: "\e468";
}
.ph-fill.ph-stairs:before {
  content: "\e8ec";
}
.ph-fill.ph-stamp:before {
  content: "\ea48";
}
.ph-fill.ph-standard-definition:before {
  content: "\ea90";
}
.ph-fill.ph-star:before {
  content: "\e46a";
}
.ph-fill.ph-star-and-crescent:before {
  content: "\ecf4";
}
.ph-fill.ph-star-four:before {
  content: "\e6a4";
}
.ph-fill.ph-star-half:before {
  content: "\e70a";
}
.ph-fill.ph-star-of-david:before {
  content: "\e89e";
}
.ph-fill.ph-steam-logo:before {
  content: "\ead4";
}
.ph-fill.ph-steering-wheel:before {
  content: "\e9ac";
}
.ph-fill.ph-steps:before {
  content: "\ecbe";
}
.ph-fill.ph-stethoscope:before {
  content: "\e7ea";
}
.ph-fill.ph-sticker:before {
  content: "\e5ac";
}
.ph-fill.ph-stool:before {
  content: "\ea44";
}
.ph-fill.ph-stop:before {
  content: "\e46c";
}
.ph-fill.ph-stop-circle:before {
  content: "\e46e";
}
.ph-fill.ph-storefront:before {
  content: "\e470";
}
.ph-fill.ph-strategy:before {
  content: "\ea3a";
}
.ph-fill.ph-stripe-logo:before {
  content: "\e698";
}
.ph-fill.ph-student:before {
  content: "\e73e";
}
.ph-fill.ph-subset-of:before {
  content: "\edc0";
}
.ph-fill.ph-subset-proper-of:before {
  content: "\edb6";
}
.ph-fill.ph-subtitles:before {
  content: "\e1a8";
}
.ph-fill.ph-subtitles-slash:before {
  content: "\e1a6";
}
.ph-fill.ph-subtract:before {
  content: "\ebd6";
}
.ph-fill.ph-subtract-square:before {
  content: "\ebd4";
}
.ph-fill.ph-subway:before {
  content: "\e498";
}
.ph-fill.ph-suitcase:before {
  content: "\e5ae";
}
.ph-fill.ph-suitcase-rolling:before {
  content: "\e9b0";
}
.ph-fill.ph-suitcase-simple:before {
  content: "\e5b0";
}
.ph-fill.ph-sun:before {
  content: "\e472";
}
.ph-fill.ph-sun-dim:before {
  content: "\e474";
}
.ph-fill.ph-sun-horizon:before {
  content: "\e5b6";
}
.ph-fill.ph-sunglasses:before {
  content: "\e816";
}
.ph-fill.ph-superset-of:before {
  content: "\edb8";
}
.ph-fill.ph-superset-proper-of:before {
  content: "\edb4";
}
.ph-fill.ph-swap:before {
  content: "\e83c";
}
.ph-fill.ph-swatches:before {
  content: "\e5b8";
}
.ph-fill.ph-swimming-pool:before {
  content: "\ecb6";
}
.ph-fill.ph-sword:before {
  content: "\e5ba";
}
.ph-fill.ph-synagogue:before {
  content: "\ecec";
}
.ph-fill.ph-syringe:before {
  content: "\e968";
}
.ph-fill.ph-t-shirt:before {
  content: "\e670";
}
.ph-fill.ph-table:before {
  content: "\e476";
}
.ph-fill.ph-tabs:before {
  content: "\e778";
}
.ph-fill.ph-tag:before {
  content: "\e478";
}
.ph-fill.ph-tag-chevron:before {
  content: "\e672";
}
.ph-fill.ph-tag-simple:before {
  content: "\e47a";
}
.ph-fill.ph-target:before {
  content: "\e47c";
}
.ph-fill.ph-taxi:before {
  content: "\e902";
}
.ph-fill.ph-tea-bag:before {
  content: "\e8e6";
}
.ph-fill.ph-telegram-logo:before {
  content: "\e5bc";
}
.ph-fill.ph-television:before {
  content: "\e754";
}
.ph-fill.ph-television-simple:before {
  content: "\eae6";
}
.ph-fill.ph-tennis-ball:before {
  content: "\e720";
}
.ph-fill.ph-tent:before {
  content: "\e8ba";
}
.ph-fill.ph-terminal:before {
  content: "\e47e";
}
.ph-fill.ph-terminal-window:before {
  content: "\eae8";
}
.ph-fill.ph-test-tube:before {
  content: "\e7a0";
}
.ph-fill.ph-text-a-underline:before {
  content: "\ed34";
}
.ph-fill.ph-text-aa:before {
  content: "\e6ee";
}
.ph-fill.ph-text-align-center:before {
  content: "\e480";
}
.ph-fill.ph-text-align-justify:before {
  content: "\e482";
}
.ph-fill.ph-text-align-left:before {
  content: "\e484";
}
.ph-fill.ph-text-align-right:before {
  content: "\e486";
}
.ph-fill.ph-text-b:before {
  content: "\e5be";
}
.ph-fill.ph-text-bolder:before {
  content: "\e5be";
}
.ph-fill.ph-text-columns:before {
  content: "\ec96";
}
.ph-fill.ph-text-h:before {
  content: "\e6ba";
}
.ph-fill.ph-text-h-five:before {
  content: "\e6c4";
}
.ph-fill.ph-text-h-four:before {
  content: "\e6c2";
}
.ph-fill.ph-text-h-one:before {
  content: "\e6bc";
}
.ph-fill.ph-text-h-six:before {
  content: "\e6c6";
}
.ph-fill.ph-text-h-three:before {
  content: "\e6c0";
}
.ph-fill.ph-text-h-two:before {
  content: "\e6be";
}
.ph-fill.ph-text-indent:before {
  content: "\ea1e";
}
.ph-fill.ph-text-italic:before {
  content: "\e5c0";
}
.ph-fill.ph-text-outdent:before {
  content: "\ea1c";
}
.ph-fill.ph-text-strikethrough:before {
  content: "\e5c2";
}
.ph-fill.ph-text-subscript:before {
  content: "\ec98";
}
.ph-fill.ph-text-superscript:before {
  content: "\ec9a";
}
.ph-fill.ph-text-t:before {
  content: "\e48a";
}
.ph-fill.ph-text-t-slash:before {
  content: "\e488";
}
.ph-fill.ph-text-underline:before {
  content: "\e5c4";
}
.ph-fill.ph-textbox:before {
  content: "\eb0a";
}
.ph-fill.ph-thermometer:before {
  content: "\e5c6";
}
.ph-fill.ph-thermometer-cold:before {
  content: "\e5c8";
}
.ph-fill.ph-thermometer-hot:before {
  content: "\e5ca";
}
.ph-fill.ph-thermometer-simple:before {
  content: "\e5cc";
}
.ph-fill.ph-threads-logo:before {
  content: "\ed9e";
}
.ph-fill.ph-three-d:before {
  content: "\ea5a";
}
.ph-fill.ph-thumbs-down:before {
  content: "\e48c";
}
.ph-fill.ph-thumbs-up:before {
  content: "\e48e";
}
.ph-fill.ph-ticket:before {
  content: "\e490";
}
.ph-fill.ph-tidal-logo:before {
  content: "\ed1c";
}
.ph-fill.ph-tiktok-logo:before {
  content: "\eaf2";
}
.ph-fill.ph-tilde:before {
  content: "\eda8";
}
.ph-fill.ph-timer:before {
  content: "\e492";
}
.ph-fill.ph-tip-jar:before {
  content: "\e7e2";
}
.ph-fill.ph-tipi:before {
  content: "\ed30";
}
.ph-fill.ph-tire:before {
  content: "\edd2";
}
.ph-fill.ph-toggle-left:before {
  content: "\e674";
}
.ph-fill.ph-toggle-right:before {
  content: "\e676";
}
.ph-fill.ph-toilet:before {
  content: "\e79a";
}
.ph-fill.ph-toilet-paper:before {
  content: "\e79c";
}
.ph-fill.ph-toolbox:before {
  content: "\eca0";
}
.ph-fill.ph-tooth:before {
  content: "\e9cc";
}
.ph-fill.ph-tornado:before {
  content: "\e88c";
}
.ph-fill.ph-tote:before {
  content: "\e494";
}
.ph-fill.ph-tote-simple:before {
  content: "\e678";
}
.ph-fill.ph-towel:before {
  content: "\ede6";
}
.ph-fill.ph-tractor:before {
  content: "\ec6e";
}
.ph-fill.ph-trademark:before {
  content: "\e9f0";
}
.ph-fill.ph-trademark-registered:before {
  content: "\e3f4";
}
.ph-fill.ph-traffic-cone:before {
  content: "\e9a8";
}
.ph-fill.ph-traffic-sign:before {
  content: "\e67a";
}
.ph-fill.ph-traffic-signal:before {
  content: "\e9aa";
}
.ph-fill.ph-train:before {
  content: "\e496";
}
.ph-fill.ph-train-regional:before {
  content: "\e49e";
}
.ph-fill.ph-train-simple:before {
  content: "\e4a0";
}
.ph-fill.ph-tram:before {
  content: "\e9ec";
}
.ph-fill.ph-translate:before {
  content: "\e4a2";
}
.ph-fill.ph-trash:before {
  content: "\e4a6";
}
.ph-fill.ph-trash-simple:before {
  content: "\e4a8";
}
.ph-fill.ph-tray:before {
  content: "\e4aa";
}
.ph-fill.ph-tray-arrow-down:before {
  content: "\e010";
}
.ph-fill.ph-archive-tray:before {
  content: "\e010";
}
.ph-fill.ph-tray-arrow-up:before {
  content: "\ee52";
}
.ph-fill.ph-treasure-chest:before {
  content: "\ede2";
}
.ph-fill.ph-tree:before {
  content: "\e6da";
}
.ph-fill.ph-tree-evergreen:before {
  content: "\e6dc";
}
.ph-fill.ph-tree-palm:before {
  content: "\e91a";
}
.ph-fill.ph-tree-structure:before {
  content: "\e67c";
}
.ph-fill.ph-tree-view:before {
  content: "\ee48";
}
.ph-fill.ph-trend-down:before {
  content: "\e4ac";
}
.ph-fill.ph-trend-up:before {
  content: "\e4ae";
}
.ph-fill.ph-triangle:before {
  content: "\e4b0";
}
.ph-fill.ph-triangle-dashed:before {
  content: "\e4b2";
}
.ph-fill.ph-trolley:before {
  content: "\e5b2";
}
.ph-fill.ph-trolley-suitcase:before {
  content: "\e5b4";
}
.ph-fill.ph-trophy:before {
  content: "\e67e";
}
.ph-fill.ph-truck:before {
  content: "\e4b4";
}
.ph-fill.ph-truck-trailer:before {
  content: "\e4b6";
}
.ph-fill.ph-tumblr-logo:before {
  content: "\e8d4";
}
.ph-fill.ph-twitch-logo:before {
  content: "\e5ce";
}
.ph-fill.ph-twitter-logo:before {
  content: "\e4ba";
}
.ph-fill.ph-umbrella:before {
  content: "\e684";
}
.ph-fill.ph-umbrella-simple:before {
  content: "\e686";
}
.ph-fill.ph-union:before {
  content: "\edbe";
}
.ph-fill.ph-unite:before {
  content: "\e87e";
}
.ph-fill.ph-unite-square:before {
  content: "\e878";
}
.ph-fill.ph-upload:before {
  content: "\e4be";
}
.ph-fill.ph-upload-simple:before {
  content: "\e4c0";
}
.ph-fill.ph-usb:before {
  content: "\e956";
}
.ph-fill.ph-user:before {
  content: "\e4c2";
}
.ph-fill.ph-user-check:before {
  content: "\eafa";
}
.ph-fill.ph-user-circle:before {
  content: "\e4c4";
}
.ph-fill.ph-user-circle-check:before {
  content: "\ec38";
}
.ph-fill.ph-user-circle-dashed:before {
  content: "\ec36";
}
.ph-fill.ph-user-circle-gear:before {
  content: "\e4c6";
}
.ph-fill.ph-user-circle-minus:before {
  content: "\e4c8";
}
.ph-fill.ph-user-circle-plus:before {
  content: "\e4ca";
}
.ph-fill.ph-user-focus:before {
  content: "\e6fc";
}
.ph-fill.ph-user-gear:before {
  content: "\e4cc";
}
.ph-fill.ph-user-list:before {
  content: "\e73c";
}
.ph-fill.ph-user-minus:before {
  content: "\e4ce";
}
.ph-fill.ph-user-plus:before {
  content: "\e4d0";
}
.ph-fill.ph-user-rectangle:before {
  content: "\e4d2";
}
.ph-fill.ph-user-sound:before {
  content: "\eca8";
}
.ph-fill.ph-user-square:before {
  content: "\e4d4";
}
.ph-fill.ph-user-switch:before {
  content: "\e756";
}
.ph-fill.ph-users:before {
  content: "\e4d6";
}
.ph-fill.ph-users-four:before {
  content: "\e68c";
}
.ph-fill.ph-users-three:before {
  content: "\e68e";
}
.ph-fill.ph-van:before {
  content: "\e826";
}
.ph-fill.ph-vault:before {
  content: "\e76e";
}
.ph-fill.ph-vector-three:before {
  content: "\ee62";
}
.ph-fill.ph-vector-two:before {
  content: "\ee64";
}
.ph-fill.ph-vibrate:before {
  content: "\e4d8";
}
.ph-fill.ph-video:before {
  content: "\e740";
}
.ph-fill.ph-video-camera:before {
  content: "\e4da";
}
.ph-fill.ph-video-camera-slash:before {
  content: "\e4dc";
}
.ph-fill.ph-video-conference:before {
  content: "\edce";
}
.ph-fill.ph-vignette:before {
  content: "\eba2";
}
.ph-fill.ph-vinyl-record:before {
  content: "\ecac";
}
.ph-fill.ph-virtual-reality:before {
  content: "\e7b8";
}
.ph-fill.ph-virus:before {
  content: "\e7d6";
}
.ph-fill.ph-visor:before {
  content: "\ee2a";
}
.ph-fill.ph-voicemail:before {
  content: "\e4de";
}
.ph-fill.ph-volleyball:before {
  content: "\e726";
}
.ph-fill.ph-wall:before {
  content: "\e688";
}
.ph-fill.ph-wallet:before {
  content: "\e68a";
}
.ph-fill.ph-warehouse:before {
  content: "\ecd4";
}
.ph-fill.ph-warning:before {
  content: "\e4e0";
}
.ph-fill.ph-warning-circle:before {
  content: "\e4e2";
}
.ph-fill.ph-warning-diamond:before {
  content: "\e7fc";
}
.ph-fill.ph-warning-octagon:before {
  content: "\e4e4";
}
.ph-fill.ph-washing-machine:before {
  content: "\ede8";
}
.ph-fill.ph-watch:before {
  content: "\e4e6";
}
.ph-fill.ph-wave-sawtooth:before {
  content: "\ea9c";
}
.ph-fill.ph-wave-sine:before {
  content: "\ea9a";
}
.ph-fill.ph-wave-square:before {
  content: "\ea9e";
}
.ph-fill.ph-wave-triangle:before {
  content: "\eaa0";
}
.ph-fill.ph-waveform:before {
  content: "\e802";
}
.ph-fill.ph-waveform-slash:before {
  content: "\e800";
}
.ph-fill.ph-waves:before {
  content: "\e6de";
}
.ph-fill.ph-webcam:before {
  content: "\e9b2";
}
.ph-fill.ph-webcam-slash:before {
  content: "\ecdc";
}
.ph-fill.ph-webhooks-logo:before {
  content: "\ecae";
}
.ph-fill.ph-wechat-logo:before {
  content: "\e8d2";
}
.ph-fill.ph-whatsapp-logo:before {
  content: "\e5d0";
}
.ph-fill.ph-wheelchair:before {
  content: "\e4e8";
}
.ph-fill.ph-wheelchair-motion:before {
  content: "\e89a";
}
.ph-fill.ph-wifi-high:before {
  content: "\e4ea";
}
.ph-fill.ph-wifi-low:before {
  content: "\e4ec";
}
.ph-fill.ph-wifi-medium:before {
  content: "\e4ee";
}
.ph-fill.ph-wifi-none:before {
  content: "\e4f0";
}
.ph-fill.ph-wifi-slash:before {
  content: "\e4f2";
}
.ph-fill.ph-wifi-x:before {
  content: "\e4f4";
}
.ph-fill.ph-wind:before {
  content: "\e5d2";
}
.ph-fill.ph-windmill:before {
  content: "\e9f8";
}
.ph-fill.ph-windows-logo:before {
  content: "\e692";
}
.ph-fill.ph-wine:before {
  content: "\e6b2";
}
.ph-fill.ph-wrench:before {
  content: "\e5d4";
}
.ph-fill.ph-x:before {
  content: "\e4f6";
}
.ph-fill.ph-x-circle:before {
  content: "\e4f8";
}
.ph-fill.ph-x-logo:before {
  content: "\e4bc";
}
.ph-fill.ph-x-square:before {
  content: "\e4fa";
}
.ph-fill.ph-yarn:before {
  content: "\ed9a";
}
.ph-fill.ph-yin-yang:before {
  content: "\e92a";
}
.ph-fill.ph-youtube-logo:before {
  content: "\e4fc";
}

/* /styles.css */
/* Self-hosted SIL OFL faces. Same families and weights the pages used to load from
   Google Fonts. Space Grotesk (300–700) and IBM Plex Sans (100–700) are variable
   files, so one rule per subset covers every requested weight. IBM Plex Mono is
   static, so 400 and 500 are separate files. License: OFL.txt beside each family. */

/* cyrillic-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-400-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/space-grotesk-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist (SIL OFL, variable): the Onyx Next interface and figures face. Files in /assets/fonts/geist/, license in OFL.txt. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist/GeistMono-Variable.woff2") format("woff2");
}

:root {
  --bg: #f5f6f9;
  --bg-soft: rgba(0, 0, 0, 0.9);
  --panel: #ffffff;
  --panel-strong: #f0f2f6;
  --panel-border: #e2e6ed;
  --panel-bg: #ffffff;
  --text: #0b0f17;
  --muted: #596477;
  --accent: #1766d4;
  --accent-strong: #114ea3;
  --accent-glow: rgba(23, 102, 212, 0.16);
  --teal: #1f9d6c;
  --warning: #c48a1c;
  --danger: #d9394a;
  --shadow: 0 1px 2px rgba(11, 15, 23, 0.05);
  --radius: 12px;
  --radius-sm: 8px;
  /* aliases for panels that reference a generic surface/border/success system */
  --surface: var(--panel);
  --surface-elevated: var(--panel-strong);
  --border: var(--panel-border);
  --success: var(--teal);
  --purple: #6b3fa0;
  /* alias retained for the section-hero/KPI rules that reference it directly */
  --accent-warm: var(--accent);
  --accent-warm-soft: rgba(23, 102, 212, 0.1);
  /* the sidebar stays a dark "island" in the bright theme — its own token set */
  --sidebar-bg: #0d1118;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: #8c97ab;
  --sidebar-text-active: #eef1f6;
  --sidebar-hover: #131822;
  --sidebar-active-bg: rgba(23, 102, 212, 0.18);
  --font-display: "Geist", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Geist", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

/* ── Auth Modal Overlay ── */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 16, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-modal {
  position: relative;
  width: min(960px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(23, 102, 212, 0.15);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0,0,0,0.04) inset;
  overflow: hidden;
}

.auth-overlay-back {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 10;
  background: transparent;
  border: none;
  color: rgba(0,0,0,0.55);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.01em;
}
.auth-overlay-back:hover {
  color: var(--text);
  background: rgba(0,0,0,0.06);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 56px 44px;
  background: var(--panel);
}

.auth-card {
  width: min(400px, 100%);
  display: grid;
  gap: 20px;
}

.auth-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.auth-card > .muted {
  margin: -10px 0 0;
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .auth-modal {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  .auth-panel {
    padding: 40px 24px;
  }
}

.auth-tabs {
  display: flex;
  gap: 10px;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form input {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.auth-error {
  color: var(--danger);
  min-height: 20px;
}

.sso-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}
.sso-divider::before,
.sso-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.sso-btn {
  width: 100%;
  text-align: center;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.sso-btn:hover {
  background: rgba(23, 102, 212, 0.08);
}

/* Consumer Google/Microsoft sign-in (Phase 9.2). Its own group with its own note, so it never reads
   as the same thing as a company's single sign-on (Phase 9.3). */
.social-login-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-login-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.auth-join-hint {
  background: rgba(23, 102, 212, 0.08);
  border: 1px solid rgba(23, 102, 212, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--accent);
  font-size: 0.88rem;
}

.field-label {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 2px;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  border-right: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Logo image helpers ─────────────────────────────────────────────────── */
.topbar-logo-img,
.brand-logo-img {
  display: block;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.topbar-logo-img {
  height: 44px;
  width: auto;
  max-width: 200px;
}

.brand-logo-img {
  height: 56px;
  width: auto;
  max-width: 260px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
}

p {
  margin: 0;
}

.muted {
  color: var(--muted);
  line-height: 1.55;
}

.nav-search-wrap {
  position: relative;
}

.nav-search {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text);
  font-size: 0.84rem;
  font-family: inherit;
}

.nav-search::placeholder {
  color: var(--muted);
}

.nav-search:focus {
  outline: none;
  border-color: rgba(23, 102, 212, 0.4);
  background: rgba(23, 102, 212, 0.05);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.nav-pinned {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
}

.nav-group {
  border: none;
}

.nav-group + .nav-group {
  margin-top: 2px;
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 7px 6px;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  border-radius: var(--radius-sm);
  user-select: none;
  transition: color 150ms ease, background 150ms ease;
}

.nav-group-label::-webkit-details-marker {
  display: none;
}

.nav-group-label:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}

.nav-group-label.is-flat {
  cursor: default;
  padding: 8px 6px 5px;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group-label.is-flat:hover {
  color: var(--muted);
  background: none;
}

.nav-flat-group + .nav-group {
  margin-top: 2px;
}

.nav-enterprise-badge {
  font-size: 0.6rem;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  font-size: 0.7rem;
  transition: transform 180ms ease;
  color: var(--accent);
}

.nav-group[open] > .nav-group-label .nav-chev {
  transform: rotate(90deg);
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  text-decoration: none;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

/* Author display must not force a closed group open. Monitor and the other groups stay collapsed
   until the person opens them, or until the current page is inside one. */
.nav-group:not([open]) > .nav-group-items {
  display: none;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 150ms ease;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.035);
  border-left-color: rgba(23, 102, 212, 0.35);
}

.nav-item.active {
  color: var(--text);
  background: rgba(23, 102, 212, 0.1);
  border-left-color: var(--accent);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

.nav-item.nav-item-hidden-by-search {
  display: none;
}

.nav-group.nav-group-hidden-by-search {
  display: none;
}

.sidebar-card,
.panel,
.metric-card,
.table-card,
.tile-card,
.widget,
.story-card,
.integration-card,
.chart-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* ── Sidebar stays a dark island in the bright theme — everything below
   overrides the shared light-theme rules with sidebar-scoped equivalents. ── */
.sidebar h1 {
  color: var(--sidebar-text-active);
}

.sidebar .muted {
  color: var(--sidebar-text);
}

/* The sidebar is a fixed-height column now (see `.sidebar`'s own overflow),
   sharing that budget with the nav list and the account menu — so its two
   prose blocks (brand blurb, Signal Correlation card) run tighter here than
   the same classes do elsewhere in the app. */
.sidebar > div:first-child .muted {
  font-size: 0.82rem;
  line-height: 1.4;
}

.sidebar .nav-search {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--sidebar-border);
  color: var(--sidebar-text-active);
}

.sidebar .nav-search::placeholder {
  color: var(--sidebar-text);
}

.sidebar .nav-search:focus {
  border-color: rgba(23, 102, 212, 0.5);
  background: rgba(23, 102, 212, 0.1);
}

.sidebar .nav-pinned {
  border-bottom-color: var(--sidebar-border);
}

.sidebar .nav-group-label {
  color: var(--sidebar-text);
}

.sidebar .nav-group-label:hover {
  color: var(--sidebar-text-active);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .nav-group-label.is-flat:hover {
  color: var(--sidebar-text);
  background: none;
}

.sidebar .nav-item {
  color: var(--sidebar-text);
}

.sidebar .nav-icon {
  color: var(--sidebar-text);
}

.sidebar .nav-item:hover {
  color: var(--sidebar-text-active);
  background: rgba(255, 255, 255, 0.07);
  border-left-color: rgba(23, 102, 212, 0.45);
}

.sidebar .nav-item.active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active-bg);
  border-left-color: #e3a458;
}

.sidebar .nav-item.active .nav-icon {
  color: #e3a458;
}

.sidebar-card {
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border);
  box-shadow: none;
}

/* Account menu — a bottom-left corner trigger (avatar + name + workspace) that
   opens a popover upward, the way Slack/Notion/Linear anchor account controls,
   instead of spreading workspace switching/connection status across a topbar
   that would otherwise have to stay pinned over page content. `margin-top: auto`
   pushes it to the foot of the sidebar's flex column regardless of nav length. */
.sidebar-account {
  position: relative;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--sidebar-border);
}

.account-menu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-text-active);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}

.account-menu-trigger:hover,
.account-menu-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--sidebar-border);
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.account-menu-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.account-menu-text strong {
  display: block;
  font-size: 0.85rem;
  color: var(--sidebar-text-active);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-text .small-meta {
  display: block;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-chevron {
  color: var(--sidebar-text);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 150ms ease;
}

.account-menu-trigger[aria-expanded="true"] .account-menu-chevron {
  transform: rotate(180deg);
}

/* `fixed`, not `absolute`: the sidebar scrolls internally (see `.sidebar`'s
   own overflow-y), and an absolutely-positioned popover would get clipped by
   that same overflow the moment it needed to extend past the sidebar's edge.
   placeAccountMenu() anchors it to the account button and clamps it inside the
   sidebar (and the viewport). max-width is the sidebar width so a 300px menu
   cannot cover the page at 125% or 150% zoom. */
.account-menu-popover {
  position: fixed;
  z-index: 1500;
  box-sizing: border-box;
  width: min(300px, var(--sidebar-w, 248px));
  max-width: var(--sidebar-w, 248px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.account-menu-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--panel-border);
}

.account-menu-header strong {
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
}

.account-menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-top: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.account-menu-link:hover {
  color: var(--accent-strong);
  text-decoration: none;
}

.account-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Three buttons in a narrow popover: each takes an equal share, and when they cannot fit on one line the last one
   wraps to its own row instead of running out of the panel (Logout used to be cut off). */
.account-menu-actions .topbar-action-btn {
  flex: 1 1 96px;
  min-width: 0;
  justify-content: center;
  padding-inline: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-popover .account-menu-link span,
.account-menu-popover .workspace-picker select {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sidebar flyout — hover a collapsed group to preview its sub-features
   without opening the accordion inline. The group's real .nav-group-items
   node is reparented in here (not cloned), so click handlers keep working. ── */
.nav-flyout {
  position: fixed;
  z-index: 500;
  width: 224px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 32px rgba(20, 18, 30, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}

.nav-flyout.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-flyout-header {
  padding: 6px 8px 8px;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}

.nav-flyout .nav-group-items {
  gap: 2px;
}

.nav-flyout .nav-item {
  color: var(--text);
}

.nav-flyout .nav-item:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.035);
  border-left-color: rgba(23, 102, 212, 0.35);
}

.nav-flyout .nav-item.active {
  color: var(--text);
  background: rgba(23, 102, 212, 0.1);
  border-left-color: var(--accent);
}

.nav-flyout .nav-icon {
  color: var(--muted);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
}

.good { background: var(--success); }
.warn { background: var(--warning); }
.bad { background: var(--danger); }

.content {
  padding: 20px;
  display: grid;
  align-content: start;
  gap: 16px;
}

/* ── App topbar ───────────────────────────────────────────────────────────
   One header shared by every feature section: where you are and what the
   page is for. It is a card — chrome, visibly distinct from page content —
   but sits in normal document flow (not pinned) so it scrolls away with the
   rest of the page instead of covering content underneath. Workspace identity,
   switching, and connection status live in the account menu at the bottom of
   the sidebar instead — see `.sidebar-account`. */
.topbar {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.topbar-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.topbar-left {
  min-width: 0;
  flex: 1 1 320px;
}

.topbar-eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The page name is the loudest thing in the header. It used to render at
   0.86rem — smaller than the description sitting underneath it. */
.topbar-left .breadcrumb {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

.workspace-picker {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workspace-picker-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace-picker select {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--font-body);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.workspace-picker select:hover {
  border-color: rgba(23, 102, 212, 0.4);
}

.workspace-picker select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.topbar-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
}

.topbar-action-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Connection state reads as a status line, not another paragraph: a coloured
   dot for tone, the workspace name, then the workspace facts as discrete
   chips instead of one run-on sentence. */
.topbar-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border);
  font-size: 0.8rem;
}

.topbar-status .status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--muted);
}

.topbar-status[data-tone="ok"] .status-dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 157, 108, 0.18);
}

.topbar-status[data-tone="busy"] .status-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(196, 138, 28, 0.18);
}

.topbar-status[data-tone="warn"] .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(217, 57, 74, 0.18);
}

.topbar-status strong {
  color: var(--text);
  font-weight: 600;
}

.topbar-status #server-meta {
  display: contents;
  color: var(--muted);
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
}

/* The sidebar brand is persistent chrome, not the heading of the current view,
   so the page title in the topbar owns the h1. These rules keep the brand
   looking exactly as it did when it was one. */
.brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2em;
  font-weight: bold;
  color: var(--sidebar-text-active);
}

.is-hidden {
  display: none;
}

.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  margin-bottom: 4px;
}

/* Slim page description under the topbar breadcrumb — replaces the old full-width hero card that
   repeated the same generic copy on every page regardless of context. */
.page-description {
  margin: 7px 0 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Overview-only shortcuts, inline with the page description as plain text links rather than a
   separate full-width call-to-action card competing with the topbar's own controls. */
.page-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--panel-border);
}

.page-actions .link-btn {
  font-size: inherit;
  font-weight: 600;
}

.primary-btn,
.secondary-btn,
.ghost-btn {
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 34px;
  font-family: var(--font-body);
  transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, background 160ms ease;
}

.primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  font-weight: 600;
}

.secondary-btn {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.ghost-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--panel-border);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover {
  transform: translateY(-1px);
}

a.secondary-btn {
  text-decoration: none;
}

.section {
  display: none;
  gap: 20px;
}

.section.active {
  display: grid;
}

.metrics-grid,
.split-grid,
.three-grid,
.widget-grid,
.integration-grid,
.analytics-grid {
  display: grid;
  gap: 18px;
}

.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.split-grid {
  grid-template-columns: 1.2fr 0.8fr;
}

.three-grid,
.integration-grid,
.analytics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card {
  padding: 18px;
  display: grid;
  gap: 10px;
  position: relative;
}

/* ── Explain engine: small "i" affordance + anchored popover ── */
.explain-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
  font-size: 0.68rem;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.explain-btn:hover {
  color: var(--accent);
  border-color: rgba(23, 102, 212, 0.4);
  background: rgba(23, 102, 212, 0.1);
}

.metric-card .explain-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

.explain-popover {
  position: fixed;
  z-index: 2000;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
  border-radius: var(--radius);
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  line-height: 1.55;
}

.explain-popover h4 {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.explain-popover .explain-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px;
}

.explain-popover .explain-close:hover {
  color: var(--text);
}

.explain-popover p {
  margin: 0 0 8px;
  color: var(--text);
}

.explain-popover .explain-detail {
  color: var(--muted);
}

.explain-popover .explain-source {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
  font-size: 0.76rem;
  color: var(--success);
}

.explain-popover .explain-loading {
  color: var(--muted);
  font-style: italic;
}

/* ── Per-feature settings: FAB + drawer ── */
.feature-settings-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-strong);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 150ms ease, border-color 150ms ease;
}

.feature-settings-fab:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 102, 212, 0.4);
}

.feature-settings-drawer {
  position: fixed;
  right: 24px;
  bottom: 76px;
  z-index: 1500;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
}

.feature-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--panel-border);
}

.feature-settings-header h3 {
  font-size: 1rem;
}

.feature-settings-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
}

.feature-settings-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.feature-settings-field input[type="text"],
.feature-settings-field input[type="number"],
.feature-settings-field select,
.feature-settings-field textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
}

.feature-settings-field .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text);
}

.feature-settings-field .checkbox-list {
  display: grid;
  gap: 6px;
}

.feature-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--panel-border);
}

.metric-nav-card {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.metric-nav-card:hover {
  transform: translateY(-1px);
  border-color: rgba(23, 102, 212, 0.34);
  background: rgba(23, 102, 212, 0.08);
}

.metric-label {
  color: var(--muted);
  font-size: 0.92rem;
}

.metric-value {
  font-size: 2rem;
  font-family: var(--font-display);
}

.metric-delta {
  color: var(--accent);
  font-size: 0.9rem;
}

/* Overview's KPI strip and tenant-slug pill default to blue/green accents that read as
   decorative "highlights" rather than meaningful status — muted here, scoped to Overview only
   since .metric-delta/.integration-pill/.good/.warn/.bad are shared classes used elsewhere
   (RUM, AIOps, Dashboards, Connectors) where the color still carries real status meaning. */
#overview .metric-delta,
#overview .metric-delta.good,
#overview .metric-delta.warn,
#overview .metric-delta.bad {
  color: var(--muted);
  background: none;
}

#overview .integration-pill {
  color: var(--muted);
  background: rgba(0, 0, 0, 0.06);
}

.panel {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.panel-header p {
  color: var(--muted);
  font-size: 0.9rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
}

.table th:first-child,
.table td:first-child {
  padding-left: 0;
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
}

.table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.06);
}

.badge.good {
  color: var(--success);
}

.badge.warn {
  color: var(--warning);
}

.badge.bad {
  color: var(--danger);
}

/* .kpi-tile / .kpi-tile-label / .kpi-tile-value already defined below (shared with AppPulse's KPI strip) — reused as-is for Service Detail's stat cards, not redefined here. */

.mono-cell {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.85em;
}

.row-chevron {
  color: var(--muted);
  text-align: right;
}

.back-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}

.back-link:hover {
  color: var(--text);
}

.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topology-edge-trace-derived {
  border-left: 2px solid var(--success);
  padding-left: 10px;
}

.topology-groupby-chip.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Shared top-level tab bar (Metrics Overview/Explorer/Summary/...) ── */
.top-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--panel-border);
}

.top-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 20px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
}

.top-tab:hover {
  color: var(--text);
}

.top-tab.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.metric-chart {
  width: 100%;
  height: 160px;
  display: block;
}

.metric-chart-range {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
  padding: 4px 12px 12px;
}

/* ── Data Observability catalog ── */
.settings-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 4px;
}

.settings-nav-item {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 20px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
}

.settings-nav-item:hover {
  color: var(--text);
}

.settings-nav-item.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.catalog-list {
  display: flex;
  flex-direction: column;
}

.catalog-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--panel-border);
}

.catalog-row:last-child {
  border-bottom: none;
}

.catalog-row-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--panel-strong);
}

.catalog-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trace-waterfall-scale {
  display: grid;
  grid-template-columns: 240px 1fr 90px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.trace-waterfall-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.trace-waterfall {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trace-waterfall-row {
  display: grid;
  grid-template-columns: 240px 1fr 90px;
  gap: 12px;
  align-items: center;
}

.trace-waterfall-track {
  position: relative;
  height: 18px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.trace-waterfall-bar {
  position: absolute;
  top: 2px;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  min-width: 2px;
}

.trace-waterfall-bar.bad {
  background: var(--danger);
}

.story-card,
.tile-card,
.chart-card,
.integration-card,
.widget {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.service-list,
.widget-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-shell {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.1fr 0.9fr;
}

.dashboard-kpi-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-nav-card {
  text-align: left;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.kpi-nav-card:hover {
  border-color: rgba(23, 102, 212, 0.36);
  background: rgba(23, 102, 212, 0.08);
}

.dashboard-builder-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-catalog {
  display: grid;
  gap: 10px;
  max-height: 480px;
  overflow: auto;
  padding-right: 2px;
}

.dashboard-catalog-card {
  align-items: flex-start;
  position: relative;
}

.dashboard-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.widget-analyze-btn {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  min-height: 320px;
}

.widget-analyze-btn:hover {
  border-color: rgba(23, 102, 212, 0.34);
  background: rgba(23, 102, 212, 0.08);
}

.widget-analyze-btn .panel-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.widget-analyze-btn .panel-header > div {
  min-width: 0;
}

.widget-analyze-inline-btn {
  margin-left: auto;
}

.aiops-shell {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.2fr 0.8fr;
}

.aiops-findings-panel .dashboard-list {
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.aiops-finding-card {
  align-items: flex-start;
  gap: 12px;
}

.aiops-finding-main {
  min-width: 0;
}

.aiops-actions {
  min-width: 170px;
}

.service-item {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: grid;
  gap: 10px;
}

.service-item button {
  justify-self: start;
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 220px;
  overflow: hidden;
}

.bar-group {
  flex: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 0;
}

.chart-point-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  cursor: pointer;
  position: relative;
}

.chart-point-btn:hover,
.chart-point-btn.selected {
  border-color: rgba(23, 102, 212, 0.34);
  background: rgba(23, 102, 212, 0.08);
}

.chart-point-btn:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  max-width: 280px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: rgba(4, 14, 22, 0.96);
  border: 1px solid rgba(23, 102, 212, 0.28);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  /* Above the sticky topbar (z-index 30) — this tooltip renders above its chart point,
     so a chart near the top of the scroll area would otherwise slide it under the header. */
  z-index: 40;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.metric-point-detail {
  margin-top: 8px;
}

.bar-stack {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
}

.bar {
  width: 18px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, rgba(23, 102, 212, 0.95), rgba(17, 78, 163, 0.95));
}

.bar.alt {
  background: linear-gradient(180deg, rgba(255, 202, 106, 0.95), rgba(177, 129, 42, 0.95));
}

.filter-row,
.builder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.builder-row-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-row-stack input,
.builder-row-stack textarea {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 40px;
}

.filter-row select,
.filter-row input,
.builder-row select,
.builder-row input,
.builder-row textarea {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 40px;
}

.builder-row textarea {
  min-width: 280px;
  resize: vertical;
}

.builder-row button,
.filter-row button {
  align-self: center;
  min-height: 44px;
}

.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

.form-grid .primary-btn,
.form-grid .secondary-btn,
.form-grid .ghost-btn {
  justify-self: start;
}

.config-input-group {
  display: grid;
  gap: 6px;
  min-width: 240px;
}

.log-list,
.insight-list,
.rum-grid,
.cloud-grid,
.dashboard-list {
  display: grid;
  gap: 12px;
}

.log-item,
.insight-item,
.rum-card,
.cloud-card,
.dashboard-item {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.dashboard-select-btn:hover,
.service-select-btn:hover,
.log-open-detail-btn:hover,
.rum-session-btn:hover {
  border-color: rgba(23, 102, 212, 0.36);
  background: rgba(23, 102, 212, 0.08);
  transform: translateY(-1px);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 36px 20px;
  color: var(--muted);
}

.empty-state-icon {
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 6px;
}

.empty-state-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.empty-state-message {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 360px;
}

.empty-state .primary-btn,
.empty-state .ghost-btn {
  margin-top: 10px;
}

.relationship-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.relationship-item strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.relationship-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
}

.relationship-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--muted);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.relationship-arrow.upstream::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.relationship-arrow.downstream::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.log-snippet-btn,
.live-log-snippet-btn {
  cursor: pointer;
}

.log-item.selected {
  border-color: rgba(71, 206, 166, 0.7);
  box-shadow: 0 0 0 1px rgba(71, 206, 166, 0.25);
}

.dashboard-select-btn {
  cursor: pointer;
}

.dashboard-item.selected {
  border-color: rgba(71, 206, 166, 0.7);
  box-shadow: 0 0 0 1px rgba(71, 206, 166, 0.25);
}

.rum-card.selected {
  border-color: rgba(71, 206, 166, 0.7);
  box-shadow: 0 0 0 1px rgba(71, 206, 166, 0.25);
}

.service-select-btn {
  cursor: pointer;
}

.log-meta,
.small-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.bar-group .small-meta {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.widget {
  min-height: 160px;
}

.widget strong {
  font-size: 1.05rem;
}

.integration-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.stacked-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
}

.integration-pill {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(23, 102, 212, 0.08);
  color: var(--accent);
  font-size: 0.8rem;
}

.api-key {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--accent);
}

.footer-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.code-block {
  margin: 0;
  white-space: pre-wrap;
  max-height: 360px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  padding: 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ── Data-source onboarding wizard ── */
.onboarding-wizard {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1100px;
}

.onboarding-header h1 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.onboarding-header .muted {
  font-size: 0.92rem;
}

.onboarding-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.onboarding-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: border-color 150ms ease, background 150ms ease;
}

.onboarding-card:hover {
  border-color: rgba(23, 102, 212, 0.4);
}

.onboarding-card.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.onboarding-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
}

.onboarding-card.selected .onboarding-card-icon {
  background: rgba(23, 102, 212, 0.14);
}

/* Alert-type picker — a compact colorful card grid replacing the plain <select>, one card per
   alert category so "what should trigger this" reads visually instead of as an option list. */
.alert-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.alert-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color 150ms ease, background 150ms ease;
}

.alert-type-card:hover { border-color: rgba(23, 102, 212, 0.4); }

.alert-type-card.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.alert-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.alert-type-icon.service { background: var(--success); }
.alert-type-icon.error-rate { background: var(--danger); }
.alert-type-icon.latency { background: var(--warning); }
.alert-type-icon.infrastructure { background: #544f7d; }
.alert-type-icon.log-pattern { background: #0f766e; }
.alert-type-icon.tenant { background: var(--purple); }
.alert-type-icon.environment { background: #4c3a86; }
.alert-type-icon.composite { background: #6b7280; }

.alert-type-icon.large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(20, 18, 30, 0.12);
}

.alert-type-icon.large svg { width: 28px; height: 28px; }

@media (max-width: 720px) {
  .alert-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.onboarding-info-panel {
  padding: 20px;
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-info-panel h3 {
  color: var(--purple);
  font-size: 1.1rem;
}

.onboarding-info-panel a {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
}

.onboarding-info-panel-success {
  background: rgba(31, 157, 108, 0.1);
  border-color: rgba(31, 157, 108, 0.3);
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.onboarding-step {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 0 28px;
}

.onboarding-step:last-child {
  padding-bottom: 0;
}

/* The connecting spine running through every step's number circle, like a timeline — drawn per
   step (bottom of its own circle down to the bottom of its own box) so consecutive steps chain
   into one continuous line with no gap. */
.onboarding-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--panel-border);
}

.onboarding-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
}

.onboarding-step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-step-body h4 {
  font-size: 0.98rem;
}

.onboarding-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboarding-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.onboarding-status-dot.good {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(31, 157, 108, 0.18);
}

.onboarding-status-dot.warn {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(196, 138, 28, 0.18);
}

.onboarding-status-dot.bad {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(217, 57, 74, 0.18);
}

.onboarding-status-dot:not(.good):not(.warn):not(.bad) {
  background: var(--panel-border);
}

/* Provider identity badges — reused anywhere a data source/connector is listed (Connector
   Registry, Data Observability catalog) so the same source reads consistently everywhere. */
.provider-badge {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--muted);
}

.provider-badge.aws { background: #ff9900; color: #1a1a1a; }
.provider-badge.azure { background: #0078d4; }
.provider-badge.gcp { background: #ffffff; border: 1px solid var(--panel-border); }
.provider-badge.otlp { background: var(--accent); }
.provider-badge.custom { background: var(--muted); }

.provider-badge.large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(20, 18, 30, 0.12);
}

.provider-badge.large svg { width: 30px; height: 30px; }

.template-builder-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--panel-border);
}

.template-builder-header-text {
  flex: 1;
  min-width: 0;
}

.template-builder-header-text h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.template-builder-header-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Connector Registry list rows */
.connector-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.connector-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Two-column setup layout: steps scroll on the left, the provider info panel stays pinned on the
   right while you work through them — matches the reference onboarding flows' sticky side panel. */
.connector-setup-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
  margin-top: 16px;
}

.connector-setup-side {
  position: sticky;
  top: 16px;
}

@media (max-width: 900px) {
  .connector-setup-grid {
    grid-template-columns: 1fr;
  }
  .connector-setup-side {
    position: static;
  }
}

/* "Choose a method" card — one recommended (guided) option plus a nested "Advanced setup
   options" control that swaps in the manual/custom form, instead of a plain text link. */
.setup-method-card {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.setup-method-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--accent-glow);
}

.setup-method-primary .check-icon {
  color: var(--accent);
  font-weight: 700;
  width: 16px;
  flex-shrink: 0;
}

.setup-method-primary strong {
  display: block;
  color: var(--accent);
  font-size: 0.92rem;
}

.setup-method-advanced-select {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid var(--panel-border);
  border-radius: 0;
  padding: 11px 16px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.86rem;
  font-family: var(--font-body);
  cursor: pointer;
}

/* AWS "choose what to monitor" toggle list — friendly on/off rows instead of a checkbox wall */
.connector-toggle-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.connector-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-border);
  cursor: pointer;
}

.connector-toggle-row:last-child {
  border-bottom: none;
}

.connector-toggle-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

input.toggle-input {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel-border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease;
}

input.toggle-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 150ms ease;
}

input.toggle-input:checked {
  background: var(--accent);
}

input.toggle-input:checked::before {
  transform: translateX(16px);
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  font-family: inherit;
}

@media (max-width: 900px) {
  .onboarding-body {
    grid-template-columns: 1fr;
  }
  .onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Solution area section header */
.section-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-hero-text h2 {
  font-size: 1.4rem;
  margin: 0 0 4px;
}
.section-hero-text p {
  color: var(--muted);
  margin: 0;
  font-size: 0.92rem;
}
.section-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--accent-warm-soft);
  border: 1px solid rgba(23, 102, 212, 0.25);
  color: var(--accent-warm);
}

/* KPI strip for solution areas */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi-tile-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.kpi-tile-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.1;
}
.kpi-tile-delta {
  font-size: 0.78rem;
  color: var(--accent-warm);
}
.kpi-tile-delta.warn { color: var(--warning); }
.kpi-tile-delta.bad { color: var(--danger); }

/* Host inventory cards */
.host-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.host-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.host-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.host-card-meta {
  font-size: 0.77rem;
  color: var(--muted);
}
.resource-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}
.resource-bar-label {
  width: 32px;
  color: var(--muted);
  flex-shrink: 0;
}
.resource-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.resource-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.resource-bar-fill.warn { background: var(--warning); }
.resource-bar-fill.bad { background: var(--danger); }
.resource-bar-pct {
  width: 34px;
  text-align: right;
  color: var(--muted);
}

/* Core Web Vitals */
.vitals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vital-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}
.vital-card-name {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vital-card-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  margin: 4px 0;
}
.vital-card-value.good { color: var(--success); }
.vital-card-value.warn { color: var(--warning); }
.vital-card-value.bad { color: var(--danger); }
.vital-card-label {
  font-size: 0.77rem;
  color: var(--muted);
}

/* Platform tech cards */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.tech-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s, box-shadow 0.18s;
  cursor: default;
}
.tech-card:hover {
  border-color: rgba(23, 102, 212, 0.35);
  box-shadow: 0 0 28px rgba(23, 102, 212, 0.07);
}
.tech-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(23, 102, 212, 0.12);
  border: 1px solid rgba(23, 102, 212, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.tech-card-name {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
}
.tech-card-tagline {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.tech-card-desc {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}
.tech-card-nav {
  margin-top: auto;
}

/* Pipeline stages (FlowForge) */
.pipeline-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  padding: 12px 10px;
  background: rgba(0,0,0,0.03);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  position: relative;
}
.pipeline-stage:first-child {
  border-left: 1px solid var(--panel-border);
  border-radius: 10px 0 0 10px;
}
.pipeline-stage:last-child {
  border-right: 1px solid var(--panel-border);
  border-radius: 0 10px 10px 0;
}
.pipeline-stage + .pipeline-stage::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--panel-border);
}
.pipeline-stage-icon { font-size: 1.1rem; }
.pipeline-stage-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.pipeline-stage-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pipeline-stage-status.pass { color: var(--accent); }
.pipeline-stage-status.fail { color: var(--danger); }
.pipeline-stage-status.running { color: var(--warning); }
.pipeline-stage-duration { font-size: 0.7rem; color: var(--muted); }

/* DORA metrics row */
.dora-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dora-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dora-card-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dora-card-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
}
.dora-card-band {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  display: inline-block;
  width: fit-content;
}
.dora-card-band.elite { background: rgba(93,226,198,0.12); color: var(--accent); }
.dora-card-band.high { background: rgba(93,226,198,0.08); color: var(--accent-strong); }
.dora-card-band.medium { background: rgba(255,202,106,0.12); color: var(--warning); }
.dora-card-band.low { background: rgba(255,111,125,0.12); color: var(--danger); }

/* Threat signals (SentinelView) */
.threat-signal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.02);
  margin-bottom: 8px;
}
.threat-signal-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.threat-signal-indicator.critical { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.threat-signal-indicator.high { background: #ff9f43; box-shadow: 0 0 8px rgba(255,159,67,0.5); }
.threat-signal-indicator.medium { background: var(--warning); }
.threat-signal-indicator.low { background: var(--accent); }
.threat-signal-body { flex: 1; }
.threat-signal-title { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.threat-signal-meta { font-size: 0.77rem; color: var(--muted); margin-top: 2px; }

/* Security score ring */
.security-score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
}
.security-score-value {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.security-score-value.good { color: var(--success); }
.security-score-value.warn { color: var(--warning); }
.security-score-value.bad { color: var(--danger); }
.security-score-label { font-size: 0.85rem; color: var(--muted); }

/* Model cards (NeuralWatch) */
.model-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.02);
}
.model-card-name { font-weight: 600; font-size: 0.9rem; }
.model-card-version { font-size: 0.75rem; color: var(--muted); }
.model-stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.model-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.model-stat-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.model-stat-value { font-size: 0.92rem; font-weight: 600; }
.model-stat-value.good { color: var(--success); }
.model-stat-value.warn { color: var(--warning); }
.model-stat-value.bad { color: var(--danger); }

/* Topology nodes (NexusView) */
.topology-canvas {
  position: relative;
  min-height: 180px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.topology-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.03);
  min-width: 80px;
  transition: border-color 0.18s;
}
.topology-node:hover { border-color: rgba(93,226,198,0.4); }
.topology-node-icon { font-size: 1.4rem; }

.resource-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.resource-type-badge.service { background: var(--success); }
.resource-type-badge.host { background: #544f7d; }
.resource-type-badge.container { background: var(--purple); }
.resource-type-badge.k8s-workload { background: #4c3a86; }
.resource-type-badge.database { background: #0f766e; }
.resource-type-badge.external { background: #6b7280; }
.resource-type-badge.ai-model { background: var(--accent); }

.topology-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topology-edges-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

#topology .topology-node {
  position: relative;
  z-index: 1;
  background: var(--panel);
}

.topology-edge-line {
  stroke-width: 1.6;
}

.topology-edge-line.live { stroke: var(--success); }
.topology-edge-line.inferred { stroke: var(--accent); }
.topology-edge-line.manual { stroke: var(--muted); stroke-dasharray: 4 3; }

.topology-edge-arrow.live { fill: var(--success); }
.topology-edge-arrow.inferred { fill: var(--accent); }
.topology-edge-arrow.manual { fill: var(--muted); }
.topology-node-name { font-size: 0.72rem; font-weight: 600; color: var(--text); text-align: center; }
.topology-node-health { font-size: 0.68rem; }
.topology-node-health.good { color: var(--success); }
.topology-node-health.warn { color: var(--warning); }
.topology-node-health.bad { color: var(--danger); }

/* Topology page — denser real-data cards, scoped to #topology so the original
   NexusView decorative tile grid (same base classes) is left untouched. */
#topology .topology-canvas { justify-content: flex-start; }
#topology .topology-node {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 220px;
  max-width: 260px;
  gap: 4px;
  cursor: pointer;
}
#topology .topology-node-name { text-align: left; font-size: 0.85rem; }

/* Business KPI */
.business-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.business-kpi-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.business-kpi-label { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.business-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
}
.business-kpi-change { font-size: 0.78rem; }
.business-kpi-change.up { color: var(--success); }
.business-kpi-change.down { color: var(--danger); }

/* Funnel chart */
.funnel-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.funnel-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.funnel-step-label { width: 140px; color: var(--muted); flex-shrink: 0; }
.funnel-step-bar-track {
  flex: 1;
  height: 22px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.funnel-step-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #061018;
  transition: width 0.4s ease;
}
.funnel-step-count { width: 60px; text-align: right; font-weight: 600; color: var(--text); }

/* Synthetic monitor pill */
.monitor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.monitor-row:last-child { border-bottom: none; }
.monitor-name { font-size: 0.88rem; font-weight: 500; }
.monitor-uptime { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.monitor-uptime.warn { color: var(--warning); }
.monitor-uptime.bad { color: var(--danger); }
.monitor-latency { font-size: 0.78rem; color: var(--muted); }

/* Log pattern cluster */
.pattern-cluster {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.02);
  margin-bottom: 8px;
}
.pattern-cluster-count {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-display);
  min-width: 48px;
  color: var(--accent);
}
.pattern-cluster-body { flex: 1; }
.pattern-cluster-pattern { font-size: 0.82rem; font-family: var(--font-mono); color: var(--text); }
.pattern-cluster-meta { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }

/* AppPulse apdex */
.apdex-ring {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apdex-value {
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.apdex-value.good { color: var(--success); }
.apdex-value.warn { color: var(--warning); }
.apdex-value.bad { color: var(--danger); }

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--panel-border);
  }

  .metrics-grid,
  .split-grid,
  .dashboard-shell,
  .dashboard-kpi-row,
  .aiops-shell,
  .three-grid,
  .integration-grid,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-nav {
    flex: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .content,
  .sidebar {
    padding: 18px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-builder-form {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 16px;
  }

  .topbar-main {
    flex-direction: column;
    align-items: stretch;
  }

  /* flex-basis is a HEIGHT once the container is a column — the 320px basis that
     gives the text block room to sit beside the controls on wide screens would
     otherwise reserve 320px of dead vertical space here. */
  .topbar-left {
    flex: 0 1 auto;
  }
}

/* ════════════════════════════════════════
   ONYX INSIGHTS — Full Marketing Website
   White, modern, monochrome-first palette — no blue. One restrained warm
   accent (--mkt-accent, amber) scoped to #marketing-site only, so the
   authenticated app's own accent system is untouched.
   ════════════════════════════════════════ */

#marketing-site {
  --mkt-bg: #ffffff;
  --mkt-bg-soft: #f7f6f3;
  --mkt-surface: #ffffff;
  --mkt-border: rgba(20, 18, 30, 0.1);
  --mkt-text: #14121f;
  --mkt-muted: #5b5766;
  --mkt-accent: #1766d4;
  --mkt-accent-strong: #114ea3;
  --mkt-accent-soft: rgba(23, 102, 212, 0.1);
  min-height: 100vh;
  background: var(--mkt-bg);
  color: var(--mkt-text);
}

#marketing-site.hidden { display: none; }

/* ── Announcement Strip ── */
#marketing-site .announcement-strip {
  background: var(--mkt-text);
  color: #fff;
}

#marketing-site .announcement-strip a {
  color: #fff;
}

/* ── Site Topbar ── */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--mkt-border);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.topbar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--mkt-text);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.topbar-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--mkt-text);
  letter-spacing: -0.01em;
}

.topbar-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.topbar-nav a {
  color: var(--mkt-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 9px 16px;
  border-radius: 999px;
  transition: color 0.16s, background 0.16s;
}

.topbar-nav a:hover {
  color: var(--mkt-text);
  background: var(--mkt-bg-soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-topbar-ghost {
  appearance: none;
  border: 1px solid var(--mkt-border);
  background: transparent;
  color: var(--mkt-text);
  padding: 9px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}

.btn-topbar-ghost:hover {
  border-color: var(--mkt-text);
  background: var(--mkt-bg-soft);
}

.btn-topbar-cta {
  appearance: none;
  border: 0;
  background: var(--mkt-text);
  color: #fff;
  padding: 9px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.16s, transform 0.16s;
}

.btn-topbar-cta:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

a.btn-topbar-ghost,
a.btn-topbar-cta,
a.topbar-nav-signin {
  display: inline-block;
  text-decoration: none;
}

.btn-topbar-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--mkt-border);
  background: transparent;
  color: var(--mkt-text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ── Site Sections ── */
.site-section {
  padding: 90px 36px;
  max-width: 1280px;
  margin: 0 auto;
}

.site-section.wide {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.site-section.tight {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ── Site Hero ── */
.site-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  padding: 100px 36px 90px;
  max-width: 1280px;
  margin: 0 auto;
}

.site-hero-copy { display: grid; gap: 20px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mkt-accent-soft);
  border: 1px solid rgba(23, 102, 212, 0.22);
  color: var(--mkt-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.site-hero-copy .hero-lead {
  margin: 0;
  font-size: 1.1rem;
  color: var(--mkt-muted);
  line-height: 1.68;
  max-width: 560px;
}

.hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary {
  appearance: none;
  border: 0;
  background: var(--mkt-text);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.16s, transform 0.16s;
}

.btn-primary:hover { opacity: 0.85; transform: translateY(-2px); }

.btn-secondary {
  appearance: none;
  border: 1px solid var(--mkt-border);
  background: transparent;
  color: var(--mkt-text);
  padding: 13px 26px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.16s, background 0.16s;
}

.btn-secondary:hover {
  border-color: var(--mkt-text);
  background: var(--mkt-bg-soft);
}

.hero-tagline {
  margin: 0;
  font-size: 0.88rem;
  color: var(--mkt-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Hero Dashboard Mockup ── */
.site-hero-visual { position: relative; }

.hero-sample-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mkt-muted);
}
.hero-sample-label .badge { margin-left: 0; }

.hero-preview-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--mkt-bg-soft);
  border: 1px solid var(--mkt-border);
}

.hero-tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mkt-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.hero-tab-btn:hover { color: var(--mkt-text); }

.hero-tab-btn.active {
  background: var(--mkt-text);
  color: #fff;
}

.obs-dashboard {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--mkt-surface);
  border: 1px solid var(--mkt-border);
  box-shadow: 0 30px 80px rgba(20, 18, 30, 0.12), 0 0 0 1px rgba(20, 18, 30, 0.03);
  min-height: 380px;
}

.obs-panel {
  display: none;
  gap: 12px;
}

.obs-panel.active { display: grid; }

.obs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mkt-border);
}

.obs-title {
  font-size: 0.82rem;
  color: var(--mkt-text);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.obs-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--mkt-muted);
}

.obs-status-dot::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: obs-pulse 1.8s ease-in-out infinite;
}

@keyframes obs-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .obs-status-dot::before { animation: none; }
  .obs-bar, .obs-log-line, .obs-trace-row, .obs-trace-bar, .obs-host-card {
    animation: none !important;
    height: var(--bar-h, 50%);
    width: var(--bar-w, 20%);
    opacity: 1;
    transform: none;
  }
}

.obs-metric-value {
  transition: color .3s ease;
}

.obs-metric-value .tick {
  display: inline-block;
}

.obs-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.obs-metric {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--mkt-bg-soft);
  border: 1px solid var(--mkt-border);
}

.obs-metric-label {
  display: block;
  font-size: 0.72rem;
  color: var(--mkt-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.obs-metric-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1;
}

.obs-metric-value.good { color: var(--success); background: transparent; }
.obs-metric-value.warn { color: var(--warning); background: transparent; }
.obs-metric-value.bad { color: var(--danger); background: transparent; }

.obs-chart-area {
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--mkt-bg-soft);
  border: 1px solid var(--mkt-border);
}

.obs-chart-label {
  font-size: 0.76rem;
  color: var(--mkt-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.obs-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
}

.obs-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(20, 18, 30, 0.55), rgba(20, 18, 30, 0.22));
  height: var(--bar-h, 50%);
  animation: obs-bar-grow 0.9s cubic-bezier(.22, .61, .36, 1) both;
}

.obs-bar.spike { background: linear-gradient(180deg, rgba(226, 72, 60, 0.85), rgba(226, 72, 60, 0.3)); }

@keyframes obs-bar-grow {
  from { height: 0%; }
  to { height: var(--bar-h, 50%); }
}

.obs-bar:nth-child(1) { animation-delay: 0s; }
.obs-bar:nth-child(2) { animation-delay: .03s; }
.obs-bar:nth-child(3) { animation-delay: .06s; }
.obs-bar:nth-child(4) { animation-delay: .09s; }
.obs-bar:nth-child(5) { animation-delay: .12s; }
.obs-bar:nth-child(6) { animation-delay: .15s; }
.obs-bar:nth-child(7) { animation-delay: .18s; }
.obs-bar:nth-child(8) { animation-delay: .21s; }
.obs-bar:nth-child(9) { animation-delay: .24s; }
.obs-bar:nth-child(10) { animation-delay: .27s; }
.obs-bar:nth-child(11) { animation-delay: .3s; }
.obs-bar:nth-child(12) { animation-delay: .33s; }

/* ── Hero preview: Logs panel ── */
.obs-log-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--mkt-bg-soft);
  border: 1px solid var(--mkt-border);
  font-size: 0.8rem;
}

.obs-log-search-icon { color: var(--mkt-muted); }
.obs-log-search { color: var(--mkt-text); font-family: var(--font-mono, monospace); }

.obs-log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--mkt-border);
  overflow: hidden;
}

.obs-log-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.78rem;
  background: var(--mkt-surface);
  border-bottom: 1px solid var(--mkt-border);
  animation: obs-row-in .5s ease both;
}

.obs-log-line:last-child { border-bottom: none; }
.obs-log-line:nth-child(1) { animation-delay: 0s; }
.obs-log-line:nth-child(2) { animation-delay: .05s; }
.obs-log-line:nth-child(3) { animation-delay: .1s; }
.obs-log-line:nth-child(4) { animation-delay: .15s; }
.obs-log-line:nth-child(5) { animation-delay: .2s; }
.obs-log-line:nth-child(6) { animation-delay: .25s; }

@keyframes obs-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

.obs-log-time { color: var(--mkt-muted); font-family: var(--font-mono, monospace); flex-shrink: 0; }

.obs-log-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.obs-log-badge.error { background: rgba(226, 72, 60, 0.12); color: var(--danger); }
.obs-log-badge.warn { background: rgba(217, 155, 33, 0.14); color: var(--warning); }
.obs-log-badge.info { background: var(--mkt-bg-soft); color: var(--mkt-muted); }

.obs-log-msg { color: var(--mkt-text); }

/* ── Hero preview: Traces panel ── */
.obs-trace-list { display: flex; flex-direction: column; gap: 8px; }

.obs-trace-row {
  display: grid;
  grid-template-columns: 120px 1fr 48px;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  animation: obs-row-in .5s ease both;
}

.obs-trace-row:nth-child(1) { animation-delay: 0s; }
.obs-trace-row:nth-child(2) { animation-delay: .06s; }
.obs-trace-row:nth-child(3) { animation-delay: .12s; }
.obs-trace-row:nth-child(4) { animation-delay: .18s; }
.obs-trace-row:nth-child(5) { animation-delay: .24s; }
.obs-trace-row:nth-child(6) { animation-delay: .3s; }

.obs-trace-row.indent-1 .obs-trace-name { padding-left: 14px; }
.obs-trace-row.indent-2 .obs-trace-name { padding-left: 28px; }
.obs-trace-row.indent-3 .obs-trace-name { padding-left: 42px; }

.obs-trace-name { color: var(--mkt-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obs-trace-track {
  position: relative;
  height: 10px;
  border-radius: 4px;
  background: var(--mkt-bg-soft);
}

.obs-trace-bar {
  position: absolute;
  top: 0;
  left: var(--bar-l, 0%);
  height: 100%;
  border-radius: 4px;
  background: var(--mkt-text);
  opacity: 0.7;
  animation: obs-bar-grow-w 0.8s cubic-bezier(.22, .61, .36, 1) both;
}

.obs-trace-bar.warn { background: var(--warning); opacity: 0.85; }
.obs-trace-bar.bad { background: var(--danger); opacity: 0.85; }

@keyframes obs-bar-grow-w {
  from { width: 0%; }
  to { width: var(--bar-w, 20%); }
}

.obs-trace-ms { color: var(--mkt-muted); text-align: right; font-family: var(--font-mono, monospace); }

/* ── Hero preview: Infrastructure panel ── */
.obs-host-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.obs-host-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--mkt-bg-soft);
  border: 1px solid var(--mkt-border);
  border-left: 3px solid var(--success);
  animation: obs-row-in .5s ease both;
}

.obs-host-card:nth-child(odd) { animation-delay: .05s; }
.obs-host-card:nth-child(even) { animation-delay: .12s; }

.obs-host-card.warn { border-left-color: var(--warning); }
.obs-host-card.bad { border-left-color: var(--danger); }

.obs-host-name { font-size: 0.8rem; font-weight: 700; color: var(--mkt-text); }
.obs-host-metric { font-size: 0.72rem; color: var(--mkt-muted); }

@media (max-width: 720px) {
  .obs-host-grid { grid-template-columns: repeat(2, 1fr); }
  .obs-trace-row { grid-template-columns: 90px 1fr 40px; }
}

.obs-incident-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(226, 72, 60, 0.06);
  border: 1px solid rgba(226, 72, 60, 0.2);
}

.obs-incident-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 10px var(--danger);
  flex-shrink: 0;
  margin-top: 4px;
}

.obs-incident-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mkt-text);
  transition: opacity .3s ease;
}

.obs-incident-detail {
  font-size: 0.78rem;
  color: var(--mkt-muted);
  margin-top: 3px;
  transition: opacity .3s ease;
}

.obs-ai-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--mkt-accent-soft);
  border: 1px solid rgba(23, 102, 212, 0.18);
}

.obs-ai-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--mkt-text);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

.obs-ai-label {
  font-size: 0.72rem;
  color: var(--mkt-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  font-weight: 700;
}

.obs-ai-text {
  font-size: 0.84rem;
  color: var(--mkt-text);
  line-height: 1.5;
  transition: opacity .3s ease;
}

/* ── Section Headers ── */
.section-eyebrow {
  display: inline-block;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: var(--mkt-accent);
  font-weight: 700;
  margin-bottom: 16px;
}

.section-heading {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 760px;
}

.section-lead {
  margin: 0;
  font-size: 1.05rem;
  color: var(--mkt-muted);
  line-height: 1.7;
  max-width: 640px;
}

/* ── Problem Section ── */
.problem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.problem-story {
  display: grid;
  gap: 20px;
}

.problem-story p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--mkt-muted);
  line-height: 1.72;
}

.problem-list {
  display: grid;
  gap: 10px;
}

.problem-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(226, 72, 60, 0.05);
  border: 1px solid rgba(226, 72, 60, 0.14);
  font-size: 0.9rem;
  color: var(--mkt-text);
}

.problem-item::before {
  content: "✗";
  color: var(--danger);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Feature Grid ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature-card-mkt {
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--mkt-surface);
  border: 1px solid var(--mkt-border);
  display: grid;
  gap: 12px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.feature-card-mkt:hover {
  border-color: var(--mkt-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(20, 18, 30, 0.08);
}

.feature-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--mkt-accent);
}

.feature-card-mkt h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1.2;
}

.feature-card-mkt p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mkt-muted);
  line-height: 1.65;
}

/* ── Cinematic Band ── */
.cinematic-band {
  position: relative;
  min-height: 380px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.cinematic-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.85) contrast(1.05) brightness(1.02);
}

.cinematic-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 40%, rgba(255, 255, 255, 0.5) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.5));
}

.cinematic-copy {
  position: relative;
  z-index: 1;
  padding: 60px 80px;
  max-width: 680px;
}

.cinematic-copy h2 {
  margin: 12px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cinematic-copy p {
  margin: 0;
  color: var(--mkt-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Audience Section ── */
.audience-grid-mkt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.audience-card-mkt {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--mkt-surface);
  border: 1px solid var(--mkt-border);
}

.audience-card-mkt .aud-eyebrow {
  font-size: 0.72rem;
  color: var(--mkt-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: 10px;
}

.audience-card-mkt h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mkt-text);
}

.audience-card-mkt p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--mkt-muted);
  line-height: 1.6;
}

/* ── Quote Band ── */
.mkt-quote-band {
  padding: 80px 36px;
  text-align: center;
  background: var(--mkt-bg-soft);
  border-top: 1px solid var(--mkt-border);
  border-bottom: 1px solid var(--mkt-border);
}

.mkt-quote-band blockquote {
  margin: 0 auto;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mkt-quote-band .quote-attr {
  display: block;
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--mkt-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* ── CTA Section ── */
.mkt-cta-section {
  text-align: center;
  padding: 100px 36px;
  max-width: 800px;
  margin: 0 auto;
}

.mkt-cta-section h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--mkt-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mkt-cta-section p {
  margin: 0 0 36px;
  font-size: 1.05rem;
  color: var(--mkt-muted);
  line-height: 1.68;
}

.mkt-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Site Footer ── */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
  padding: 48px 36px;
  border-top: 1px solid var(--mkt-border);
  max-width: 1280px;
  margin: 0 auto;
}

.footer-brand p {
  margin: 0 0 6px;
  font-size: 0.72rem;
  color: var(--mkt-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.footer-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--mkt-text);
  max-width: 380px;
  line-height: 1.5;
}

.footer-links-mkt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.footer-links-mkt a {
  color: var(--mkt-muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.14s;
}

.footer-links-mkt a:hover { color: var(--mkt-accent); }
.separate-site {
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

/* Public /terms and /privacy. Spacing only; color stays on the marketing variables. */
.legal-document {
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.legal-document .section-heading,
.legal-document .section-lead {
  margin: 0;
}

#legal-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#legal-content > * {
  margin: 0;
}

#legal-content h1,
#legal-content h2 {
  font-family: var(--font-display);
  color: var(--mkt-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

#legal-content h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
}

#legal-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 8px;
}

#legal-content p,
#legal-content li {
  color: var(--mkt-text);
  line-height: 1.65;
}

#legal-content a {
  color: var(--mkt-accent);
  font-weight: 600;
}

#legal-content ul,
#legal-content ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.3rem;
}

#legal-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.legal-table {
  overflow-x: auto;
}

#legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

#legal-content th,
#legal-content td {
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--mkt-border);
  padding: 8px 10px;
}

#legal-content th {
  background: var(--mkt-surface);
  color: var(--mkt-text);
  font-weight: 600;
}

/* ── Pricing ── */
#marketing-site .pricing-card {
  background: var(--mkt-surface);
  border-color: var(--mkt-border);
}

#marketing-site .pricing-card.featured {
  border-color: var(--mkt-accent);
  box-shadow: 0 0 0 1px var(--mkt-accent);
}

#marketing-site .pricing-card h3,
#marketing-site .pricing-card-price {
  color: var(--mkt-text);
}

#marketing-site .pricing-card-price span {
  color: var(--mkt-muted);
}

#marketing-site .pricing-feature-list {
  color: var(--mkt-muted);
}

#marketing-site .pricing-feature-list li::before {
  color: var(--mkt-accent);
}

#marketing-site .pricing-card .btn-primary {
  background: var(--mkt-text);
  width: 100%;
  margin-top: auto;
}

/* ── Marketing Responsive ── */
@media (max-width: 1100px) {
  .site-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px 28px;
  }
  .problem-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .audience-grid-mkt {
    grid-template-columns: repeat(2, 1fr);
  }
  .cinematic-copy {
    padding: 44px 48px;
  }
  .site-section {
    padding: 64px 28px;
  }
}

@media (max-width: 760px) {
  .site-topbar {
    grid-template-columns: 1fr auto;
    padding: 14px 20px;
  }
  .topbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--mkt-bg);
    padding: 16px 20px;
    border-bottom: 1px solid var(--mkt-border);
  }
  .topbar-nav.open { display: flex; }
  .topbar-actions { display: none; }
  .btn-topbar-toggle { display: flex; }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .audience-grid-mkt {
    grid-template-columns: 1fr;
  }
  .site-footer {
    grid-template-columns: 1fr;
  }
  .footer-links-mkt {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .cinematic-copy {
    padding: 32px 24px;
  }
  .mkt-cta-section {
    padding: 64px 24px;
  }
}
/* ── end marketing site ── */

/* ── alert tabs ── */
.alert-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; padding-bottom: 0; }
.alert-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 8px 14px; transition: color .15s, border-color .15s; }
.alert-tab-btn:hover { color: var(--text); }
.alert-tab-btn.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.alert-tab-panel { display: none; }
.alert-tab-panel.active { display: block; }

/* ── incident timeline ── */
.timeline-rail { display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.timeline-event { display: flex; gap: 12px; align-items: flex-start; position: relative; padding: 0 0 16px 0; }
.timeline-event::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.timeline-event:last-child::before { display: none; }
.timeline-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.timeline-dot.good { background: color-mix(in srgb, var(--success) 20%, transparent); border: 2px solid var(--success); }
.timeline-dot.warn { background: color-mix(in srgb, var(--warning) 20%, transparent); border: 2px solid var(--warning); }
.timeline-dot.bad { background: color-mix(in srgb, var(--danger) 20%, transparent); border: 2px solid var(--danger); }
.timeline-body { flex: 1; min-width: 0; }
.timeline-body strong { font-size: 13px; }
.timeline-body .small-meta { margin-top: 2px; }

/* ── user impact detail (RUM) ── */
.rum-impact-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 12px 0; }
.rum-impact-stat { background: var(--surface-elevated, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.rum-impact-stat .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rum-impact-stat .value { font-size: 20px; font-weight: 700; margin: 2px 0; }
.rum-impact-stat .sub { font-size: 11px; color: var(--muted); }
.rum-impact-stat.bad { border-color: var(--danger); }
.rum-impact-stat.warn { border-color: var(--warning); }
.rum-friction-list { list-style: none; padding: 0; margin: 0; }
.rum-friction-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rum-friction-list li:last-child { border: none; }
.rum-friction-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rum-friction-dot.bad { background: var(--danger); }
.rum-friction-dot.warn { background: var(--warning); }
.rum-friction-dot.good { background: var(--success); }

/* ── live log patterns (StreamLens RCA panel) ── */
.rca-pattern-panel { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.rca-pattern-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.rca-pattern-row:last-child { border: none; }
.rca-pattern-count { font-size: 11px; font-weight: 700; color: var(--danger); min-width: 36px; }
.rca-pattern-text { flex: 1; font-family: var(--font-mono, monospace); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rca-spike-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); font-weight: 600; white-space: nowrap; }

/* ── service dependency map ── */
.dep-map-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dep-map-row:last-child { border: none; }
.dep-arrow { color: var(--muted); font-size: 13px; }
.dep-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-elevated, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 12px; }
.dep-chip.bad { border-color: var(--danger); }
.dep-chip.warn { border-color: var(--warning); }

/* ── noise-reduction rule chip ── */
.nr-rule-chip { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-elevated, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 13px; }
.nr-rule-chip .nr-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Paywall overlay ── */
#paywall-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.paywall-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.paywall-modal { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 40px 36px; max-width: 420px; width: 90%; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,0.4); }
.paywall-icon { font-size: 48px; margin-bottom: 16px; }
.paywall-title { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.paywall-msg { font-size: 14px; color: var(--muted); margin: 0 0 24px; line-height: 1.6; }
.paywall-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

/* ── Trial warning banner ── */
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; font-size: 13px; font-weight: 500; }
.trial-banner-critical { background: var(--danger); color: #fff; }
.trial-banner-warning { background: var(--warning); color: #000; }
.trial-banner-close { background: none; border: none; cursor: pointer; font-size: 16px; opacity: 0.7; color: inherit; padding: 0 4px; }
.trial-banner-close:hover { opacity: 1; }

/* ── Inline expiry alert (usage page) ── */
.paywall-inline-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); font-size: 13px; font-weight: 500; color: var(--danger); }
.paywall-inline-warning { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.paywall-inline-caution { background: color-mix(in srgb, var(--warning) 15%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--text); }
.paywall-expired-panel { border-color: var(--danger) !important; }

/* ── Digital Payments Intelligence ────────────────────────────────────────── */
.pay-section-hero { margin-bottom: 20px; }
.pay-section-hero h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.pay-section-hero p { font-size: 13px; color: var(--muted); margin: 0; }
.pay-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pay-kpi-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 16px; }
.pay-kpi-card.critical { border-color: var(--danger); }
.pay-kpi-card.warning { border-color: var(--warning); }
.pay-kpi-card.clickable { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.pay-kpi-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.18); border-color: var(--accent); }
.pay-kpi-card.clickable:active { transform: translateY(0); }
.pay-kpi-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; margin-bottom: 6px; }
.pay-kpi-value { font-size: 26px; font-weight: 700; line-height: 1; }
.pay-kpi-value.good { color: var(--success); }
.pay-kpi-value.bad { color: var(--danger); }
.pay-kpi-value.warn { color: var(--warning); }
.pay-kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.pay-status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.pay-status-badge.good { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.pay-status-badge.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.pay-status-badge.warn { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.pay-status-badge.neutral { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.pay-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pay-table th { padding: 8px 10px; text-align: left; border-bottom: 2px solid var(--panel-border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.pay-table td { padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
.pay-table tr:hover td { background: rgba(93,226,198,0.04); }
.pay-txn-id { font-family: monospace; font-size: 11px; color: var(--accent); cursor: pointer; }
.pay-txn-id:hover { text-decoration: underline; }
.pay-amount { font-weight: 600; }
.pay-amount.large { color: var(--warning); }
.pay-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pay-filter-bar select, .pay-filter-bar input { padding: 5px 10px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); font-size: 12px; color: var(--text); outline: none; }
.pay-filter-bar select:focus, .pay-filter-bar input:focus { border-color: var(--accent); }
.pay-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.pay-timeline::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--panel-border); }
.pay-tl-item { display: flex; gap: 14px; padding: 10px 0; position: relative; }
.pay-tl-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; z-index: 1; position: relative; }
.pay-tl-dot.good { background: var(--success); }
.pay-tl-dot.bad { background: var(--danger); }
.pay-tl-dot.warn { background: var(--warning); }
.pay-tl-dot.neutral { background: var(--muted); }
.pay-tl-body { flex: 1; }
.pay-tl-title { font-size: 13px; font-weight: 600; }
.pay-tl-time { font-size: 11px; color: var(--muted); }
.pay-tl-detail { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pay-heatmap { display: grid; grid-template-columns: 140px repeat(24, 1fr); gap: 2px; font-size: 10px; margin-bottom: 8px; }
.pay-heatmap-label { padding: 3px 0; color: var(--muted); font-size: 11px; display: flex; align-items: center; }
.pay-heatmap-cell { height: 20px; border-radius: var(--radius-sm); }
.pay-heatmap-cell.good { background: color-mix(in srgb, var(--success) 40%, transparent); }
.pay-heatmap-cell.warn { background: color-mix(in srgb, var(--warning) 50%, transparent); }
.pay-heatmap-cell.bad { background: color-mix(in srgb, var(--danger) 60%, transparent); }
.pay-heatmap-cell.ok { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.pay-heatmap-cell.empty { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.pay-doc-link { color: var(--accent); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.pay-exc-badge.neutral { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--text); }
.pay-connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pay-connector-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 18px; transition: transform 0.12s, box-shadow 0.12s; }
.pay-connector-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.pay-connector-card.status-connected { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.pay-connector-card.status-degraded { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.pay-connector-card.status-disconnected { opacity: 0.75; }
.pay-conn-status-connected { color: var(--accent); font-size: 11px; font-weight: 700; }
.pay-conn-status-degraded { color: var(--warning); font-size: 11px; font-weight: 700; }
.pay-conn-status-disconnected { color: var(--muted); font-size: 11px; font-weight: 600; }
/* Connector modals */
#pay-connector-modal input, #pay-connector-modal select { transition: border-color 0.15s; }
#pay-connector-modal input:focus, #pay-connector-modal select:focus { outline: none; border-color: var(--accent); }
.pay-subnav-bar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--panel-border); }
.pay-subnav-bar button { cursor: pointer; }
.pay-ai-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-sm); padding: 24px; margin-bottom: 16px; }
.pay-ai-narrative { font-size: 14px; line-height: 1.7; color: var(--text); }
.pay-ai-evidence { list-style: none; padding: 0; margin: 0; }
.pay-evidence-row { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 10px 14px; }
.pay-evidence-row:hover { border-color: var(--accent); }
.pay-ai-query-input { width: 100%; padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: 13px; }
.pay-ai-query-input:focus { outline: none; border-color: var(--accent); }
.pay-money-at-risk { font-size: 32px; font-weight: 800; color: var(--warning); }
.pay-pending-alert { background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px; font-size: 13px; }
.pay-aging-bucket { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.pay-aging-bucket.age-ok { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pay-aging-bucket.age-warn { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.pay-aging-bucket.age-crit { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pay-time-btns { display: flex; gap: 4px; margin-bottom: 14px; }
.pay-time-btn { padding: 4px 10px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 5px; font-size: 11px; cursor: pointer; color: var(--text); }
.pay-time-btn.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.pay-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 2px solid var(--panel-border); }
.pay-tab-btn { padding: 8px 14px; background: none; border: none; cursor: pointer; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s; }
.pay-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pay-tab-btn:hover:not(.active) { color: var(--text); }
.pay-tab-panel { display: none; }
.pay-tab-panel.active { display: block; }
.pay-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.pay-spark-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 3px; }
.pay-rail-row { display: grid; grid-template-columns: 140px repeat(7, 1fr); gap: 4px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--panel-border); font-size: 12px; }
.pay-rail-row.header { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; letter-spacing: 0.4px; }
.pay-rail-row:last-child { border: none; }
.pay-rail-name { font-weight: 600; font-size: 12px; }
.pay-provider-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 14px 16px; }
.pay-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pay-exc-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 16px; }
.pay-exc-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; }
.pay-exc-badge.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.pay-exc-badge.warn { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.pay-exc-badge.ok { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.pay-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.pay-detail-item { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 10px 14px; }
.pay-detail-label { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; margin-bottom: 4px; }
.pay-detail-value { font-size: 13px; font-weight: 600; font-family: monospace; }
.pay-rec-list { list-style: none; padding: 0; margin: 12px 0; }
.pay-rec-list li { padding: 8px 12px 8px 32px; position: relative; font-size: 13px; border-bottom: 1px solid var(--panel-border); }
.pay-rec-list li::before { content: '→'; position: absolute; left: 10px; color: var(--accent); font-weight: 700; }
.pay-section-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .pay-section-two-col { grid-template-columns: 1fr; } }
.pay-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.pay-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pay-bar-label { width: 130px; flex-shrink: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-bar-track { flex: 1; height: 12px; background: rgba(0,0,0,0.06); border-radius: var(--radius-sm); overflow: hidden; }
.pay-bar-fill { height: 100%; border-radius: var(--radius-sm); }
.pay-bar-fill.bad { background: var(--danger); }
.pay-bar-fill.warn { background: var(--warning); }
.pay-bar-fill.good { background: var(--success); }
.pay-bar-val { width: 60px; text-align: right; color: var(--muted); font-family: monospace; }

/* ══════════════════════════════════════════════════════════════════════════
   Resource Investigation Drawer — opens over Topology (and anywhere else that
   links to a resource) without navigating away, so pan/filter state on the
   page underneath is never lost.
   ══════════════════════════════════════════════════════════════════════════ */
.resource-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 20, 0.32);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.resource-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.resource-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--panel-border);
  box-shadow: -12px 0 32px rgba(20, 18, 30, 0.16);
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.resource-drawer.open {
  transform: translateX(0);
}

.resource-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.resource-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resource-drawer-title-row h3 {
  margin: 0;
  font-size: 1.05rem;
}

.resource-drawer-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.resource-drawer-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.resource-drawer-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
  overflow-x: auto;
}

.resource-drawer-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.resource-drawer-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.resource-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.resource-drawer-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-drawer-skeleton .skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel-strong) 25%, rgba(0, 0, 0, 0.06) 37%, var(--panel-strong) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 0.8s ease infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.resource-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.resource-tag-chip {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.76rem;
  color: var(--muted);
}

.resource-json-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.resource-json-view {
  background: var(--bg-soft, #14121f);
  color: #d7d4e6;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.resource-json-view mark {
  background: rgba(255, 210, 90, 0.55);
  color: inherit;
  border-radius: 2px;
}

.resource-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.resource-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 150ms ease, transform 150ms ease;
}

.resource-action-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.resource-action-card strong {
  font-size: 0.88rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Incidents
   ══════════════════════════════════════════════════════════════════════════ */
.incident-severity-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.incident-severity-badge.sev1 { background: rgba(217, 57, 74, 0.14); color: var(--danger); }
.incident-severity-badge.sev2 { background: rgba(217, 57, 74, 0.1); color: var(--danger); }
.incident-severity-badge.sev3 { background: rgba(196, 138, 28, 0.14); color: var(--warning); }
.incident-severity-badge.sev4 { background: rgba(23, 102, 212, 0.1); color: var(--accent); }

.incident-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--panel-strong);
  color: var(--muted);
}

.incident-status-pill.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--danger);
  animation: status-pulse 1.6s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217, 57, 74, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(217, 57, 74, 0); }
}

.incident-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

.incident-timeline-entry {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 2px solid var(--panel-border);
  margin-left: 5px;
}

.incident-timeline-entry:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.incident-timeline-entry::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--panel);
}

/* ══════════════════════════════════════════════════════════════════════════
   Workflow Automation — step-list builder
   ══════════════════════════════════════════════════════════════════════════ */
.workflow-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.workflow-step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
}

.workflow-step-index {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workflow-step-type-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
}

.workflow-step-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.workflow-step-actions button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.9rem;
}

/* Colored per-type badges for workflow steps — mirrors resource-type-badge/alert-type-icon so a
   step chain reads as distinct colored actions rather than identical gray rows. */
.workflow-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
}

.workflow-step-icon.notify { background: var(--warning); }
.workflow-step-icon.incident-note { background: var(--danger); }
.workflow-step-icon.sync { background: var(--success); }
.workflow-step-icon.flag { background: var(--purple); }
.workflow-step-icon.condition { background: #4c3a86; }
.workflow-step-icon.approval { background: #0f766e; }
.workflow-step-icon.builder { background: var(--accent); }

.workflow-step-icon.large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(20, 18, 30, 0.12);
  margin-right: 0;
}

.workflow-step-icon.large svg { width: 28px; height: 28px; }

.workflow-step-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.workflow-step-type-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color 150ms ease, background 150ms ease;
}

.workflow-step-type-chip:hover { border-color: rgba(23, 102, 212, 0.4); }

.workflow-step-type-chip.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.workflow-step-type-chip .workflow-step-icon { margin-right: 0; }

@media (max-width: 720px) {
  .workflow-step-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.slo-target-icon.large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(20, 18, 30, 0.12);
  flex-shrink: 0;
}

.slo-target-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.slo-target-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 150ms ease, background 150ms ease;
}

.slo-target-card:hover { border-color: rgba(23, 102, 212, 0.4); }

.slo-target-card.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.slo-target-card-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.slo-target-card-label {
  font-size: 0.72rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .slo-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Team role picker + invite-link/SSO shared card & chip styles. */
.team-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.team-role-icon.viewer { background: var(--muted); }
.team-role-icon.admin { background: var(--accent); }
.team-role-icon.invite { background: var(--purple); }
.team-role-icon.invite-link { background: #0f766e; }

.team-role-icon.large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(20, 18, 30, 0.12);
}

.team-role-icon.large svg { width: 28px; height: 28px; }

.team-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.team-role-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: border-color 150ms ease, background 150ms ease;
}

.team-role-card:hover { border-color: rgba(23, 102, 212, 0.4); }

.team-role-card.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.team-role-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .team-role-grid { grid-template-columns: 1fr; }
}

/* Generic quick-select chip row — invite link presets, and anywhere else a shortcut sits next to
   a still-editable custom input. */
.preset-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.preset-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.preset-chip:hover { border-color: rgba(23, 102, 212, 0.4); color: var(--text); }

.preset-chip.selected {
  border-color: var(--accent);
  background: var(--accent-warm-soft);
  color: var(--accent);
}

/* SSO protocol picker */
.sso-protocol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sso-protocol-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: border-color 150ms ease, background 150ms ease;
}

.sso-protocol-card:hover { border-color: rgba(23, 102, 212, 0.4); }

.sso-protocol-card.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.sso-protocol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.sso-protocol-icon.oidc { background: var(--accent); }
.sso-protocol-icon.saml { background: #0f766e; }

.sso-protocol-icon.large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(20, 18, 30, 0.12);
}

.sso-protocol-icon.large svg { width: 28px; height: 28px; }

@media (max-width: 720px) {
  .sso-protocol-grid { grid-template-columns: 1fr; }
}

.workflow-run-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workflow-run-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  font-size: 0.82rem;
}

.workflow-run-status-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 5px;
}

.workflow-run-status-dot.ok, .workflow-run-status-dot.succeeded { background: var(--success); }
.workflow-run-status-dot.error, .workflow-run-status-dot.failed { background: var(--danger); }
.workflow-run-status-dot.waiting, .workflow-run-status-dot.waiting_approval { background: var(--warning); }
.workflow-run-status-dot.condition_failed, .workflow-run-status-dot.stopped { background: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Marketing — pricing section + announcement strip
   ══════════════════════════════════════════════════════════════════════════ */
.announcement-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--text);
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
}

.announcement-strip a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin: 40px auto 0;
  padding: 0 24px;
}

.pricing-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.pricing-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pricing-card-head h3 { margin: 0; }
.pricing-recommended { flex: 0 0 auto; }
.pricing-card-price.is-trial {
  font-size: 1.55rem;
  line-height: 1.25;
}

.pricing-card-price {
  font-size: 2.2rem;
  font-family: var(--font-display);
}

.pricing-card-price span {
  font-size: 0.9rem;
  color: var(--muted);
  font-family: var(--font-body);
}
#marketing-pricing-grid.pricing-grid { display: block; }
#marketing-pricing-grid .pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
#marketing-pricing-grid .pricing-billing { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
#marketing-pricing-grid .pricing-billing-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#marketing-pricing-grid .pricing-billing-label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--panel-border); border-radius: var(--radius); cursor: pointer;
}
#marketing-pricing-grid .pricing-billing-input:checked + .pricing-billing-label { border-color: var(--accent); }
#marketing-pricing-grid .plan-price-year { display: none; }
#marketing-pricing-grid .pricing-offer:has(#mkt-bill-year:checked) .plan-price-month { display: none; }
#marketing-pricing-grid .pricing-offer:has(#mkt-bill-year:checked) .plan-price-year { display: inline; }

.pricing-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--muted);
}

.pricing-feature-list li::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 900px) {
  .resource-drawer {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-drawer,
  .resource-drawer-backdrop,
  .onboarding-card,
  .resource-action-card {
    transition: none !important;
  }
  .incident-status-pill.live::before,
  .resource-drawer-skeleton .skeleton-line {
    animation: none !important;
  }
}

/* Dashboard builder — graph-type picker (widget chart shape) + audience picker, both pure
   DOM-only toggles matching the SLO target / team role card pattern. */
.graph-type-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.graph-type-grid.audience-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
}

.graph-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--text);
  text-transform: capitalize;
  transition: border-color 150ms ease, background 150ms ease;
}

.graph-type-card:hover { border-color: rgba(23, 102, 212, 0.4); }

.graph-type-card.selected {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--panel-strong);
}

.graph-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.graph-type-icon.line { background: var(--success); }
.graph-type-icon.bar { background: var(--accent); }
.graph-type-icon.area { background: var(--purple); }
.graph-type-icon.pie { background: #4c3a86; }
.graph-type-icon.table { background: #544f7d; }
.graph-type-icon.single { background: var(--danger); }
.graph-type-icon.heatmap { background: #0f766e; }

.graph-type-icon.sre { background: var(--success); }
.graph-type-icon.product { background: var(--purple); }
.graph-type-icon.executive { background: var(--accent); }
.graph-type-icon.platform { background: #4c3a86; }

@media (max-width: 900px) {
  .graph-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .graph-type-grid.audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════════
   UI FIX PROGRAM — merge anchors. Each agent adds CSS only inside its own block.
   ════════════════════════════════════════════════════════════════════════════ */

/* ==== ui-fix:a01 (foundation) ==== */

/* UI-031 — one page header. A page that renders pageHeader() / .section-hero as a direct child of
   its <section> owns the header, so the shell's fallback header (#page-topbar) hides itself. Detail
   pages and anything without its own header keep the shell header (title + description). */
.content:has(> .section.active > .section-hero) > .topbar,
.content:has(> .section.active > .pay-section-hero) > .topbar {
  display: none;
}

.topbar-main {
  align-items: center;
}

.section-hero .page-header-aside {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.page-header-actions .link-btn {
  font-size: 0.88rem;
}

/* UI-032 — the floating bottom-right chip is gone; "Page settings" lives in the header instead and
   its panel opens under the header rather than over the bottom of the page. */
.page-settings-btn {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 0.8rem;
  gap: 6px;
}

.page-settings-btn.is-hidden {
  display: none;
}

.feature-settings-drawer {
  top: 84px;
  bottom: auto;
}

/* UI-033 — card titles sat vertically centred in stretched grid cells (a grid's implicit rows
   stretch to fill the cell). Pack panel content at the top instead. */
.panel {
  align-content: start;
}

/* UI-034 — KPI rows size to their card count instead of a fixed 4 columns (no empty quarter). */
.kpi-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* UI-035 — the global .good/.warn/.bad background utilities turned coloured KPI sub-labels into solid
   bars with the text painted the same colour as the bar. Sub-labels are text again. */
.kpi-tile-delta.good,
.kpi-tile-delta.warn,
.kpi-tile-delta.bad,
.metric-delta.good,
.metric-delta.warn,
.metric-delta.bad {
  background: none;
}

.kpi-tile-delta.good {
  color: var(--success);
}

/* kpiRow() bar: a scaled track with a fill, always paired with the text sub-label. */
.kpi-tile-bar {
  height: 6px;
  margin: 6px 0 2px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.kpi-tile-bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

.kpi-tile-bar-fill.good { background: var(--success); }
.kpi-tile-bar-fill.warn { background: var(--warning); }
.kpi-tile-bar-fill.bad { background: var(--danger); }

/* labeledField() */
.ui-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ui-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.ui-field-optional {
  font-weight: 400;
  color: var(--muted);
}

.ui-field-required {
  color: var(--danger, #b42318);
  font-weight: 700;
}

.auth-required-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.ui-field-hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

/* emptyState() */
.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.empty-state-actions .primary-btn,
.empty-state-actions .ghost-btn {
  margin-top: 0;
}

/* severityBadge() / outcomeBadge() extra tones (.good/.warn/.bad already exist) */
.badge.info {
  color: #1d5fa8;
  background: rgba(29, 95, 168, 0.1);
}

.badge.neutral {
  color: var(--muted);
  background: rgba(0, 0, 0, 0.06);
}

/* copyButton() */
.copy-btn {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 0.75rem;
}

.copy-btn.is-copied {
  color: var(--success);
}

/* ==== ui-fix:a02 (shell & navigation) ==== */
/* reserved: a02 adds its CSS directly below this line */

/* UI-036 — the sidebar column is dark all the way down, however long the page. The sidebar itself stays
   sticky at viewport height; the shell paints the same color behind it for the rest of the column. */
@media (min-width: 1101px) {
  .app-shell {
    background: linear-gradient(to right, var(--sidebar-bg) 0, var(--sidebar-bg) 236px, transparent 236px);
  }

  /* UI-037 — only the nav list scrolls (brand, search and account stay put)… */
  .sidebar {
    overflow: hidden;
  }
}

/* …and its edges fade while more items sit above/below, so nothing looks cut in half. */
.sidebar-nav {
  --nav-fade: 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sidebar-nav.has-more-below {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade)), transparent);
}
.sidebar-nav.has-more-above {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--nav-fade));
  mask-image: linear-gradient(to bottom, transparent, #000 var(--nav-fade));
}
.sidebar-nav.has-more-above.has-more-below {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--nav-fade), #000 calc(100% - var(--nav-fade)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--nav-fade), #000 calc(100% - var(--nav-fade)), transparent);
}
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

/* UI-039 — one compact brand row instead of logo + two-line wordmark + tagline. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 4px;
  min-width: 0;
}
.sidebar-brand .brand-logo-img {
  width: 28px;
  height: 28px;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.sidebar-brand .brand-name {
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* UI-045 — inline SVG icons, sized and tinted by the item. */
.sidebar .nav-icon {
  width: 16px;
  height: 16px;
  font-size: 0;
}
.nav-icon svg,
.nav-chev svg {
  display: block;
}
.nav-chev {
  width: 12px;
  height: 12px;
  color: var(--sidebar-text);
}
.nav-item {
  min-width: 0;
}
.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UI-040 — Solution Areas keep their names and gain a plain descriptor underneath. */
.nav-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.nav-desc {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--sidebar-text);
  opacity: 0.75;
  white-space: normal;
  line-height: 1.3;
}
.nav-item:has(.nav-desc) {
  align-items: flex-start;
}
.nav-item:has(.nav-desc) .nav-icon {
  margin-top: 2px;
}
.nav-flyout .nav-desc {
  color: var(--muted);
}

/* UI-050 — hover is a light tint only; the accent bar and bold label belong to the one active item. */
.sidebar .nav-item:hover,
.nav-flyout .nav-item:hover {
  border-left-color: transparent;
}
.sidebar .nav-item.active,
.sidebar .nav-item.active:hover {
  border-left-color: #e3a458;
}
.nav-flyout .nav-item.active,
.nav-flyout .nav-item.active:hover {
  border-left-color: var(--accent);
}
.nav-item:focus-visible,
.nav-group-label:focus-visible {
  outline: 2px solid #e3a458;
  outline-offset: -2px;
}

/* Permanent "Connect Data" entry. */
.sidebar .nav-connect:not(.active) .nav-icon {
  color: #e3a458;
}


/* UI-046 — footer identity: full name and workspace are in title tooltips. */
.sidebar-account {
  padding-top: 10px;
}
.sidebar .account-menu-trigger {
  padding: 6px;
}
.sidebar .account-menu-text strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* UI-047/048/049 — shell bar: workspace + environment, data freshness, refresh, global time range. */
.shell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--panel-border);
}
.demo-workspace-banner {
  display: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #d8b66a;
  border-radius: var(--radius-md, 10px);
  background: #fff8e5;
  color: #49370b;
  font-size: 0.82rem;
  line-height: 1.45;
}
.demo-workspace-banner strong { white-space: nowrap; }
.demo-workspace-banner.is-explicit-demo:not([hidden]) { display: flex; }
.demo-workspace-banner[hidden] { display: none !important; }
.shell-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.85rem;
}
.shell-context-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shell-workspace-name {
  color: var(--text);
  font-weight: 600;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-workspace-name.is-loading,
#account-menu-workspace.is-loading {
  display: inline-flex;
  align-items: center;
  min-width: 9rem;
  min-height: 0.85rem;
}
.shell-workspace-skeleton {
  display: block;
  width: 9rem;
  height: 0.85rem;
  border-radius: 6px;
}
#account-menu-workspace .shell-workspace-skeleton {
  width: 7rem;
  height: 0.7rem;
}
.shell-boot-skeleton {
  display: grid;
  gap: 14px;
  padding: 4px 0 20px;
}
.shell-boot-skeleton[hidden] {
  display: none !important;
}
.shell-boot-title {
  width: min(240px, 50%);
  height: 28px;
}
.shell-boot-block {
  width: 100%;
  height: 96px;
  border-radius: 12px;
}
.shell-boot-block-short {
  width: min(100%, 720px);
  height: 64px;
}
@media (prefers-reduced-motion: reduce) {
  .shell-workspace-skeleton,
  .shell-boot-skeleton .skeleton {
    animation: none;
  }
}
.shell-env-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.shell-env-badge.is-nonprod {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, var(--panel));
  color: var(--text, inherit);
}
.shell-env-badge.is-hidden {
  display: none;
}
.shell-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: 0;
}
.shell-updated {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: default;
}
.shell-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
}
.shell-refresh-btn:hover {
  border-color: rgba(23, 102, 212, 0.4);
}
.shell-refresh-btn.is-busy svg {
  animation: shell-spin 900ms linear infinite;
}
.shell-refresh-btn:disabled {
  cursor: progress;
  opacity: 0.75;
}
@keyframes shell-spin {
  to {
    transform: rotate(360deg);
  }
}
.shell-timerange {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}
.shell-timerange svg {
  position: absolute;
  left: 9px;
  pointer-events: none;
}
.shell-timerange select {
  min-height: 32px;
  padding: 5px 10px 5px 30px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}
.shell-timerange-note {
  margin-left: 6px;
  color: var(--warning);
  font-size: 0.7rem;
  white-space: nowrap;
}
.shell-timerange select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
.shell-timerange select:focus-visible,
.shell-refresh-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.live-indicator {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .shell-refresh-btn span {
    display: none;
  }
  .shell-workspace-name {
    max-width: 60vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-refresh-btn.is-busy svg {
    animation: none;
  }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a03 (routing & search) ==== */
/* reserved: a03 adds its CSS directly below this line */
/* UI-050b — detail pages open with a left-aligned "List / Current" breadcrumb instead of a centered back link;
   the shell header (which kept the list name) hides while one is shown. */
.content:has(> .section.active > .detail-breadcrumb) > .topbar {
  display: none;
}

.detail-breadcrumb {
  margin: 0 0 12px;
  text-align: left;
  min-width: 0;
}

.detail-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.detail-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
}

.detail-breadcrumb-item + .detail-breadcrumb-item::before {
  content: "/";
  margin: 0 8px;
  color: var(--muted);
  opacity: 0.7;
}

.detail-breadcrumb-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  border-radius: 4px;
}

.detail-breadcrumb-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.detail-breadcrumb-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.detail-breadcrumb-current span {
  display: inline-block;
  max-width: min(70vw, 720px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--text);
  font-weight: 600;
}

/* UI-281 / UI-282 — Jump-to results listbox under the sidebar search. */
.nav-flat-group.nav-group-hidden-by-search,
.nav-pinned.nav-group-hidden-by-search {
  display: none;
}

.jump-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  background: #1c1a2a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  color: var(--sidebar-text-active);
}

.jump-results[hidden] {
  display: none;
}

.jump-group + .jump-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--sidebar-border);
}

.jump-group-label {
  padding: 4px 8px 2px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-text);
}

.jump-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.84rem;
  line-height: 1.3;
}

.jump-option.is-active {
  background: var(--sidebar-active-bg);
  box-shadow: inset 2px 0 0 var(--accent);
}

.jump-option-label {
  overflow-wrap: anywhere;
}

.jump-option-label.is-mono {
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.jump-option-hint {
  font-size: 0.72rem;
  color: var(--sidebar-text);
}

.jump-empty {
  padding: 8px;
  font-size: 0.8rem;
  color: var(--sidebar-text);
}

.jump-results-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a04 (marketing & sign-up) ==== */
/* reserved: a04 adds its CSS directly below this line */
/* Landing page: phone header CTA (UI-002), announcement bar (UI-006), tagline contrast (UI-007), hero CTAs (UI-001/003) */
.topbar-logo-link { display: inline-flex; border-radius: 10px; }
.topbar-logo-link:focus-visible { outline: 2px solid var(--mkt-accent); outline-offset: 3px; }
/* UI-005 (blocked on a transparent logo): frame the existing black JPG as a deliberate dark badge. */
.topbar-logo-img { background: #000; padding: 3px 6px; border-radius: 10px; box-sizing: content-box; height: 38px; }
.announcement-strip .announce-short { display: none; }
.announcement-strip a { white-space: nowrap; }
.hero-tagline { color: var(--mkt-accent-strong); } /* #114ea3 on white ≈ 7:1 */
.topbar-nav-signin { display: none; }
.hero-signin-line { margin: -6px 0 0; font-size: 0.9rem; color: var(--mkt-muted); }
.hero-signin-phone { display: none; }
.hero-text-link {
  appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--mkt-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (max-width: 760px) {
  .site-topbar { grid-template-columns: 1fr auto auto; gap: 10px; }
  .topbar-actions { display: flex; }
  .topbar-actions #mkt-signin-btn { display: none; }
  .topbar-actions .btn-topbar-cta { padding: 9px 16px; white-space: nowrap; }
  .topbar-logo-img { height: 32px; }
  .topbar-nav-signin {
    display: block; appearance: none; border: 0; background: none; font: inherit; font-size: 0.9rem; text-align: left;
    color: var(--mkt-text); font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  }
  .announcement-strip { font-size: 0.8rem; padding: 8px 14px; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
  .announcement-strip .announce-long { display: none; }
  .announcement-strip .announce-short { display: inline; }
  .hero-signin-phone { display: inline; }
  .site-hero { padding: 56px 20px 64px; }
}
/* The single-column hero used `1fr` (min-content), so the preview tabs pushed the page wider than a phone. */
@media (max-width: 1100px) {
  .site-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-preview-tabs { max-width: 100%; overflow-x: auto; }
}

/* Auth dialog */
.auth-overlay { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.auth-overlay .auth-modal {
  margin: auto;
  max-height: none;
  overflow: hidden;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.08);
}
@media (min-width: 761px) {
  .auth-overlay .auth-modal { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.auth-panel { justify-content: flex-start; align-items: stretch; gap: 4px; padding: 20px 40px 32px; }
.auth-panel .auth-overlay-back {
  position: static;
  align-self: flex-start;
  margin-left: -10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.auth-panel .auth-overlay-back:hover,
.auth-panel .auth-overlay-back:focus-visible { color: var(--text); background: rgba(0, 0, 0, 0.05); }
.auth-panel .auth-card { flex: 1; width: min(420px, 100%); align-content: center; margin: 0 auto; gap: 16px; }
.auth-head { display: grid; gap: 4px; }
.auth-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.25; }
.auth-head .muted { margin: 0; font-size: 0.92rem; }

/* Segmented Sign in | Create account control (UI-022) */
.auth-overlay .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #efedf3;
  border: 1px solid var(--panel-border);
}
.auth-tab {
  appearance: none;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.25;
  min-height: 38px;
  padding: 8px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab[aria-selected="true"] {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(20, 18, 30, 0.14), 0 0 0 1px rgba(20, 18, 30, 0.06);
}
.auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Labeled fields, one control height (UI-013, UI-014, UI-023) */
.auth-overlay .auth-form { gap: 12px; }
.auth-overlay .auth-form .ui-field { gap: 6px; }
.auth-overlay .auth-form .ui-field-label { font-size: 0.84rem; }
.auth-overlay .auth-form .ui-field-hint { font-size: 0.8rem; line-height: 1.4; }
.auth-overlay .auth-form input,
.auth-overlay .auth-form select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d6d3df;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-overlay .auth-form input::placeholder { color: #8f8a9b; }
.auth-overlay .auth-form input:focus,
.auth-overlay .auth-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.auth-overlay .auth-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23615d6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.auth-overlay .auth-form select:invalid,
.auth-overlay .auth-form select option[value=""] { color: #8f8a9b; }
.auth-overlay .auth-form select option { color: var(--text); }

.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(17, 78, 163, 0.35);
}
.auth-link:hover { text-decoration-color: currentColor; }
.auth-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Password show/hide + strength (UI-019) */
.auth-password { position: relative; }
.auth-overlay .auth-form .auth-password input { padding-right: 68px; }
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.auth-password-toggle:hover { color: var(--text); background: rgba(0, 0, 0, 0.05); }
.auth-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.auth-password-meter { height: 4px; border-radius: 999px; background: #ebe9f0; overflow: hidden; }
.auth-password-meter[data-strength="0"] { display: none; }
.auth-password-meter span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 0.2s, background 0.2s; }
.auth-password-meter[data-strength="1"] span { width: 33%; background: var(--danger); }
.auth-password-meter[data-strength="2"] span { width: 66%; background: var(--warning); }
.auth-password-meter[data-strength="3"] span { width: 100%; background: var(--success); }

.auth-overlay .auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  border-radius: 8px;
  font-size: 0.98rem;
}
.auth-overlay .auth-submit:disabled { opacity: 0.7; cursor: progress; transform: none; }
.auth-overlay .sso-btn { min-height: 44px; border-radius: 8px; }
.auth-switch { margin: 2px 0 0; text-align: center; font-size: 0.88rem; color: var(--muted); }
.auth-switch .auth-link { font-size: inherit; }
.auth-consent { margin: -2px 0 0; text-align: center; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.auth-consent a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.auth-form-intro { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.auth-success { margin: 0; text-align: center; font-size: 0.88rem; color: var(--success); }
.auth-overlay .auth-error { min-height: 0; margin: 0; font-size: 0.88rem; }
.auth-overlay .auth-error:empty { display: none; }
.auth-overlay .auth-join-hint { margin: 0; }

@media (max-width: 760px) {
  .auth-overlay { padding: 12px; }
  .auth-panel { padding: 16px 20px 28px; }
  .auth-head h2 { font-size: 1.3rem; }
}

/* Post sign-up welcome (UI-026) */
.signup-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 16px 14px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(23, 102, 212, 0.25);
  background: linear-gradient(135deg, rgba(23, 102, 212, 0.08), rgba(23, 102, 212, 0.02));
}
.signup-welcome-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.signup-welcome-copy strong { font-size: 0.98rem; }
.signup-welcome-copy span { font-size: 0.88rem; color: var(--muted); }
.signup-welcome-actions { display: flex; align-items: center; gap: 8px; }
.signup-welcome-close { min-width: 34px; padding: 4px 10px; font-size: 1.1rem; line-height: 1; }
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a05 (onboarding) ==== */
/* reserved: a05 adds its CSS directly below this line */
/* Setup wizard (UI-057, UI-061, UI-062, UI-063) and first-data status (UI-056). */
.onb-wizard {
  max-width: 1100px;
  gap: 18px;
  min-width: 0;
}

/* Long code lines scroll inside their block; without these the grid/flex chain grows to the widest
   line and the whole page scrolls sideways on a phone. */
#onboarding-wizard.section,
.onb-steps,
.onb-steps > .onboarding-step {
  min-width: 0;
  max-width: 100%;
}

.onb-body {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.onb-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.onb-heading {
  font-size: 1rem;
  margin: 0;
}

.onb-card {
  min-height: 118px;
}

.onb-card.selected {
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.onb-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* UI-061: text monogram badges instead of empty squares (no third-party logos). */
.onb-monogram {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: -0.02em;
  color: #fff;
  background: #4b4759;
}

.onb-monogram-nodejs { background: #3f7a3a; }
.onb-monogram-python { background: #2f5f8f; }
.onb-monogram-java { background: #a3502a; }
.onb-monogram-dotnet { background: #5b3f9e; }
.onb-monogram-go { background: #1b7f95; }
.onb-monogram-ruby { background: #a3283a; }
.onb-monogram-collector { background: #4b4759; }

/* UI-062/063: the selection summary + Continue live under the cards only, never under the side panel. */
.onb-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  scroll-margin: 24px;
}

.onb-selection-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}

.onb-selection-text a,
.onb-docs-link {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* The upstream OpenTelemetry reference, next to our own setup guide: same link, less emphasis. */
.onb-docs-link-secondary {
  color: var(--muted);
  font-weight: 500;
}

.onb-selection .primary-btn {
  flex: none;
}

.onb-selection-flash {
  animation: onb-flash 900ms ease-out;
}

@keyframes onb-flash {
  from { box-shadow: 0 0 0 4px var(--accent-glow); border-color: var(--accent); }
  to { box-shadow: 0 0 0 0 transparent; }
}

.onb-aside h3 {
  color: var(--text);
  font-size: 1rem;
  margin: 0;
}

.onb-checklist,
.onb-notes {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.onb-setup {
  max-width: 900px;
}

.onb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.onb-endpoint-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.onb-endpoint-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 240px;
}

.onb-endpoint-text code {
  font-size: 0.9rem;
}

/* UI-057: code blocks never wrap mid-value; long lines scroll inside the block. */
.onb-code {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
  min-width: 0;
}

.onb-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.02);
}

.onb-code-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onb-code-pre {
  border: none;
  border-radius: 0;
  white-space: pre;
  overflow-x: auto;
  overflow-wrap: normal;
  word-break: normal;
  max-height: 420px;
  color: var(--text);
  tab-size: 4;
}

.onb-code-pre code {
  display: block;
  max-width: none;
  overflow-wrap: normal;
  color: inherit;
  font-size: 0.8rem;
}

/* UI-058 */
.onb-token-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.onb-token-row p {
  margin: 0;
  flex: 1 1 320px;
}

.onb-token-note {
  font-size: 0.86rem;
  padding: 8px 12px;
  border-left: 3px solid var(--warning);
  background: rgba(196, 138, 28, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* UI-056: waiting → received. */
.onb-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--panel);
}

.onb-status p {
  margin: 0;
}

.onb-status-received {
  background: rgba(31, 157, 108, 0.08);
  border-color: rgba(31, 157, 108, 0.35);
}

.onb-status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.onb-status-error {
  color: var(--warning);
}

.onb-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--panel-border);
  border-top-color: var(--accent);
  animation: onb-spin 900ms linear infinite;
}

@keyframes onb-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .onb-spinner { animation-duration: 2400ms; }
  .onb-selection-flash { animation: none; }
}

.onb-details {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--panel);
}

.onb-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.onb-details[open] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 900px) {
  .onb-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .onb-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .onb-card {
    min-height: 0;
  }
  .onb-selection .primary-btn {
    width: 100%;
  }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a06 (overview usage system) ==== */
/* reserved: a06 adds its CSS directly below this line */
.a06-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* KPI tiles that open a page */
#overview .kpi-tile[data-a06-nav] {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#overview .kpi-tile[data-a06-nav]:hover,
#overview .kpi-tile[data-a06-nav]:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* UI-075 "Not set up" line for RUM / cloud resources */
.a06-setup-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: -8px 0 18px;
}
.a06-setup-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.a06-setup-line .link-btn {
  font-size: inherit;
  font-weight: 600;
}

/* UI-072 getting-started checklist */
.a06-checklist {
  margin-bottom: 18px;
}
.a06-checklist-bar {
  margin: 4px 0 12px;
}
.a06-checklist-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.a06-checklist-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid var(--panel-border);
}
.a06-checklist-step:first-child {
  border-top: none;
}
.a06-checklist-step p {
  margin: 2px 0 0;
}
.a06-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--panel-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.a06-checklist-step.is-done .a06-check {
  background: var(--success);
  border-color: var(--success);
}
.a06-checklist-step.is-done strong {
  color: var(--muted);
  text-decoration: line-through;
}
.a06-checklist-action .primary-btn,
.a06-checklist-action .ghost-btn {
  margin-top: 0;
  white-space: nowrap;
}

/* UI-078 needs attention */
.a06-attention-item .action-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.a06-attention-item .ghost-btn {
  margin-top: 0;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .a06-attention-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .a06-attention-item .action-row {
    justify-content: flex-start;
  }
  .a06-checklist-step {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .a06-checklist-action {
    grid-column: 2;
  }
}

#overview .panel-header .link-btn {
  white-space: nowrap;
}

/* Requests chart */
.a06-throughput {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: end;
  height: 180px;
  padding-top: 8px;
}
.a06-bar-group {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  min-width: 0;
}
.a06-bar-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--panel-border);
}
.a06-bar {
  display: block;
  width: 70%;
  max-width: 26px;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.a06-bar-error {
  position: absolute;
  bottom: 0;
  background: var(--danger);
}
.a06-bar-label {
  height: 18px;
  margin-top: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: visible;
  text-align: left;
}
.a06-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.a06-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.a06-swatch-error {
  margin-left: 12px;
  background: var(--danger);
}

/* Usage & Billing */
.a06-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#usage {
  padding-bottom: 72px; /* UI-264: keep the last plan card clear of floating page controls */
}
.a06-billing-message:empty {
  display: none;
}
.a06-billing-message {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--text);
}
.a06-plan-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm, 8px);
  background: var(--panel-strong);
}
.a06-plan-status p {
  margin: 4px 0 0;
}
.a06-plan-status.a06-plan-warn {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.a06-plan-status .primary-btn,
.a06-plan-status .ghost-btn {
  margin-top: 0;
}
.a06-plan-title {
  font-size: 1.05rem;
}
.a06-plan-card.is-current {
  border-color: var(--accent);
}
.a06-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.a06-feature-list li {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--panel-border);
}
.a06-feature-check {
  color: var(--success);
}

/* Usage and System tables */
.a06-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}
.a06-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.a06-table th,
.a06-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.a06-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.a06-table tbody th {
  font-weight: 600;
}
.a06-footnote {
  margin: 10px 0 0;
}
#system .panel + .panel {
  margin-top: 16px;
}
/* Phase 3: OTLP gateway request statistics on the System page */
.system-gw-window {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.system-gw-window select {
  font: inherit;
  font-size: 0.85rem;
  padding: 4px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--panel-bg, transparent);
  color: inherit;
}
.system-gw-subhead {
  margin: 16px 0 4px;
  font-size: 0.9rem;
}
.system-gw-splits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.system-gw-splits .a06-table-wrap {
  margin-top: 0;
}
.a06-checklist:not(:first-of-type) {
  margin-top: 18px;
}

/* ==== ui-fix:a07 (services) ==== */
/* reserved: a07 adds its CSS directly below this line */
/* Services list + detail (UI-081…093) */

.svc-window {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.svc-window-select {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.82rem;
}

/* No markup uses this class any more; the rule stays because test/oi-19-ui-polish.test.js pins it. */
.svc-health--warning { color: var(--warning); font-weight: 600; }

/* OI-19: preserve a usable tap target on the POC's audited pages at phone widths. */
@media (max-width: 640px) {
  :is(#dashboards, #query, #services, #overview, #alerts, #slos)
    :is(button, a.primary-btn, a.secondary-btn, a.ghost-btn, select) {
    min-height: 40px;
  }
  .shell-timerange select {
    min-height: 40px;
  }
}

/* Shared demo: a polished incident briefing with a clear, evidence-led story path. */
.demo-walkthrough { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 24px; padding: clamp(20px, 3.4vw, 36px); border-color: color-mix(in srgb, var(--accent) 18%, var(--panel-border)); border-radius: 22px; background: radial-gradient(ellipse at 94% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--panel)) 0%, var(--panel) 54%, color-mix(in srgb, var(--teal) 4%, var(--panel)) 100%); }
.demo-walkthrough::before { position: absolute; z-index: -1; top: -150px; right: 24%; width: 320px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 50%; box-shadow: 0 0 0 34px color-mix(in srgb, var(--accent) 2%, transparent), 0 0 0 68px color-mix(in srgb, var(--accent) 1.5%, transparent); content: ""; pointer-events: none; }
.demo-walkthrough-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); gap: clamp(24px, 4vw, 52px); align-items: center; }
.demo-walkthrough.panel .demo-walkthrough-hero h2 { max-width: 760px; margin: 9px 0 14px; font-size: clamp(2rem, 4.2vw, 3.35rem); font-weight: 650; letter-spacing: -0.055em; line-height: 1.03; color: var(--text); }
.demo-walkthrough-hero > div:first-child > p:not(.demo-eyebrow) { max-width: 780px; color: var(--muted); line-height: 1.72; }
.demo-eyebrow { margin: 0; color: var(--accent) !important; font-size: 0.72rem; font-weight: 760; letter-spacing: 0.105em; text-transform: uppercase; }
.demo-data-note { max-width: 780px; margin-top: 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--panel-border)); border-left: 3px solid var(--accent); border-radius: 0 11px 11px 0; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); font-size: 0.86rem; }
.demo-tour-progress-card { display: grid; gap: 13px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--panel-border)); border-radius: 18px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 8%, transparent), var(--shadow); backdrop-filter: blur(14px); }
.demo-tour-progress-heading, .demo-tour-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-tour-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.75rem; font-weight: 650; }
.demo-tour-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 14%, transparent); }
.demo-tour-progress-copy { align-items: baseline; }
.demo-tour-progress-card strong { color: var(--text); font-size: 0.95rem; font-weight: 700; }
.demo-tour-progress-copy > span { color: var(--muted); font-size: 0.63rem; font-weight: 750; letter-spacing: 0.07em; white-space: nowrap; }
.demo-tour-progress-meter { height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel-border)); }
.demo-tour-progress-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width 220ms ease; }
.demo-tour-signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.demo-tour-signal-grid > div { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: color-mix(in srgb, var(--panel-strong) 72%, var(--panel)); }
.demo-tour-signal-grid > div > span { color: var(--muted); font-size: 0.69rem; font-weight: 650; }
.demo-tour-signal-grid strong { font-size: 1.16rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.demo-tour-signal-grid small { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.demo-tour-start { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 14px; }
.demo-tour-start > span:last-child { font-size: 1.15rem; transition: transform 150ms ease; }
.demo-tour-start:hover > span:last-child { transform: translateX(3px); }
.demo-tour-oracle { justify-self: start; padding-inline: 0; }
.demo-tour-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: clamp(32px, 5vw, 52px) 0 16px; }
.demo-walkthrough.panel .demo-tour-section-heading h3 { margin: 5px 0 0; color: var(--text); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 640; letter-spacing: -0.035em; }
.demo-tour-section-heading > p { max-width: 360px; margin: 0 0 2px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; text-align: right; }
.demo-tour-steps { position: relative; display: grid; gap: 11px; margin: 0 0 36px; }
.demo-tour-steps::before { position: absolute; top: 27px; bottom: 27px; left: 34px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, var(--panel-border)) 48%, var(--teal)); content: ""; }
.demo-tour-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(174px, 208px); gap: 16px; align-items: center; min-height: 142px; padding: 17px 18px 17px 14px; border: 1px solid var(--panel-border); border-radius: 16px; background: color-mix(in srgb, var(--panel) 95%, transparent); box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 3%, transparent); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease; scroll-margin-top: 100px; }
.demo-tour-step:hover, .demo-tour-step:focus-within { border-color: color-mix(in srgb, var(--accent) 36%, var(--panel-border)); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 9%, transparent); transform: translateY(-1px); }
.demo-tour-step.is-complete { border-color: color-mix(in srgb, var(--teal) 42%, var(--panel-border)); background: linear-gradient(105deg, color-mix(in srgb, var(--teal) 6%, var(--panel)), var(--panel) 48%); }
.demo-tour-number { position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--panel-border)); border-radius: 13px; background: var(--panel); color: var(--accent); font-size: 0.76rem; font-weight: 760; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 5px var(--panel); }
.demo-tour-step.is-complete .demo-tour-number { border-color: var(--teal); background: var(--teal); color: var(--panel); }
.demo-tour-chapter { margin: 0 0 5px !important; color: var(--accent) !important; font-size: 0.67rem !important; font-weight: 760; letter-spacing: 0.095em; text-transform: uppercase; }
.demo-walkthrough.panel .demo-tour-step h3 { margin: 0 0 7px; color: var(--text); font-size: 1.08rem; font-weight: 650; letter-spacing: -0.025em; }
.demo-tour-step p, .demo-industry-heading p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.62; }
.demo-tour-step .demo-tour-next { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--panel-border); }
.demo-tour-next strong { color: var(--text); font-weight: 700; }
.demo-tour-actions { display: grid; gap: 8px; justify-items: stretch; }
.demo-tour-actions button { width: 100%; justify-content: center; }
.demo-tour-check { color: var(--accent); }
.demo-industry-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 14px; scroll-margin-top: 90px; }
.demo-industry-heading h3 { margin: 4px 0 6px; color: var(--text); font-size: 1.35rem; font-weight: 580; letter-spacing: -0.02em; }
.demo-industry-count { flex: none; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--accent); font-size: 0.82rem; font-weight: 700; }
.demo-industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-industry-card { display: flex; min-width: 0; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--panel-border); border-radius: 13px; background: var(--panel); }
.demo-industry-card-head { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 650; }
.demo-industry-icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--accent); }
.demo-industry-icon svg { width: 18px; height: 18px; }
.demo-industry-card > p { margin: 0; color: var(--muted); font-size: 0.91rem; line-height: 1.58; }
.demo-feature-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-feature-tags span { padding: 4px 7px; border: 1px solid var(--panel-border); border-radius: 999px; background: var(--panel-strong); color: var(--muted); font-size: 0.73rem; }
.demo-industry-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.demo-industry-actions button, .demo-tour-actions button { min-height: 36px; }
.demo-oracle-question-library { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel); }
.demo-oracle-question-library summary { color: var(--text); font-weight: 650; cursor: pointer; }
.demo-question-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.demo-question-list button { text-align: left; }

.qs-demo-questions { margin: 0 0 18px; padding: 18px; border-color: #d7e0f3; background: linear-gradient(120deg, #f5f8ff, #fff); }
.qs-demo-questions h3 { margin: 4px 0; color: #203452; }
.qs-demo-questions p { color: #59677d; line-height: 1.5; }
.qs-demo-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.qs-demo-question { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #dce4f0; border-radius: 10px; background: #fff; color: #2d4163; text-align: left; cursor: pointer; }
.qs-demo-question span:first-child { font-weight: 650; }
.qs-demo-question span:last-child { flex: none; color: #4568ad; font-size: 0.78rem; font-weight: 750; }
.qs-demo-question:hover, .qs-demo-question:focus-visible { border-color: #7d98d0; background: #f8faff; }
.qs-demo-questions .demo-data-note { margin-bottom: 0; }

#ai-analyst-demo-questions { display: grid; gap: 18px; max-height: 44vh; overflow: auto; margin: 14px 0; padding: 2px 4px 4px 0; }
.ai-demo-question-group h3 { margin: 0 0 8px; color: #30466b; font-size: 0.9rem; }
.ai-demo-question-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ai-demo-question { min-height: 44px; padding: 8px 10px !important; border-color: #d9e1ef !important; background: #f8faff; color: #344966; font-size: 0.82rem; line-height: 1.35; text-align: left; }
.ai-demo-question:hover, .ai-demo-question:focus-visible { border-color: #7d98d0 !important; background: #eff4ff; }
.ai-demo-question:disabled { cursor: wait; opacity: 0.55; }

@media (max-width: 1000px) {
  .demo-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .demo-walkthrough-hero { grid-template-columns: minmax(0, 1fr); }
  .demo-tour-section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .demo-tour-section-heading > p { text-align: left; }
  .demo-tour-steps::before { left: 31px; }
  .demo-tour-step { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .demo-tour-number { width: 36px; height: 36px; border-radius: 11px; }
  .demo-tour-actions { grid-column: 2; grid-template-columns: repeat(2, minmax(0, max-content)); justify-items: start; }
  .demo-tour-actions button { width: auto; }
  .demo-industry-grid, .qs-demo-question-grid, .ai-demo-question-list { grid-template-columns: minmax(0, 1fr); }
  .demo-industry-heading { align-items: start; }
  .demo-industry-count { margin-top: 3px; }
}

@media (max-width: 420px) {
  .demo-tour-progress-card { padding: 16px; }
  .demo-tour-progress-heading, .demo-tour-progress-copy { align-items: flex-start; flex-direction: column; }
  .demo-tour-actions { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .demo-tour-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-tour-progress-meter > span, .demo-tour-step, .demo-tour-start > span:last-child { transition: none; }
}

.service-telemetry-row {
  cursor: pointer;
}

.service-telemetry-row:hover {
  background: var(--accent-warm-soft);
}

.svc-open-btn {
  text-align: left;
  white-space: nowrap;
}

.svc-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.svc-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.svc-sort-arrow {
  font-size: 0.7rem;
  color: var(--muted);
}

.svc-sort-btn.is-active .svc-sort-arrow {
  color: var(--accent);
}

#service-telemetry-detail > .panel,
#service-telemetry-detail > .svc-chart-grid-3,
#service-telemetry-detail > .svc-detail-grid,
#service-telemetry-detail > .kpi-row {
  margin-bottom: 14px;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a08 (traces list) ==== */
/* reserved: a08 adds its CSS directly below this line */
/* Traces list (UI-111…UI-116): filter bar, duration distribution, trace rows. */
.trace-list-controls,
.trace-list-panel,
#trace-list-kpis,
#trace-list-results,
#trace-list-distribution,
.trace-dist {
  min-width: 0;
  max-width: 100%;
}

.trace-list-controls {
  gap: 16px;
}

.trace-filters {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.trace-filters input,
.trace-filters select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.trace-filters input:focus-visible,
.trace-filters select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.trace-filters-actions {
  display: flex;
  align-items: end;
}

.trace-filters-actions .ghost-btn {
  min-height: 40px;
  margin-top: 0;
}

.trace-filters-actions .ghost-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.trace-dist {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}

.trace-dist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}

.trace-dist-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.trace-dist-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-left: 6px;
}

.trace-dist-key.ok,
.trace-dist-ok {
  background: #8f8a9e;
}

.trace-dist-key.err,
.trace-dist-errors {
  background: var(--danger);
}

.trace-dist-bars {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 128px;
  overflow-x: auto;
}

.trace-dist-bar {
  flex: 1 0 48px;
  display: grid;
  grid-template-rows: 16px 1fr auto;
  gap: 3px;
  min-width: 48px;
  padding: 4px 2px;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.trace-dist-bar:hover {
  background: rgba(0, 0, 0, 0.04);
}

.trace-dist-bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.trace-dist-bar.is-selected {
  border-color: var(--accent);
  background: var(--accent-warm-soft);
  color: var(--text);
}

.trace-dist-count {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.trace-dist-column {
  align-self: end;
  display: flex;
  flex-direction: column;
  width: 70%;
  max-width: 44px;
  margin: 0 auto;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.trace-dist-column > span {
  flex-basis: 0;
  min-height: 2px;
}

.trace-dist-label {
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
}

.trace-list-panel {
  gap: 10px;
}

.trace-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.trace-list-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.trace-list-count strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.trace-list-toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.trace-list-toolbar-actions .ghost-btn {
  margin-top: 0;
}

.trace-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-warm-soft);
}

.trace-active-filter .link-btn {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

/* Traces attribute filters: chips + "Add filter" form */
.trace-attr-filters {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.trace-attr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.trace-attr-chip {
  max-width: 100%;
  min-width: 0;
}

.trace-attr-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.trace-attr-chips .trace-attr-add {
  margin-top: 0;
  min-height: 32px;
  padding: 4px 12px;
}

.trace-attr-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) minmax(200px, 2fr) auto;
  gap: 10px 14px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.trace-attr-form input,
.trace-attr-form select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.trace-attr-form input:focus-visible,
.trace-attr-form select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.trace-attr-form-actions {
  display: flex;
  gap: 8px;
}

.trace-attr-form-actions button {
  margin-top: 0;
  min-height: 40px;
}

.trace-attr-form-note {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 760px) {
  .trace-attr-form {
    grid-template-columns: 1fr;
  }
}

.trace-list-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

#trace-list-results.is-loading .trace-table-wrap {
  opacity: 0.55;
  transition: opacity 0.15s;
}

.trace-table-wrap {
  overflow-x: auto;
}

.trace-list-table {
  min-width: 860px;
}

.trace-list-table th.num,
.trace-list-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.trace-list-table td {
  vertical-align: middle;
}

.trace-list-row {
  cursor: pointer;
}

.trace-list-row:hover td {
  background: var(--accent-warm-soft);
}

.trace-list-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.trace-list-row:focus-visible td {
  background: var(--accent-warm-soft);
}

.trace-list-row.has-error td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.trace-list-table td:first-child,
.trace-list-table th:first-child {
  padding-left: 10px;
}

.trace-op-cell {
  min-width: 180px;
}

.trace-op-name {
  display: block;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.trace-op-service {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.trace-chip-list {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}

.trace-chip {
  display: inline-block;
  max-width: 160px;
  padding: 1px 7px;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.03);
}

.trace-chip-more {
  color: var(--muted);
}

.trace-duration {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: nowrap;
}

.trace-error-count {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.trace-id-cell {
  white-space: nowrap;
}

.trace-id-cell .copy-btn {
  margin: 0 0 0 6px;
}

.trace-list-more {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.trace-list-loading {
  padding: 24px 0;
  text-align: center;
}

@media (max-width: 720px) {
  .trace-filters {
    grid-template-columns: 1fr 1fr;
  }

  .trace-filters > .ui-field:first-child {
    grid-column: 1 / -1;
  }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a09 (trace detail) ==== */
/* reserved: a09 adds its CSS directly below this line */
/* UI-121…131 — trace detail: header facts, legend, tree waterfall, span details panel. */
.trace-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.trace-detail {
  --trace-focus: #3b6fd8;
  --trace-label-col: clamp(230px, 36%, 400px);
  --trace-duration-col: 84px;
  gap: 12px;
}

.trace-detail > .back-link {
  justify-self: start;
}

.trace-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trace-detail-title {
  min-width: 0;
}

.trace-detail-title h3 {
  margin: 0;
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.trace-detail-title .small-meta {
  margin: 4px 0 0;
}

.trace-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trace-detail-facts > div {
  min-width: 0;
}

.trace-detail-facts dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.trace-detail-facts dd {
  margin: 2px 0 0;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.trace-id-code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.trace-fact-bad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--danger);
  font-weight: 600;
}

.trace-detail-note {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-sm);
}

.trace-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}

.trace-span-filter-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 0;
}

.trace-span-filter-wrap .trace-filter-input {
  max-width: 380px;
}

.trace-filter-input {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.trace-filter-input:focus-visible {
  outline: 2px solid var(--trace-focus, #3b6fd8);
  outline-offset: 1px;
}

.trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--muted);
}

.trace-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trace-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: none;
}

.trace-legend-error {
  color: var(--danger);
}

/* layout: waterfall + side panel (panel docks on very wide screens, slides over below 1600px) */
.trace-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.trace-waterfall-wrap {
  container-type: inline-size;
  min-width: 0;
}

.trace-detail .trace-waterfall-scale,
.trace-span-row {
  display: grid;
  grid-template-columns: var(--trace-label-col) minmax(0, 1fr) var(--trace-duration-col);
  gap: 10px;
  align-items: center;
}

.trace-detail .trace-waterfall-scale {
  margin: 0 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.trace-scale-caption {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.trace-scale-duration {
  text-align: right;
}

.trace-scale-track {
  position: relative;
  height: 16px;
}

.trace-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.trace-tick:first-child {
  transform: none;
}

.trace-tick.trace-tick-end {
  transform: translateX(-100%);
}

.trace-detail .trace-waterfall {
  gap: 1px;
}

.trace-span-row {
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
}

.trace-span-row:hover {
  background: rgba(59, 111, 216, 0.05);
}

.trace-span-row.is-selected {
  background: rgba(59, 111, 216, 0.1);
  box-shadow: inset 3px 0 0 #3b6fd8;
}

.trace-span-row.is-context {
  opacity: 0.55;
}

.trace-span-label {
  min-width: 0;
  padding-left: calc(var(--trace-depth, 0) * 14px);
}

.trace-span-line {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.trace-span-toggle,
.trace-span-toggle-spacer {
  flex: none;
  width: 20px;
  height: 20px;
}

.trace-span-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.trace-span-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.trace-span-toggle:disabled {
  cursor: default;
  opacity: 0.5;
}

.trace-span-open {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.trace-span-toggle:focus-visible,
.trace-span-open:focus-visible,
.trace-inline-link:focus-visible,
.trace-span-panel:focus-visible {
  outline: 2px solid #3b6fd8;
  outline-offset: 1px;
}

.trace-span-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.trace-span-service {
  color: var(--muted);
}

.trace-span-op {
  font-weight: 600;
}

.trace-span-target {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.trace-collapsed-count {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
  font-size: 0.68rem;
}

.trace-service-dot {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 2px;
}

.trace-span-facts .trace-service-dot {
  margin-right: 6px;
  vertical-align: middle;
}

.trace-kind-chip {
  flex: none;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4b5563;
  background: rgba(0, 0, 0, 0.05);
}

.trace-kind-chip.kind-server {
  color: #2a55a8;
  background: rgba(59, 111, 216, 0.1);
}

.trace-kind-chip.kind-client {
  color: #0b6b62;
  background: rgba(15, 138, 126, 0.1);
}

.trace-kind-chip.kind-producer,
.trace-kind-chip.kind-consumer {
  color: #5b3aa0;
  background: rgba(123, 82, 201, 0.1);
}

.trace-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}

.trace-orphan-hint,
.trace-span-error-msg {
  margin-left: 26px;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-orphan-hint {
  color: var(--muted);
  font-style: italic;
}

.trace-span-error-msg {
  color: #b42335;
}

.trace-detail .trace-waterfall-track {
  height: 16px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.035);
}

.trace-detail .trace-waterfall-bar {
  top: 3px;
  height: 10px;
  min-width: 3px;
  border-radius: 2px;
  background: var(--trace-bar-color, #5a6b82);
}

.trace-detail .trace-waterfall-bar.is-error {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

.trace-span-duration {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.trace-duration-error {
  display: inline-flex;
}

.trace-no-match {
  padding: 12px 4px;
}

.trace-critical-btn {
  flex: none;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
}

.trace-critical-btn[aria-pressed="true"] {
  border-color: #181622;
  background: rgba(24, 22, 34, 0.08);
  font-weight: 600;
}

.shows-critical-path .trace-span-row:not(.on-critical-path) .trace-waterfall-bar {
  opacity: 0.35;
}

.shows-critical-path .trace-span-row.on-critical-path .trace-waterfall-track {
  box-shadow: inset 0 -2px 0 #181622;
}

/* span details panel */
.trace-span-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
}

.trace-span-panel[hidden] {
  display: none;
}

@media (min-width: 1600px) {
  .trace-detail-body.has-panel {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  }

  .trace-span-panel {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
  }
}

@media (max-width: 1599.98px) {
  .trace-span-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    width: min(480px, 100vw);
    border-radius: 0;
    box-shadow: -8px 0 28px rgba(20, 18, 30, 0.18);
  }
}

.trace-span-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.trace-span-panel-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.66rem;
}

.trace-span-panel-head h4 {
  margin: 2px 0 6px;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.trace-span-panel-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trace-panel-close {
  flex: none;
  min-height: 30px;
  padding: 4px 10px;
}

.trace-span-facts {
  display: grid;
  grid-template-columns: minmax(80px, max-content) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0 0 8px;
}

.trace-span-facts > div {
  display: contents;
}

.trace-span-facts dt {
  font-size: 0.74rem;
  color: var(--muted);
  padding-top: 2px;
}

.trace-span-facts dd {
  margin: 0;
  min-width: 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.trace-span-facts code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.trace-status-message {
  margin-top: 4px;
  color: #b42335;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.trace-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: #2a55a8;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.trace-panel-section {
  border-top: 1px solid var(--border);
}

.trace-panel-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.trace-panel-count {
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.trace-panel-section-body {
  padding-bottom: 10px;
  display: grid;
  gap: 8px;
}

.trace-panel-section-body > p {
  margin: 0;
}

.trace-attr-filter-row {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.trace-attr-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.trace-attr-table th,
.trace-attr-table td {
  padding: 4px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  text-align: left;
  vertical-align: top;
}

.trace-attr-table th {
  width: 40%;
  font-weight: 400;
}

.trace-attr-table th code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  overflow-wrap: break-word;
}

.trace-attr-cell {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.trace-attr-value {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trace-attr-cell .copy-btn {
  flex: none;
  min-height: 22px;
  padding: 1px 7px;
  font-size: 0.68rem;
}

@media (hover: hover) {
  .trace-attr-table tr .copy-btn {
    opacity: 0;
  }

  .trace-attr-table tr:hover .copy-btn,
  .trace-attr-table tr:focus-within .copy-btn,
  .trace-attr-table tr .copy-btn.is-copied {
    opacity: 1;
  }
}

.trace-events,
.trace-span-logs,
.trace-links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-event {
  padding-left: 10px;
  border-left: 3px solid var(--border);
  display: grid;
  gap: 6px;
}

.trace-event.is-exception {
  border-left-color: var(--danger);
}

.trace-event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}

.trace-exception {
  display: grid;
  gap: 5px;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.trace-exception code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.trace-exception-label {
  display: inline-block;
  min-width: 64px;
  color: var(--muted);
  font-size: 0.72rem;
}

.trace-stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.trace-stack {
  margin: 0;
  max-height: 320px;
  padding: 8px 10px;
  overflow: auto;
  border-radius: var(--radius-sm);
  background: #f3f2f7;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trace-span-logs li {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.trace-span-log-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

.trace-span-log-body {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trace-panel-section-body > .trace-logs-btn {
  justify-self: start;
}

.trace-links li {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
}

.trace-links code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

/* UI-128 — fewer axis labels as the waterfall narrows, so labels never overlap */
@container (max-width: 700px) {
  .trace-tick-odd {
    display: none;
  }
}

@container (max-width: 540px) {
  .trace-detail .trace-waterfall-scale,
  .trace-span-row {
    grid-template-columns: minmax(0, 1fr) 70px;
    row-gap: 2px;
  }

  .trace-span-label {
    grid-column: 1 / -1;
    padding-left: calc(var(--trace-depth, 0) * 8px);
  }

  .trace-scale-caption:first-child {
    display: none;
  }
}

@media (max-width: 720px) {
  .trace-detail-facts {
    gap: 8px 18px;
  }

  .trace-span-filter-wrap {
    flex-wrap: wrap;
  }

  .trace-span-filter-wrap .trace-filter-input {
    max-width: none;
  }
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a10 (logs) ==== */
/* reserved: a10 adds its CSS directly below this line */
#logs .sr-only,
#log-detail .sr-only,
#logs-rules-drawer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.logs-count-pill {
  display: inline-flex;
  min-width: 18px;
  justify-content: center;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 99px;
  font-size: 0.72rem;
  background: var(--accent-warm-soft);
  color: var(--accent-strong);
}

.logs-rules-open-btn {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 0.8rem;
}

/* UI-144 — toolbar: labeled search, service, severity, time range, live tail */
.logs-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.logs-panel > * {
  min-width: 0;
}

.logs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.logs-toolbar .ui-field {
  flex: 0 1 190px;
}

.logs-toolbar .logs-toolbar-search {
  flex: 1 1 260px;
  min-width: 0;
}

.logs-toolbar-search .ui-field {
  flex: none;
}

.logs-toolbar input,
.logs-toolbar select,
.logs-rule-form input,
.logs-rule-form select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
}

.logs-toolbar input:focus-visible,
.logs-toolbar select:focus-visible,
.logs-rule-form input:focus-visible,
.logs-rule-form select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.logs-range-readout {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 0.9rem;
}

.logs-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.logs-toolbar-actions .ghost-btn {
  min-height: 38px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.logs-tail-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.logs-tail-hint {
  margin: 0;
  max-width: 36ch;
}

.logs-tail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.logs-tail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--panel-border);
}

.logs-tail-toggle.is-on {
  color: var(--success);
  border-color: currentColor;
}

.logs-tail-toggle.is-on .logs-tail-dot {
  background: var(--success);
  animation: logs-tail-pulse 1.6s ease-in-out infinite;
}

@keyframes logs-tail-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .logs-tail-toggle.is-on .logs-tail-dot { animation: none; }
}

/* active filter chips */
.logs-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.logs-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 2px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 99px;
  background: var(--panel-strong);
  font-size: 0.8rem;
}

.logs-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-chip-remove {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.logs-chip-remove:hover,
.logs-chip-remove:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
}

.logs-chips .link-btn {
  font-size: 0.8rem;
  margin-left: 4px;
}

/* UI-149 — facets sidebar + results */
.logs-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.logs-layout.facets-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.logs-facets {
  display: grid;
  gap: 14px;
  padding-right: 14px;
  border-right: 1px solid var(--panel-border);
  min-width: 0;
}

.logs-facets[hidden] {
  display: none;
}

.logs-facets-note {
  margin: 0;
}

.logs-facet-title {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-facet-values {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logs-facet-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.logs-facet-value:hover,
.logs-facet-value:focus-visible {
  background: var(--panel-strong);
}

.logs-facet-value.is-active {
  border-color: var(--accent);
  background: var(--accent-warm-soft);
}

.logs-facet-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-facet-count {
  flex: none;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* UI-141 / UI-147 — one line per log: fixed compact columns, the message takes the rest */
.logs-results {
  min-width: 0;
}

.logs-results[aria-busy="true"] .logs-table-wrap {
  opacity: 0.55;
}

.logs-table-wrap {
  position: relative; /* keeps the visually hidden header text inside the scroll area */
  overflow-x: auto;
}

.logs-table {
  table-layout: fixed;
  min-width: 720px;
  font-size: 0.86rem;
}

.logs-table th {
  font-size: 0.72rem;
  white-space: nowrap;
}

.logs-table td {
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: middle;
}

.logs-col-time { width: 188px; }
.logs-col-service { width: 164px; }
.logs-col-severity { width: 72px; }
.logs-col-trace { width: 132px; }
.logs-col-open { width: 40px; }

.logs-cell-time,
.logs-cell-service,
.logs-cell-message,
.logs-cell-trace {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-cell-time {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.logs-cell-message {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.logs-row {
  cursor: pointer;
}

.logs-row:hover,
.logs-row.is-expanded {
  background: var(--panel-strong);
}

.logs-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.logs-row.is-fresh {
  animation: logs-fresh 2.4s ease-out;
}

@keyframes logs-fresh {
  from { background: var(--accent-warm-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .logs-row.is-fresh { animation: none; }
}

.logs-cell-open .ghost-btn {
  min-height: 26px;
  padding: 0 8px;
  font-size: 1rem;
  line-height: 1;
}

.log-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.log-trace-link {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--accent-warm-soft);
  text-underline-offset: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-trace-link:hover,
.log-trace-link:focus-visible {
  text-decoration-color: currentColor;
}

.logs-cell-trace .copy-btn,
.log-id .copy-btn {
  flex: none;
  min-height: 22px;
  padding: 1px 7px;
  font-size: 0.7rem;
}

.logs-row-detail > td {
  padding: 0 0 12px;
  background: var(--panel-strong);
}

.logs-expand {
  display: grid;
  gap: 10px;
  padding: 4px 12px 0;
}

.logs-expand-body,
.log-detail-body {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.logs-expand-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  font-size: 0.8rem;
}

.logs-expand-attrs div {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.logs-expand-attrs dt {
  color: var(--muted);
}

.logs-expand-attrs dd {
  margin: 0;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.logs-expand-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.logs-expand-actions .ghost-btn,
.logs-expand-actions .primary-btn {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 0.82rem;
}

.logs-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
}

.logs-empty-note {
  text-align: center;
}

/* 5.3: the footer turns into a notice when live tail dropped or skipped lines. */
.logs-footer .logs-tail-note {
  color: var(--warning, #b45309);
}

/* 5.4: "Lines before and after" list (shares the trace-list row styles). */
.log-context-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.log-context-scope code {
  font-size: 0.8rem;
}

.log-context-lines .log-context-trace {
  white-space: nowrap;
}

.log-context-more {
  padding: 4px 8px;
  font-style: italic;
}

@media (max-width: 1100px) {
  .logs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .logs-facets {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    padding: 0 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--panel-border);
  }

  .logs-facets-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .logs-toolbar .ui-field,
  .logs-toolbar .logs-toolbar-search {
    flex: 1 1 100%;
  }

  .logs-toolbar-actions {
    margin-left: 0;
  }

  /* one card per log line instead of a sideways-scrolling table */
  .logs-table,
  .logs-table tbody {
    display: block;
    min-width: 0;
  }

  .logs-table colgroup,
  .logs-table thead {
    display: none;
  }

  .logs-table .logs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 3px 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--panel-border);
  }

  .logs-table .logs-row td {
    padding: 0;
    border: none;
  }

  .logs-cell-time { grid-column: 1; grid-row: 1; }
  .logs-cell-severity { grid-column: 2; grid-row: 1; }
  .logs-cell-open { grid-column: 3; grid-row: 1; }
  .logs-cell-service { grid-column: 1 / -1; grid-row: 2; font-size: 0.8rem; color: var(--muted); }
  .logs-cell-message { grid-column: 1 / -1; grid-row: 3; }
  .logs-cell-trace { grid-column: 1 / -1; grid-row: 4; }

  .logs-table .logs-row-detail,
  .logs-table .logs-row-detail > td {
    display: block;
  }
}

/* UI-142 / UI-143 — processing rules drawer */
.logs-rules-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(520px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--panel-border);
  box-shadow: -12px 0 32px rgba(20, 18, 30, 0.16);
}

.logs-rules-drawer:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.logs-rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--panel-border);
}

.logs-rules-header h3 {
  margin: 0;
}

.logs-rules-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 20px 28px;
  overflow-y: auto;
}

.logs-rules-intro {
  margin: 0;
}

.logs-rules-heading {
  margin: 8px 0 0;
  font-size: 0.95rem;
}

.logs-rules-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logs-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.logs-rule.is-disabled {
  opacity: 0.7;
}

.logs-rule-text {
  min-width: 0;
  flex: 1 1 220px;
}

.logs-rule-text p {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.logs-rule-text .badge {
  margin-left: 6px;
}

.logs-rule-form,
.logs-rule-fields {
  display: grid;
  gap: 12px;
}

.logs-rule-preview:empty {
  display: none;
}

.logs-rule-preview {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  font-size: 0.85rem;
}

.logs-rule-preview p {
  margin: 0 0 6px;
}

.logs-rule-examples {
  display: grid;
  gap: 6px;
  margin: 0 0 6px;
  padding-left: 18px;
}

.logs-rule-examples code {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.logs-rule-error {
  color: var(--danger);
}

/* UI-151 / UI-152 / UI-153 — log detail */
.log-detail {
  display: grid;
  gap: 16px;
}

.log-detail .back-link {
  justify-self: start;
}

.log-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.log-detail-head h3 {
  margin: 0;
}

.log-detail-head p {
  margin: 4px 0 0;
}

.log-detail-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.log-detail-block h4 {
  margin: 0;
  font-size: 0.95rem;
}

.log-detail-block > p {
  margin: 0;
}

.log-detail-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.log-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.log-detail-facts > div {
  min-width: 0;
}

.log-detail-facts > .is-wide {
  grid-column: 1 / -1;
}

.log-detail-head .ghost-btn,
.log-detail .link-btn {
  justify-self: start;
}

.log-detail-head .ghost-btn {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 0.85rem;
}

.log-detail-facts dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.log-detail-facts dd {
  margin: 2px 0 0;
  min-width: 0;
  font-size: 0.88rem;
}

.log-kv-table {
  position: relative;
  table-layout: fixed;
  font-size: 0.85rem;
}

.log-kv-table th.log-kv-key {
  width: 32%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  overflow-wrap: anywhere;
  text-transform: none;
  letter-spacing: 0;
}

.log-kv-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.log-kv-table thead th:last-child {
  width: 220px;
}

.log-kv-actions {
  text-align: right;
  white-space: nowrap;
}

.log-kv-actions .ghost-btn {
  min-height: 26px;
  padding: 2px 9px;
  font-size: 0.75rem;
}

.log-detail-more summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--accent-strong);
}

.log-trace-logs {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.log-trace-log-btn {
  display: grid;
  grid-template-columns: 150px 160px 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.log-trace-log-btn:hover:not(:disabled),
.log-trace-log-btn:focus-visible {
  background: var(--panel-strong);
}

.log-trace-log.is-current .log-trace-log-btn {
  border-color: var(--accent);
  background: var(--accent-warm-soft);
  cursor: default;
  opacity: 1;
}

.log-trace-log-time {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.log-trace-log-btn .badge {
  justify-self: start;
}

.log-trace-log-service,
.log-trace-log-body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-trace-log-body {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

@media (max-width: 720px) {
  .log-trace-log-btn {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .log-trace-log-time,
  .log-trace-log-service {
    grid-column: 1 / -1;
  }

  .log-kv-table thead th:last-child {
    width: 120px;
  }

  .log-kv-actions {
    white-space: normal;
  }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a11 (metrics) ==== */
/* reserved: a11 adds its CSS directly below this line */
/* Series colours: a fixed categorical order (never cycled); "Other" is neutral grey. */
#metrics {
  --metrics-series-1: #2a78d6;
  --metrics-series-2: #eb6834;
  --metrics-series-3: #1baf7a;
  --metrics-series-4: #eda100;
  --metrics-series-5: #e87ba4;
  --metrics-series-6: #008300;
  --metrics-series-7: #4a3aa7;
  --metrics-series-8: #e34948;
  --metrics-series-other: #8a8894;
  --metrics-grid: rgba(20, 18, 30, 0.08);
}

:root[data-theme="dark"] #metrics {
  --metrics-series-1: #3987e5;
  --metrics-series-2: #d95926;
  --metrics-series-3: #199e70;
  --metrics-series-4: #c98500;
  --metrics-series-5: #d55181;
  --metrics-series-6: #008300;
  --metrics-series-7: #9085e9;
  --metrics-series-8: #e66767;
  --metrics-series-other: #9a98a4;
  --metrics-grid: rgba(255, 255, 255, 0.1);
}

.metrics-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
}

.metrics-field-row .ui-field {
  flex: 1 1 200px;
  max-width: 320px;
}

.metrics-query-row .ui-field:first-child {
  flex-basis: 280px;
  max-width: 420px;
}

.metrics-field-row select,
.metrics-field-row input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.metrics-field-row input[aria-invalid="true"] {
  border-color: var(--danger);
}

.metrics-field-row input[aria-invalid="true"] + .ui-field-hint {
  color: var(--danger);
}

.metrics-list-count {
  align-self: flex-end;
  margin: 0 0 10px auto;
}

.metrics-list-hint,
.metrics-range-note,
.metrics-note {
  margin: 4px 0 8px;
}

.metrics-loading {
  padding: 12px 0;
}

.metrics-table-wrap {
  overflow-x: auto;
}

.metrics-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.metrics-catalog-table td {
  font-size: 0.84rem;
  vertical-align: top;
}

.metrics-catalog-table td:first-child {
  min-width: 240px;
}

.metrics-catalog-table .badge {
  white-space: nowrap;
}

.metrics-catalog-row {
  cursor: pointer;
}

.metrics-catalog-row:hover td {
  background: var(--accent-warm-soft);
}

.metrics-name-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  /* ui-fix:a17 — break long names at the dots (<wbr> in the markup), never mid-word (UI-322). */
  overflow-wrap: break-word;
}

.metrics-name-btn:hover,
.metrics-name-btn:focus-visible {
  text-decoration: underline;
}

.metrics-desc {
  margin-top: 2px;
}

.metrics-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.metrics-key {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text);
}

.metrics-quick-picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.metrics-quick-picks .ghost-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.metrics-chart-header {
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.metrics-chart-header h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}

.metrics-chart-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.metrics-chart-actions .ghost-btn {
  min-height: 30px;
  margin-top: 0;
  padding: 5px 12px;
  font-size: 0.8rem;
}

.metrics-chart-wrap {
  position: relative;
  margin-top: 8px;
}

.metrics-chart-canvas {
  width: 100%;
  min-height: 280px;
}

.metrics-chart-svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.metrics-chart-svg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.metrics-grid {
  stroke: var(--metrics-grid);
  stroke-width: 1;
}

.metrics-axis,
.metrics-baseline {
  stroke: var(--panel-border);
  stroke-width: 1;
}

.metrics-tick {
  stroke: var(--panel-border);
}

.metrics-axis-text,
.metrics-axis-unit {
  fill: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
}

.metrics-axis-unit {
  font-weight: 600;
}

.metrics-dot,
.metrics-hover-dot {
  stroke: var(--panel);
  stroke-width: 2;
}

.metrics-crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.metrics-hit {
  cursor: crosshair;
}

.metrics-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 180px;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(20, 18, 30, 0.12);
  font-size: 0.8rem;
  pointer-events: none;
}

.metrics-tooltip[hidden] {
  display: none;
}

.metrics-tooltip-time {
  margin-bottom: 4px;
  color: var(--muted);
}

.metrics-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}

.metrics-tooltip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.metrics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

.metrics-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.metrics-legend-label {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .metrics-field-row .ui-field,
  .metrics-query-row .ui-field:first-child {
    flex-basis: 100%;
    max-width: none;
  }

  .metrics-list-count {
    margin-left: 0;
  }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a12 (topology) ==== */
/* reserved: a12 adds its CSS directly below this line */
/* The map scrolls inside its own frame; the page never grows wider than the window. */
#topology.section { min-width: 0; grid-template-columns: minmax(0, 1fr); }
#topology .topo-panel { margin-top: 16px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.topo-map-region { min-width: 0; }
#topology .topo-panel-header { align-items: flex-start; margin-bottom: 12px; }

/* Filters and the declare-a-relationship form (UI-187) */
.topo-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}
.topo-declare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  align-items: end;
}
.topo-control {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background-color: var(--panel);
  color: var(--text);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
select.topo-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.topo-control:hover { border-color: #c9c5d6; }
.topo-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.topo-control:disabled { color: var(--muted); background-color: #f4f3f8; cursor: not-allowed; }
.topo-declare-btn { min-height: 38px; }
.topo-filter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
}
.topo-relationship-message { min-height: 1.2em; margin: 8px 0 0; }

/* Service map (UI-182) */
.topo-map-region { margin-top: 8px; }
.topo-map-hint, .topo-map-note { margin: 4px 0; }
.topo-map-scroll {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle, rgba(24, 22, 34, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
    #fbfbfd;
  margin-top: 8px;
}
.topo-svg { display: block; max-width: none; margin: 0 auto; font-family: var(--font-body); }
.topo-node { cursor: pointer; outline: none; }
.topo-node-box { fill: var(--panel); stroke: var(--panel-border); stroke-width: 1.2; transition: stroke 150ms ease; }
.topo-node:hover .topo-node-box { stroke: #a9a4bb; }
.topo-node:focus-visible .topo-node-box, .topo-node.is-selected .topo-node-box { stroke: var(--accent); stroke-width: 2.5; }
.topo-node-stripe { fill: #b9b5c6; }
.topo-node.status-healthy .topo-node-stripe { fill: var(--success); }
.topo-node.status-warning .topo-node-stripe { fill: var(--warning); }
.topo-node.status-critical .topo-node-stripe { fill: var(--danger); }
.topo-node.status-critical .topo-node-box { stroke: rgba(217, 57, 74, 0.55); }
.topo-node-name { fill: var(--text); font-size: 13.5px; font-weight: 600; }
.topo-node-stats { fill: var(--text); font-size: 12px; }
.topo-node-meta { fill: var(--muted); font-size: 11.5px; }
.topo-isolated-label { fill: var(--muted); font-size: 12px; font-weight: 600; }

.topo-edge { cursor: pointer; outline: none; }
.topo-edge-hit { fill: none; stroke: transparent; stroke-width: 16; }
.topo-edge-line { fill: none; stroke-width: 2; transition: stroke-width 150ms ease; }
.topo-edge.tone-ok .topo-edge-line { stroke: var(--success); }
.topo-edge.tone-error .topo-edge-line { stroke: var(--danger); stroke-width: 2.4; }
.topo-edge.tone-declared .topo-edge-line { stroke: #7a7589; stroke-dasharray: 6 5; }
.topo-edge.tone-inferred .topo-edge-line { stroke: var(--accent); stroke-dasharray: 6 5; }
.topo-edge:hover .topo-edge-line, .topo-edge:focus-visible .topo-edge-line, .topo-edge.is-selected .topo-edge-line { stroke-width: 3.6; }
.topo-arrow.tone-ok { fill: var(--success); }
.topo-arrow.tone-error { fill: var(--danger); }
.topo-arrow.tone-declared { fill: #7a7589; }
.topo-arrow.tone-inferred { fill: var(--accent); }
.topo-edge-label rect { fill: var(--panel); stroke: var(--panel-border); }
.topo-edge-label text { fill: var(--text); font-size: 11px; font-weight: 600; }
.topo-edge.tone-error .topo-edge-label rect { stroke: rgba(217, 57, 74, 0.45); }
.topo-edge.tone-error .topo-edge-label text { fill: #a61f2e; }
.topo-edge:focus-visible .topo-edge-label rect, .topo-edge.is-selected .topo-edge-label rect { stroke: var(--accent); stroke-width: 2; }

/* Group colours (Group by) — on the node stripe and in the legend */
.topo-node[class*="group-"] .topo-node-stripe { width: 7px; }
.topo-node.group-0 .topo-node-stripe, .topo-swatch.group-0 { fill: #2f6fdb; background: #2f6fdb; }
.topo-node.group-1 .topo-node-stripe, .topo-swatch.group-1 { fill: #7a3fc2; background: #7a3fc2; }
.topo-node.group-2 .topo-node-stripe, .topo-swatch.group-2 { fill: #0f8a8a; background: #0f8a8a; }
.topo-node.group-3 .topo-node-stripe, .topo-swatch.group-3 { fill: #c2410c; background: #c2410c; }
.topo-node.group-4 .topo-node-stripe, .topo-swatch.group-4 { fill: #be185d; background: #be185d; }
.topo-node.group-5 .topo-node-stripe, .topo-swatch.group-5 { fill: #4d7c0f; background: #4d7c0f; }
.topo-node.group-none .topo-node-stripe, .topo-swatch.group-none { fill: #b9b5c6; background: #b9b5c6; }

.topo-legend { display: grid; gap: 6px; margin-top: 10px; }
.topo-legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 0.8rem; color: var(--muted); }
.topo-legend-title { font-weight: 600; color: var(--text); }
.topo-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.topo-legend-line { stroke-width: 2.4; }
.topo-legend-line.tone-ok { stroke: var(--success); }
.topo-legend-line.tone-error { stroke: var(--danger); }
.topo-legend-line.tone-declared { stroke: #7a7589; stroke-dasharray: 5 4; }
.topo-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* Relationship list */
.topo-relationship-list { margin-top: 12px; }
.topo-relationship { align-items: center; }
.topo-relationship .badge { margin-right: 4px; }
.topo-relationship-declared { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topo-line-sample { display: inline-block; width: 22px; border-top: 2px dashed #7a7589; }
.topo-line-sample.tone-inferred { border-top-color: var(--accent); }
.topo-small-btn { min-height: 26px; padding: 2px 10px; font-size: 0.8rem; }

/* Service and connection drawer */
.topo-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.topo-drawer-block { margin-top: 12px; display: grid; gap: 6px; }
.resource-drawer-body > p.small-meta + .kpi-strip { margin-top: 10px; }
.topo-drawer-heading { margin: 18px 0 6px; font-size: 0.95rem; }
.topo-drawer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.topo-drawer-live, .topo-drawer-calls { margin-bottom: 16px; }
.topo-drawer-live .kpi-strip { margin: 10px 0 0; }
.topo-call-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dir name badge" "dir meta badge";
  gap: 2px 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.topo-call-row:hover, .topo-call-row:focus-visible { border-color: var(--accent); outline: none; }
.topo-call-row .topo-call-direction { grid-area: dir; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.topo-call-row strong { grid-area: name; }
.topo-call-row .small-meta { grid-area: meta; }
.topo-call-row .badge { grid-area: badge; }
.topo-attr-key { color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }

@media (max-width: 640px) {
  .topo-filter-footer { flex-direction: column; align-items: flex-start; }
  #topology .topo-panel-header { flex-direction: column; }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a13 (solution areas & payments) ==== */
/* reserved: a13 adds its CSS directly below this line */

/* UI-201 — sample data preview: persistent banner + per-card badge */
.sa-sample-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid rgba(196, 138, 28, 0.55);
  border-left: 5px solid var(--warning);
  border-radius: 10px;
  background: #fff7e6;
  color: #5c3d00;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.sa-sample-banner-icon { display: inline-flex; color: var(--warning); flex: 0 0 auto; }
.sa-sample-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: 0.88rem; }
.sa-sample-banner-text strong { font-size: 0.95rem; }
.sa-sample-banner .ghost-btn { flex: 0 0 auto; }
.badge.sa-sample-badge {
  margin-left: 6px;
  color: #7a4f00;
  background: rgba(196, 138, 28, 0.16);
  border: 1px dashed rgba(196, 138, 28, 0.7);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-transform: none;
}
.sa-sample-content .panel { border-style: dashed; }
.sa-empty { padding: 8px 16px 16px; }
.sa-empty .empty-state-message { max-width: 620px; }
.sa-empty .empty-state-actions { flex-wrap: wrap; justify-content: center; }
.sa-hidden-note { margin: 10px 0 0; text-align: center; }
.sa-loading { padding: 20px; }
.sa-grid { align-items: start; }
.sa-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sa-table-wrap { overflow-x: auto; }
.sa-table td, .sa-table th { white-space: nowrap; }
.sa-table td:first-child { white-space: normal; }
.sa-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* UI-202 — AppPulse: content starts at the top of its card; apdex has a labeled 0–1 scale */
#apppulse .split-grid { align-items: start; }
.sa-apdex-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 150px; }
.sa-apdex { width: 150px; }
.sa-apdex-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--muted); }
/* The global .good/.warn/.bad classes paint a background — the old apdex "blank block" (UI-202). */
.sa-apdex-value, .sa-apdex-value.good, .sa-apdex-value.warn, .sa-apdex-value.bad { background: transparent; }
.sa-apdex-value { font-size: 1rem; color: var(--text); }
.sa-apdex-value.good { color: var(--success); }
.sa-apdex-value.warn { color: var(--warning); }
.sa-apdex-value.bad { color: var(--danger); }
.sa-apdex-track { position: relative; height: 6px; margin-top: 4px; border-radius: 99px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.sa-apdex-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.sa-apdex-fill.good { background: var(--success); }
.sa-apdex-fill.warn { background: var(--warning); }
.sa-apdex-fill.bad { background: var(--danger); }
.sa-apdex-scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: 0.66rem; color: var(--muted); }

/* NexusView live: host and Kubernetes health from real metrics */
.sa-meter { display: flex; flex-direction: column; gap: 3px; min-width: 76px; }
.sa-meter .sa-apdex-track { margin-top: 0; height: 5px; }
.sa-meter-value { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sa-infra-status { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.sa-infra-status.good { color: var(--success); }
.sa-infra-status.warn { color: var(--warning); }
.sa-infra-status.bad { color: var(--danger); }
.infra-host-link, .infra-host-back {
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.infra-host-link:focus-visible, .infra-host-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.infra-host-crumb { margin: 0 0 12px; }
.infra-host-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.infra-host-title { margin: 0; overflow-wrap: anywhere; }
.infra-host-title:focus { outline: none; }
.infra-host-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.infra-host-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 16px; margin: 0; }
.infra-host-facts div { min-width: 0; }
.infra-host-facts dt { font-size: 0.75rem; color: var(--muted); }
.infra-host-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
#nexusview .infra-host-detail .empty-state-message { max-width: 68ch; }

/* StreamLens live: hourly log volume */
.sa-volume { display: flex; flex-direction: column; gap: 6px; }
.sa-volume-row { display: grid; grid-template-columns: minmax(110px, auto) 1fr 56px; align-items: center; gap: 10px; font-size: 0.8rem; }
.sa-volume-label { color: var(--muted); white-space: nowrap; }
.sa-volume-track { display: flex; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.06); overflow: hidden; }
.sa-volume-seg { display: block; height: 100%; }
.sa-volume-seg.error, .sa-legend.error::before { background: var(--danger); }
.sa-volume-seg.warning, .sa-legend.warning::before { background: var(--warning); }
.sa-volume-seg.info, .sa-legend.info::before { background: var(--accent); }
.sa-volume-count { text-align: right; font-variant-numeric: tabular-nums; }
.sa-volume-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
.sa-legend::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }

/* UI-212 — Payments (Enterprise) upsell */
.pay-summary-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pay-paywall { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; }
.pay-paywall-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 14px; color: var(--accent); background: rgba(23, 102, 212, 0.1); }
.pay-paywall-icon svg { width: 28px; height: 28px; }
.pay-paywall-title { margin: 0 0 6px; }
.pay-paywall-lede { max-width: 520px; margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.pay-paywall-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; width: 100%; max-width: 860px; margin-bottom: 18px; }
.pay-paywall-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 10px; text-align: left; font-size: 0.84rem; }
.pay-paywall-feature span:last-child { color: var(--muted); line-height: 1.45; }
.pay-paywall-feature-icon { display: inline-flex; margin-bottom: 4px; color: var(--accent); }
.pay-paywall-note { max-width: 620px; margin: 0 0 18px; font-size: 0.82rem; color: var(--muted); }
.pay-paywall-footnote { margin: 12px 0 0; font-size: 0.78rem; color: var(--muted); }

@media (max-width: 720px) {
  .sa-sample-banner { flex-wrap: wrap; }
  .sa-volume-row { grid-template-columns: 90px 1fr 44px; }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a14 (dashboards & operations forms) ==== */
/* reserved: a14 adds its CSS directly below this line */
/* Labeled form grids for Dashboards, Alert rules, SLOs, Investigations, Incidents and Query (UI-193, UI-311, UI-312). */
.a14-fields {
  display: grid;
  gap: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}
.a14-fields-stack { grid-template-columns: minmax(0, 1fr); }
.a14-fields-narrow { grid-template-columns: minmax(0, 260px); }
.a14-filter-fields { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); margin-bottom: 12px; }
.a14-fields-with-action { align-items: end; }
.a14-update-row { grid-template-columns: minmax(0, 1fr) auto; }
.a14-fields input:not([type="checkbox"]):not([type="radio"]),
.a14-fields select,
.a14-fields textarea,
.a14-query-row input {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 12px;
  font: inherit;
  color: var(--text);
  background: var(--panel, #fff);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}
.a14-fields textarea { resize: vertical; min-height: 80px; }
.a14-fields input:focus-visible,
.a14-fields select:focus-visible,
.a14-fields textarea:focus-visible,
.a14-query-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.a14-fields .action-row,
.a14-fields > button { align-self: end; }
.a14-picker { display: grid; gap: 8px; min-width: 0; }
.a14-picker-other[hidden] { display: none; }
.a14-service-multi { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.a14-service-multi legend { padding: 0; margin-bottom: 6px; }
.a14-check-list { display: flex; flex-wrap: wrap; gap: 8px; }
.a14-check-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
}
.a14-check-chip:has(input:checked) { border-color: var(--accent); background: rgba(23, 102, 212, 0.08); font-weight: 600; }
.a14-check-chip input { margin: 0; accent-color: var(--accent); }
.a14-form-error { margin: 8px 0 0; font-size: 0.88rem; color: var(--danger); }
.a14-form-error:empty { display: none; }
.a14-group-label { margin: 14px 0 6px; }
.a14-align-start { align-items: start; }
.a14-results-title { margin: 18px 0 6px; }

.a14-inline-btn { width: auto; align-self: flex-start; justify-self: start; }

/* Alert rules page (UI-221, UI-225) */
.a14-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.a14-count-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Sub-headings inside the Recent alerts list: declared incidents and items no longer open sit under their own label. */
.a14-alert-group-heading { margin: 6px 0 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* Dashboards (UI-191, UI-192) */
.a14-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
}
.a14-suggestion h3 { margin: 0 0 4px; }
.a14-suggestion p { margin: 0; }
.a14-template-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; margin-bottom: 12px; }
/* One intent per group ("Spot trends", "Analyze relationships", "Track progress"): the label sits above
   its own buttons so the grouping survives wrapping, which a single flex row loses. */
.a14-template-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a14-template-group > .small-meta { flex-basis: 100%; }
@media (max-width: 720px) { .a14-template-row { flex-direction: column; gap: 10px; } }
.a14-bar-value { font-variant-numeric: tabular-nums; }
.a14-bar-label { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.a14-widget-empty { padding: 24px 0; text-align: center; }
.dashboard-preview-grid { align-items: start; }
.a14-hbar-list { display: grid; gap: 10px; }
.a14-hbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  font-size: 0.82rem;
}
.a14-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a14-hbar-track { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); overflow: hidden; }
.a14-hbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.a14-hbar-value { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3ch; text-align: right; }

/* Query (UI-223) */
.a14-query-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}
.a14-query-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.a14-query-example { min-height: 28px; padding: 3px 10px; font-size: 0.8rem; }

@media (max-width: 640px) {
  .a14-query-row,
  .a14-update-row { grid-template-columns: minmax(0, 1fr); }
  .a14-suggestion { align-items: stretch; }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a15 (integrations team governance) ==== */
/* reserved: a15 adds its CSS directly below this line */
/* Shared: forms on Team / Governance use one input style (UI-254, UI-315) */
.a15-form input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.a15-form select,
.a15-form textarea,
.a15-mono-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 40px;
  font: inherit;
}
.a15-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  max-width: 220px;
}
.a15-form textarea { resize: vertical; }
.a15-mono-input,
.a15-form textarea.a15-mono-input { font-family: var(--font-mono); font-size: 0.8rem; }
.a15-form input:focus-visible,
.a15-form select:focus-visible,
.a15-form textarea:focus-visible,
.a15-mono-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.a15-form input[readonly] { color: var(--muted); }
.a15-form { display: grid; gap: 14px; }
.a15-fields { display: grid; gap: 12px; }
.a15-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a15-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.a15-error { color: var(--danger); min-height: 18px; font-size: 0.86rem; margin: 0; }
.a15-status-msg { min-height: 18px; font-size: 0.86rem; color: var(--accent); }
.a15-pad { padding: 12px 4px; margin: 0; }
.a15-pad-top { margin-top: 12px; }
.a15-section-gap { margin-top: 24px; }
.a15-wrap { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.a15-stack { display: grid; gap: 20px; align-content: start; min-width: 0; }

/* Rows: members, invites, audit events */
.a15-list { display: grid; }
.a15-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--panel-border);
  min-width: 0;
}
.a15-row:last-child { border-bottom: none; }
.a15-row-main { min-width: 0; }
.a15-row-main .small-meta { margin: 2px 0 0; overflow-wrap: anywhere; }
.a15-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a15-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.a15-row-time { flex-shrink: 0; white-space: nowrap; }
.a15-small-btn { font-size: 0.8rem; padding: 4px 10px; min-height: 30px; }
.a15-danger-text { color: var(--danger); }
.a15-you {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Team: invite result with the one-time link */
.a15-invite-result {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(31, 157, 108, 0.35);
  background: rgba(31, 157, 108, 0.07);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
}
.a15-invite-result p { margin: 0; }
.a15-copy-row { display: flex; gap: 8px; align-items: center; }
.a15-copy-row .a15-mono-input { flex: 1; min-width: 0; }
.team-role-card[aria-checked="true"] { outline: none; }

/* Integrations */
.a15-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a15-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.a15-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8b4c4; }
.a15-status.a15-tone-good { color: #17774f; }
.a15-status.a15-tone-good .a15-status-dot { background: var(--success); }
.a15-status.a15-tone-warn { color: #8a5d0c; }
.a15-status.a15-tone-warn .a15-status-dot { background: var(--warning); }
.a15-status.a15-tone-bad { color: #b32536; }
.a15-status.a15-tone-bad .a15-status-dot { background: var(--danger); }
.a15-otel-row { background: var(--accent-warm-soft); border-radius: var(--radius-sm); padding-left: 10px; padding-right: 10px; }
.a15-legacy-row .catalog-row-text > .small-meta:first-of-type { max-width: 62ch; }

/* Governance: keys */
.a15-keys { display: grid; }
.a15-key-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--panel-border);
}
.a15-key-row:last-child { border-bottom: none; }
.a15-key-row-stacked { grid-template-columns: 1fr; gap: 6px; }
.a15-key-label strong { white-space: nowrap; }
.a15-key-label .small-meta { margin: 2px 0 0; }
.a15-key-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.a15-key-row-stacked .a15-key-value { justify-content: space-between; }
.a15-key-code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.a15-key-code.is-revealed {
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
  min-width: 0;
}
.a15-key-actions { margin-top: 10px; align-items: center; }
.a15-danger-zone {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(217, 57, 74, 0.35);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.a15-danger-zone p { margin: 2px 0 0; }
.a15-danger-outline-btn,
.a15-danger-btn {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 34px;
  font-family: var(--font-body);
  font-weight: 600;
}
.a15-danger-outline-btn { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.a15-danger-outline-btn:hover:not(:disabled) { background: rgba(217, 57, 74, 0.08); }
.a15-danger-btn { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.a15-danger-btn:disabled,
.a15-danger-outline-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Phase 8.1 — Governance: API tokens */
.a15-token-row .a15-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a15-token-prefix { font-family: var(--font-mono); font-size: 0.78rem; }
.a15-token-scopes .badge { margin-right: 4px; }
.a15-token-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--panel-border); }
.a15-token-form h4 { margin: 0 0 10px; }
.a15-scope-set { border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.a15-scope-set legend { padding: 0 4px; }
.a15-scope-option { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.a15-scope-option.is-static { grid-template-columns: 1fr; cursor: default; }
.a15-scope-option input { margin-top: 3px; }
.a15-scope-option .small-meta { display: block; }
.app-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--success);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.app-toast.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.a15-new-token { margin-bottom: 14px; }
.a15-token-retired { margin-top: 12px; }
.a15-token-retired summary { cursor: pointer; }

/* Confirmation dialog */
.a15-dialog {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.a15-dialog::backdrop { background: rgba(20, 18, 31, 0.55); }
.a15-dialog-body { padding: 20px; display: grid; gap: 10px; }
.a15-dialog-body h3 { margin: 0; }
.a15-dialog-body p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.a15-dialog-body input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: inherit;
}
.a15-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Invite acceptance on the sign-up form */
.a15-join-error { color: var(--danger); }

@media (max-width: 720px) {
  .a15-row { flex-wrap: wrap; }
  .a15-row-actions { justify-content: flex-start; }
  .a15-key-row { grid-template-columns: 1fr; }
  .a15-key-value { justify-content: space-between; }
  .a15-copy-row { flex-wrap: wrap; }
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==== ui-fix:a16 (responsive & accessibility) ==== */
/* reserved: a16 adds its CSS directly below this line */

/* UI-314 — status colors that are also used as text (badges, KPI sub-labels, deltas) were below
   WCAG AA on white (success 3.44:1, warning 3.00:1, danger 4.53:1, and lower on the grey badge fill).
   Darker values of the same hues: ≥5:1 on white, the page background, cards and badge fills. */
:root {
  --teal: #136f4a;
  --success: #136f4a;
  --warning: #8a5a00;
  --danger: #c0283a;
  --focus-ring: #114ea3;
  --control-border: #cdd3de;
}

/* The small orange KPI sub-labels ("in current window", "reporting in") use the darker brand shade. */
.kpi-tile-delta:not(.good):not(.warn):not(.bad):not(.neutral),
.metric-delta:not(.good):not(.warn):not(.bad) {
  color: var(--accent-strong);
}

/* kpiRow tone "neutral": plain text for a card with nothing in it (a zero Critical/Warning count), so it
   is not drawn green, red or in the brand orange. */
.kpi-tile-delta.neutral {
  color: var(--muted);
}

/* Orange text on the orange-tinted header badges ("Live", "0 sessions") was 4.1:1. */
.section-hero-badge {
  color: var(--accent-strong);
}

/* The global .good/.warn/.bad background utilities also painted these numbers' backgrounds in the
   same color as the text, so the value was invisible (e.g. Apdex rings). They are text again. */
.apdex-value:is(.good, .warn, .bad),
.vital-card-value:is(.good, .warn, .bad),
.security-score-value:is(.good, .warn, .bad),
.model-stat-value:is(.good, .warn, .bad),
.pay-kpi-value:is(.good, .warn, .bad) {
  background: none;
}

/* Black text on the (now darker) warning fill would fall below AA; white text meets it (5.9:1). */
.trial-banner-warning {
  color: #fff;
}

/* Phase 9.1 — email confirmation banner. Persistent until the address is confirmed; the gate itself is
   enforced by the server, the banner explains it and offers "Resend". */
.email-verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--panel-strong);
  color: var(--text);
  border-bottom: 1px solid var(--panel-border);
}
/* Shell notices live inside main.content (a grid with its own padding), so they read as cards. */
.content > .email-verify-banner,
.content > .trial-banner { border-radius: 10px; border-bottom: none; }
.email-verify-banner-required { background: var(--warning); color: #fff; border-bottom-color: transparent; }
.email-verify-banner-success { background: var(--success, #15803d); color: #fff; border-bottom-color: transparent; }
.email-verify-copy { flex: 1 1 320px; line-height: 1.4; }
.email-verify-note { opacity: 0.85; font-weight: 400; }
.email-verify-actions { display: flex; align-items: center; gap: 10px; }
.email-verify-banner .ghost-btn { color: inherit; border-color: currentColor; padding: 4px 10px; font-size: 12px; }
.email-verify-banner .ghost-btn[disabled] { opacity: 0.6; cursor: default; }
.email-verify-status { font-size: 12px; opacity: 0.9; }

.email-verified-confirmation {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 10, 16, 0.72);
}
.email-verified-card {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px 24px;
  border-radius: var(--radius-sm, 12px);
  background: var(--panel, #fff);
  color: var(--text, #14121e);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.email-verified-card h2 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
}
.email-verified-card p { margin: 0; line-height: 1.45; }
.email-verified-card .primary-btn { justify-self: start; }

/* UI-311/312 — screen-reader-only text utility. */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Global visible keyboard focus. !important because several components remove outlines on :focus;
   :focus-visible only matches keyboard focus (and text fields), so mouse clicks on buttons stay clean. */
:where(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

.sidebar :focus-visible,
.mobile-app-header :focus-visible {
  outline-color: #fbbf24 !important;
}

/* UI-315 — base look for native inputs, selects and textareas that have no component styling
   (Topology filters, Dashboard builder, SSO fields, sign-up Industry …). :where() keeps specificity at
   zero, so every existing component rule still wins. Matches the existing styled fields. */
:where(.app-shell, .auth-overlay)
  :where(
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
    select,
    textarea
  ) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font: inherit;
  line-height: 1.3;
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
}

:where(.app-shell, .auth-overlay) :where(textarea) {
  min-height: 76px;
  resize: vertical;
}

:where(.app-shell, .auth-overlay) :where(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}

:where(.app-shell, .auth-overlay) :where(input, select, textarea):focus {
  border-color: var(--accent);
}

:where(.app-shell, .auth-overlay) :where(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(.app-shell, .auth-overlay) :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--accent);
}

/* UI-303 — the display font's "1" has a long flag, so "10", "118%" and "1.2%" read oddly in KPI cards.
   KPI numbers use the body font with lining, tabular figures (columns of numbers also line up). */
.metric-value,
.kpi-tile-value,
.vital-card-value,
.dora-card-value,
.security-score-value,
.business-kpi-value,
.apdex-value,
.slo-target-card-value,
.pay-kpi-value,
.obs-metric-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
}

/* UI-313 — status shown by color alone. Besides the text alternative added by
   initStatusIndicatorLabels() (app.js), the dots carry a shape: healthy ● circle, warning ▲ triangle,
   critical ■ square — readable without telling the colors apart. */
:where(.dot, .onboarding-status-dot, .workflow-run-status-dot, .rum-friction-dot, .threat-signal-indicator, .pay-tl-dot):is(.warn, .warning, .waiting, .waiting_approval, .medium) {
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

:where(.dot, .onboarding-status-dot, .workflow-run-status-dot, .rum-friction-dot, .threat-signal-indicator, .pay-tl-dot):is(.bad, .critical, .error, .failed, .high) {
  border-radius: 2px;
  box-shadow: none;
}

/* Respect "reduce motion": no pulsing dots, shimmer, count-ups or slide-ins. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The closed resource drawer sits just off the right edge; its shadow bled onto every page as a grey
   band and its controls stayed in the tab order. Hide it once it has slid out. */
.resource-drawer:not(.open) {
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 240ms;
}

/* ── UI-321 — phone & tablet navigation: header bar + off-canvas sidebar drawer (initNavDrawer) ── */
.mobile-app-header,
.mobile-nav-close,
.mobile-nav-overlay {
  display: none;
}

@media (max-width: 1100px) {
  html {
    scroll-padding-top: 64px;
  }

  html.nav-drawer-scroll-lock,
  html.nav-drawer-scroll-lock body {
    overflow: hidden;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .mobile-app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 4px 16px 4px 6px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text-active);
    border-bottom: 1px solid var(--sidebar-border);
  }

  .mobile-nav-toggle,
  .mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-text-active);
    cursor: pointer;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-close:hover {
    background: var(--sidebar-hover);
  }

  .mobile-nav-toggle-bars {
    display: grid;
    gap: 4px;
    width: 20px;
  }

  .mobile-nav-toggle-bars > span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .mobile-app-brand {
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
  }

  .mobile-app-page {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sidebar-text);
    font-size: 0.88rem;
  }

  .mobile-app-page:not(:empty)::before {
    content: "/";
    margin-right: 10px;
    opacity: 0.6;
  }

  .app-shell > .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    width: min(320px, 86vw);
    height: auto;
    max-height: none;
    padding-top: 60px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--sidebar-border);
    border-bottom: none;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }

  .app-shell.nav-drawer-open > .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
    transition: transform 200ms ease;
  }

  .mobile-nav-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.1rem;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(10, 8, 20, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  .app-shell.nav-drawer-open > .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease;
  }

  /* Hover flyouts are a pointer affordance; in the drawer, groups simply expand inline. */
  .app-shell > .sidebar .nav-flyout {
    display: none;
  }

  /* ── UI-322 — narrow widths: nothing wider than the screen ── */
  .app-shell > .content {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .content > .section,
  .content :where(.panel, .split-grid > *, .dashboard-shell > *, .three-grid > *, .metrics-grid > *, .kpi-strip > *) {
    min-width: 0;
  }

  /* Tables scroll sideways inside their card instead of widening (or being clipped by) the page. */
  .content :where(div, article, section):has(> table) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A grid card sizes its implicit column to the widest child, so a wide table also stretched the
     filters above it past the screen edge. One shrinkable column keeps them at the card width. */
  .content :where(.panel, .table-card):has(> table, > pre) {
    grid-template-columns: minmax(0, 1fr);
  }

  .content :where(table) th,
  .content :where(table) td.nowrap-token {
    white-space: nowrap;
  }

  /* …and multi-word cells (log messages, span names) keep a readable measure instead of being
     squeezed to one word per line next to an unbreakable ID; the table scrolls instead. */
  .content :where(table) td.long-text {
    min-width: 16ch;
  }

  .content :where(pre) {
    max-width: 100%;
    overflow-x: auto;
  }

  .content :where(img) {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 720px) {
  .app-shell > .content {
    padding: 16px;
  }

  .builder-row textarea {
    min-width: 0;
    width: 100%;
  }

  .builder-row > .ui-field {
    flex: 1 1 160px;
  }
}

.time-range-row {
  align-items: flex-end;
}

.time-range-row .apply-time-range-btn {
  align-self: flex-end;
}

/* Trace waterfall guard (the waterfall itself belongs to trace detail): narrower label/duration columns
   and only every other tick label, so tick labels can't run into each other. */
@media (max-width: 800px) {
  .trace-waterfall-scale,
  .trace-waterfall-row {
    grid-template-columns: minmax(96px, 40%) minmax(0, 1fr) 64px;
    gap: 8px;
  }

  .trace-waterfall-row > :last-child {
    white-space: nowrap;
    font-size: 0.78rem;
  }

  .trace-waterfall-ticks {
    gap: 6px;
    white-space: nowrap;
  }

  .trace-waterfall-ticks > :nth-child(even) {
    display: none;
  }
}

/* Phones: the span name gets its own line above the bar, and only the start and end ticks show. */
@media (max-width: 480px) {
  .trace-waterfall-scale,
  .trace-waterfall-row {
    grid-template-columns: minmax(0, 1fr) 64px;
    row-gap: 2px;
  }

  .trace-waterfall-row > :first-child {
    grid-column: 1 / -1;
  }

  .trace-waterfall-scale > :first-child {
    display: none;
  }

  .trace-waterfall-ticks > :nth-child(3) {
    display: none;
  }
}

/* ==== ui-fix:a17 (qa) ==== */
/* reserved: a17 adds its CSS directly below this line */
/* Prism synthetic monitors: the uptime text shares the global .good/.warn/.bad status-dot classes, whose
   background painted the text's own color behind it ("98.41% uptime" was invisible). Text color only. */
.monitor-uptime.good,
.monitor-uptime.warn,
.monitor-uptime.bad { background: none; }
.monitor-uptime.good { color: var(--success); }
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ---- Query Studio (remediation Phase 7) ---------------------------------------------------------- */
.studio-layout { display: grid; gap: 16px; }
.studio-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr);
  gap: 12px;
  align-items: start;
}
.studio-group {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 8px;
  min-width: 0;
}
.studio-group legend {
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.studio-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) minmax(120px, 0.8fr) minmax(160px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}
.studio-row.studio-row-group { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto; }
.studio-row.studio-row-agg { grid-template-columns: minmax(130px, 0.8fr) minmax(150px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) auto; }
.studio-row [hidden] { display: none; }
.studio-builder input,
.studio-builder select {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--panel, #fff);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}
.studio-builder input:focus-visible,
.studio-builder select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.studio-builder button[disabled] { opacity: 0.55; cursor: not-allowed; }
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: end;
  margin-top: 12px;
}
.studio-actions .ui-field { flex: 1 1 200px; }
.studio-actions .primary-btn,
.studio-actions .secondary-btn,
.studio-actions .ghost-btn { margin-top: 0; }
.studio-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(185, 28, 28, 0.08);
  color: var(--danger);
  font-size: 0.88rem;
}
.studio-error code { font-size: 0.8rem; }
.studio-table-wrap { overflow-x: auto; }
.studio-table th,
.studio-table td {
  white-space: nowrap;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  font-size: 0.86rem;
}
.studio-table td.wrap { white-space: normal; overflow-wrap: anywhere; }
.studio-table td.num,
.studio-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.studio-table .studio-trace-link { min-height: 24px; padding: 1px 6px; font-size: 0.8rem; }
.studio-json { font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.studio-sql { margin-top: 10px; }
.studio-sql summary { cursor: pointer; }
.studio-sql pre {
  margin: 6px 0 0;
  padding: 10px;
  overflow-x: auto;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
}
.studio-legacy summary { cursor: pointer; font-weight: 600; }
.studio-legacy > .small-meta { margin: 8px 0 12px; }
@media (max-width: 900px) {
  .studio-toolbar,
  .studio-row,
  .studio-row.studio-row-group,
  .studio-row.studio-row-agg { grid-template-columns: minmax(0, 1fr); }
}

/* Two-step verification — sign-in step (#mfa-form) and Account → Security dialog. */
.mfa-method-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.mfa-method {
  flex: 1 1 auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mfa-method[aria-checked="true"] { border-color: var(--accent); color: var(--text); background: var(--panel-strong); }
#mfa-code { letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.security-dialog { width: min(520px, calc(100vw - 32px)); }
.security-dialog-body { gap: 12px; }
.security-factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--panel-border);
}
.security-factor p { margin: 2px 0 0; }
.security-required { color: var(--text) !important; }
.security-qr { display: grid; place-items: center; }
.security-qr svg { width: 180px; height: 180px; background: #fff; border-radius: 8px; }
.security-secret { word-break: break-all; }
.security-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0;
  padding: 12px 12px 12px 32px;
  border-radius: 8px;
  background: var(--panel-strong);
  font-size: 14px;
}
.security-row-actions { display: flex; gap: 8px; }
.security-ack, .security-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.security-verify { display: grid; gap: 6px; }
.security-verify select, .security-dialog-body input[type="text"] { width: 100%; }
.security-error { color: var(--danger) !important; min-height: 0; }
.security-error:empty, .security-message:empty { display: none; }

#ai-analyst-dialog { width: min(760px, 94vw); max-height: min(90vh, calc(100dvh - 32px)); padding: 24px; box-sizing: border-box; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 16px; color: #18243a; background: #fff; }
#ai-analyst-dialog::backdrop { background: #0b152b88; }
#ai-analyst-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
#ai-analyst-dialog h2 { margin: 0; }
#ai-analyst-dialog header p { color: #53627a; font-size: 13px; }
#ai-analyst-disclaimer { margin: 6px 0 0; color: #8792a6; font-size: 11px; line-height: 1.4; }
/* INSIGHTS-279: the dialog is a column that fits the viewport; only the body scrolls, the form stays in view. */
#ai-analyst-dialog[open] { display: flex; flex-direction: column; }
#ai-analyst-dialog > header, #ai-analyst-dialog > p, #ai-analyst-form { flex: 0 0 auto; }
#ai-analyst-dialog .ai-analyst-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#ai-analyst-messages { margin: 18px 0; }
body:has(#ai-analyst-dialog[open]) { overflow: hidden; }
#ai-analyst-dialog #ai-analyst-demo-questions { max-height: none; overflow: visible; }
#ai-analyst-form textarea { max-height: 22vh; }
#ai-analyst-form .ai-analyst-footer { position: sticky; bottom: 0; background: #fff; padding-top: 4px; }
.ai-message { white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 10px; padding: 14px; margin: 12px 0; background: #f3f6fb; }
.ai-message.user { background: #e8efff; }
.ai-message pre { white-space: pre-wrap; font-size: 12px; }
#ai-analyst-form { display: grid; gap: 8px; }
#ai-analyst-form textarea { width: 100%; padding: 10px; font: inherit; resize: vertical; border: 1px solid #cbd5e1; border-radius: 8px; }
#ai-analyst-form > div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#ai-analyst-dialog button { padding: 8px 14px; border-radius: 8px; border: 1px solid #cbd5e1; cursor: pointer; }
#ai-analyst-submit { background: #223e9c; color: white; }
/* Query Studio result shaping controls. */
.studio-row[data-kind="formula"] { grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) auto; }
.studio-row[data-kind="having"] { grid-template-columns: minmax(150px, 2fr) minmax(70px, 1fr) minmax(100px, 1fr) auto; }
.studio-formula-error { grid-column: 1 / -1; }
.studio-toolbar > label { display: grid; gap: 6px; }
.studio-row.studio-countif-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.studio-chart { margin: 16px 0 0; display: grid; gap: 8px; }
.studio-chart-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 3fr) auto; gap: 10px; align-items: center; }
.studio-chart-row > span:first-child { overflow-wrap: anywhere; }
.studio-chart-row meter { width: 100%; }
@media (max-width: 700px) {
  .studio-row[data-kind="formula"], .studio-row[data-kind="having"], .studio-row.studio-countif-row { grid-template-columns: minmax(0, 1fr); }
}

/* OQL source and accessible highlighted preview. */
#studio-oql { width:100%; font-family:monospace; }
#studio-oql-highlight { white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; background:var(--bg); }
.oql-word { color:#7a9cff; }
.oql-string { color:#2fa98d; }
.oql-number { color:#d99044; }
#studio-oql-suggestions { display:flex; flex-wrap:wrap; gap:4px; }

/* Onyx Internal (internal.js): INTERNAL badge, environment label and health pills */
.internal-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.internal-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; background: var(--purple); color: #fff; }
.internal-env-staging { background: #1d6fb8; }
.internal-env-production { background: var(--danger); }
.internal-env-unknown { background: var(--muted); }
.internal-pill { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: capitalize; border: 1px solid transparent; }
.internal-pill-healthy { color: var(--success); background: rgba(31, 157, 108, 0.12); border-color: rgba(31, 157, 108, 0.35); }
.internal-pill-degraded { color: var(--warning); background: rgba(196, 138, 28, 0.14); border-color: rgba(196, 138, 28, 0.4); }
.internal-pill-down { color: var(--danger); background: rgba(217, 57, 74, 0.12); border-color: rgba(217, 57, 74, 0.4); }
.internal-pill-unknown { color: var(--muted); background: rgba(97, 93, 108, 0.12); border-color: rgba(97, 93, 108, 0.3); }
.internal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.internal-stale { color: var(--warning); font-weight: 600; font-size: 0.85rem; }
.internal-notice { padding: 10px 14px; border-radius: var(--radius-sm); margin: 12px 0; border: 1px solid var(--panel-border); }
.internal-notice-error { border-color: rgba(217, 57, 74, 0.4); background: rgba(217, 57, 74, 0.08); }
.internal-notice-warning { border-color: rgba(196, 138, 28, 0.45); background: rgba(196, 138, 28, 0.1); }
.internal-signal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.internal-signal { padding: 14px; }
.internal-signal-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.internal-signal-value { font-family: var(--font-mono); font-size: 1.3rem; margin-top: 8px; }
.internal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.internal-filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.internal-table-wrap { overflow-x: auto; }
.internal-table td[data-tenant-url], .internal-table td[data-tenant-subdomain], .internal-table td[data-tenant-slug] { overflow-wrap: anywhere; }
.internal-tenant-identity { display: grid; gap: 6px; margin: 8px 0 12px; min-width: 0; }
.internal-tenant-identity div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.internal-tenant-identity dt { font-weight: 650; }
.internal-tenant-identity dd { margin: 0; overflow-wrap: anywhere; }
.st-tenant-identity { overflow-wrap: anywhere; }
.internal-workspace-session { margin: 8px 0 12px; min-width: 0; overflow-wrap: anywhere; }
.internal-workspace-session .action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.internal-lifecycle { margin: 8px 0 12px; min-width: 0; overflow-wrap: anywhere; }
.internal-lifecycle .action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.internal-lifecycle form[data-console-form="lifecycle"] { margin-top: 8px; }
.internal-table { width: 100%; border-collapse: collapse; }
.internal-table th, .internal-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
.internal-pager { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.internal-console { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; max-width: 100%; }
.internal-console-panel { min-width: 0; max-width: 100%; }
.internal-logs-table-wrap { min-width: 0; max-width: 100%; max-height: 60vh; overflow: auto; }
.internal-logs-table { table-layout: fixed; }
.internal-logs-table th, .internal-logs-table td { overflow-wrap: anywhere; word-break: break-word; }
.internal-support-banner {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 12%, var(--panel, #fff));
}
.internal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.internal-tab[aria-selected="true"] { border-color: var(--accent, #1d6fb8); font-weight: 650; }
.internal-console-form { display: grid; gap: 10px; max-width: 640px; }
.internal-reason { display: flex; flex-direction: column; gap: 4px; }
.internal-deferred { margin: 0; padding-left: 18px; }

/* Back button in the always-visible shell bar: returns to the previous product page, never leaves the app. */
.shell-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  flex: 0 0 auto;
}
.shell-back-btn.is-hidden { display: none; }

/* Shown only when JavaScript is off: the shell cannot sign anyone in without it, and the old marketing page is retired. */
.noscript-note {
  max-width: 480px;
  margin: 96px auto 0;
  padding: 0 24px;
  text-align: center;
  line-height: 1.5;
}
.noscript-note a { text-decoration: underline; }

/* Loading the shell (an in-app address, the homepage's Sign in link, a signed-out visit): keep the sign-in card out of
   sight until app.js knows whether there is a session (route-boot.js sets the class before first paint; app.js removes
   it). */
.route-app-loading #marketing-site,
.route-app-loading #auth-overlay {
  display: none !important;
}
.route-app-loading body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(128, 128, 128, 0.25);
  border-top-color: var(--accent, #a85a2a);
  border-radius: 50%;
  animation: route-loading-spin 0.8s linear infinite;
}
@keyframes route-loading-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .route-app-loading body::before { animation-duration: 3s; }
}

.ai-analyst-enter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: 12px;
  color: var(--muted, #667085);
}
.ai-analyst-enter-option span { opacity: 0.8; }


/* An action Onyx Oracle proposed and nobody has decided yet. Deliberately loud: it is the one thing on an
   investigation that needs a person, and as a wrapped tenth tab it was going unseen entirely. */
.investigation-pending-approval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--accent, #c2410c);
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #c2410c) 8%, transparent);
}
.investigation-pending-approval strong { font-size: 14px; }
.investigation-pending-approval p { margin: 0; flex: 1 1 260px; }
.investigation-pending-approval .primary-btn { margin-left: auto; }

/* Service Catalog — a readiness count, never a grade. The failing checks are listed underneath so the
   number is always explainable. */
.svc-cat-item { display: flex; flex-direction: column; gap: 6px; }
.svc-cat-missing { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.svc-cat-missing li { margin: 2px 0; }
.svc-cat-ready { color: var(--good, #15803d); }

/* Recording a service owner inline, so "no owner recorded" is fixable where it is reported. */
.svc-cat-owner-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-cat-owner-input { flex: 1 1 180px; min-width: 140px; padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: inherit; }

/* Workflow template gallery (in front of the step-list builder). Reuses .onboarding-grid/.onboarding-card. */
.wf-template-grid { margin-bottom: 14px; }
.wf-template-card { text-align: left; font: inherit; color: inherit; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.wf-template-card strong { font-size: 0.95rem; }
.wf-template-chain { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; }
.wf-template-card-unmet { opacity: 0.72; border-style: dashed; }
.wf-template-card-unmet:hover { opacity: 1; }
.wf-template-reason { color: var(--warning, #c48a1c); font-weight: 600; }
.wf-template-group { margin: 14px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.wf-template-none { margin: 8px 0 0; }
.wf-draft-error { margin: 6px 0 0; }
@media (max-width: 860px) { .wf-template-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* Service Catalog: owner records whose service is not on the map this window. */
.svc-cat-orphan-list { list-style: none; margin: 0; padding: 0; }
.svc-cat-orphan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--panel-border); }
.svc-cat-orphan:first-child { border-top: 0; }

/* Release guardians (Figma S0NOmUqBz4zFZgWXKo5zk8 node 3:100) */
.guardian-dialog { width: min(680px, calc(100vw - 32px)); }
.guardian-dialog-body { gap: 14px; }
.guardian-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--panel-border); }
.guardian-dialog-head h3 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.guardian-shield { display: inline-block; width: 16px; height: 18px; border: 2px solid var(--accent); border-radius: 4px 4px 8px 8px / 4px 4px 12px 12px; }
.guardian-dialog-close { font-size: 1.2rem; line-height: 1; padding: 2px 8px; }
.guardian-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.guardian-chip { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--panel-border); border-radius: 999px; font-size: 0.88rem; cursor: pointer; background: var(--panel); }
.guardian-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.guardian-chip.is-selected, .guardian-chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.guardian-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.guardian-condition-pinned { display: block; width: 100%; box-sizing: border-box; margin: 0; resize: none; color: inherit; line-height: 1.45; field-sizing: content; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--surface-elev, rgba(0,0,0,0.03)); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; }
.guardian-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--panel-border); }

/* Tenant-facing Insights Agent platform selector. Keep the dark, high-contrast picker scoped
   to this surface so it can sit inside the existing light application without changing its theme. */
.insights-install {
  --insights-install-blue: #168dcc;
  width: 100%;
  max-width: 1040px;
  padding: clamp(20px, 4vw, 36px);
  color: var(--sidebar-text-active);
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow);
}

.insights-install-intro {
  max-width: 760px;
  margin-bottom: 22px;
}

.insights-install-intro :is(h1, h2, h3) {
  margin: 0 0 8px;
  color: var(--success, #1f9d6c);
  font-family: var(--font-display, inherit);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.2;
}

.insights-install-intro :is(p, .muted) {
  margin: 0;
  color: var(--sidebar-text, #b7b3c4);
  font-size: 0.95rem;
  line-height: 1.6;
}

.insights-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 0;
}

.insights-platform-card {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.035);
  color: var(--sidebar-text-active, #fff);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.insights-platform-card:hover {
  border-color: rgba(31, 157, 108, 0.7);
  background: rgba(255, 255, 255, 0.075);
}

.insights-platform-card:focus-visible,
.insights-platform-card:focus-within {
  outline: 2px solid var(--success, #1f9d6c);
  outline-offset: 3px;
}

.insights-platform-card.selected {
  border-color: var(--success, #1f9d6c);
  background: rgba(31, 157, 108, 0.16);
  box-shadow: inset 0 0 0 1px var(--success, #1f9d6c);
}

.insights-platform-card:disabled,
.insights-platform-card[aria-disabled="true"] {
  opacity: 0.58;
  cursor: not-allowed;
}

.insights-platform-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-text-active, #fff);
  font-size: 1.15rem;
  line-height: 1;
}

.insights-platform-card.selected .insights-platform-icon {
  border-color: rgba(31, 157, 108, 0.55);
  background: rgba(31, 157, 108, 0.2);
  color: var(--success, #1f9d6c);
}

.insights-platform-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: inherit;
  line-height: 1.35;
}

.insights-platform-copy :is(strong, b) {
  font-size: 0.96rem;
  font-weight: 650;
}

.insights-platform-copy :is(small, .muted) {
  color: var(--sidebar-text, #b7b3c4);
  font-size: 0.78rem;
  line-height: 1.4;
}

.insights-install-note,
.insights-install-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--radius-sm, 6px);
  color: var(--sidebar-text-active, #fff);
  font-size: 0.9rem;
  line-height: 1.55;
}

.insights-install-note {
  border-color: rgba(22, 141, 204, 0.52);
  border-left-color: var(--insights-install-blue);
  background: rgba(22, 141, 204, 0.13);
}

.insights-install-warning {
  border-color: rgba(196, 138, 28, 0.54);
  border-left-color: var(--warning, #c48a1c);
  background: rgba(196, 138, 28, 0.14);
  border-color: color-mix(in srgb, var(--warning, #c48a1c) 54%, transparent);
  background: color-mix(in srgb, var(--warning, #c48a1c) 14%, transparent);
}

.insights-install-note :is(p, ul),
.insights-install-warning :is(p, ul) {
  min-width: 0;
  margin: 0;
}

.insights-install-note a,
.insights-install-warning a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.insights-routing-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 14px;
  margin-top: 18px;
}

.insights-routing-fields label {
  color: var(--sidebar-text-active, #fff);
  font-size: 0.88rem;
  font-weight: 650;
}

.insights-routing-fields label[for="routing-endpoint"] { grid-column: 1; grid-row: 1; }
.insights-routing-fields #routing-endpoint { grid-column: 1; grid-row: 2; }
.insights-routing-fields #routing-endpoint + .small-meta { grid-column: 1; grid-row: 3; }
.insights-routing-fields label[for="routing-listen-address"] { grid-column: 2; grid-row: 1; }
.insights-routing-fields #routing-listen-address { grid-column: 2; grid-row: 2; }
.insights-routing-fields #routing-listen-address + .small-meta { grid-column: 2; grid-row: 3; }

.insights-routing-fields input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.insights-routing-fields input:focus-visible {
  outline: 2px solid var(--success, #1f9d6c);
  outline-offset: 2px;
}

.insights-routing-fields .small-meta {
  margin: 0 0 6px;
  color: var(--sidebar-text, #b7b3c4);
}

.agent-routing-choice {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-strong);
}

.agent-routing-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
}

.agent-routing-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--success, #1f9d6c);
}

.agent-routing-choice label[for="agent-routing-endpoint"] {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 650;
}

.agent-routing-choice #agent-routing-endpoint {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.agent-routing-choice .small-meta { margin: 0; color: var(--sidebar-text, #b7b3c4); }

.insights-routing-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 10px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-strong);
  color: var(--text);
  font-size: 0.88rem;
  text-align: center;
}

.insights-routing-flow span:nth-child(2n) {
  color: var(--success, #1f9d6c);
  font-size: 1.1rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .insights-install { padding: 18px 14px; }
  .insights-install-intro { margin-bottom: 16px; }
  .insights-platform-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .insights-platform-card { min-height: 64px; padding: 10px 12px; }
  .insights-install-note,
  .insights-install-warning { gap: 9px; padding: 10px 11px; font-size: 0.86rem; }
  .insights-routing-fields { grid-template-columns: minmax(0, 1fr); }
  .insights-routing-fields label,
  .insights-routing-fields input,
  .insights-routing-fields .small-meta { grid-column: auto !important; grid-row: auto !important; }
  .insights-routing-flow { gap: 6px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .insights-platform-card { transition: none; }
}

/* The Connect data picker follows the Onyx Next onboarding Figma file (rqHoVJd95BhEVAQ9dycAAO): a panel on s1 with a
   hairline, Choice at 56px / radius 8 / s2 with hairline-strong (selected: accent-soft fill, accent-line border, an
   18px ring-and-dot indicator), Geist 15/24 labels and 13/20 notes, the Low Pill for "Coming soon", and Button
   padding 11px 18px. The tokens are the Onyx Next names in assets/next/next.css, in dark and in light. */
.installer-picker {
  display: grid;
  gap: 20px;
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  background: var(--s1);
  min-width: 0;
  max-width: 100%;
}

.installer-picker > *,
.installer-catalog,
.installer-picker .onb-code,
.installer-picker .onb-code-pre,
.installer-picker .onb-code-pre code,
.installer-sha {
  min-width: 0;
  max-width: 100%;
}

.installer-picker:focus {
  outline: 2px solid var(--accent, #168dcc);
  outline-offset: 3px;
}

.installer-picker-intro {
  display: grid;
  gap: 6px;
}

.installer-picker-intro h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--ink);
}

.installer-picker-intro p {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-2);
}

.installer-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.installer-fieldset legend {
  padding: 0;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink-2);
}

.installer-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.installer-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-ctl);
  background: var(--s2);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.installer-choice:hover {
  border-color: var(--hairline-hi);
}

.installer-choice:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.installer-choice:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A choice that cannot be picked: s1 and the plain hairline, a quieter label, and the reason stays readable. */
.installer-choice:has(input:disabled),
.installer-choice:has(input:disabled):hover {
  border-color: var(--hairline);
  background: var(--s1);
  cursor: not-allowed;
}

/* The Figma indicator: an 18px ring; selected, the ring turns accent and gains a dot. */
.installer-choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 50%;
  background: transparent;
  cursor: inherit;
}

.installer-choice input:checked {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px);
}

.installer-choice input:disabled {
  border-color: var(--hairline);
}

.installer-choice input:focus-visible {
  outline: none;
}

@supports not selector(:has(*)) {
  .installer-choice:focus-within {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
}

.installer-choice-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.installer-choice-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink);
}

.installer-choice:has(input:disabled) .installer-choice-label {
  color: var(--ink-4);
}

.installer-choice-sub,
.installer-soon-note {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 20px;
}

/* Figma Pill, tone Low: the status is words first, the dot only repeats it. */
.installer-soon-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--low-soft);
  color: var(--low);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.installer-soon-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.installer-signing,
.installer-badge {
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  background: var(--warn-soft);
}

.installer-warning,
.installer-sha {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.installer-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.installer-soon {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

.installer-soon-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name status" "note status";
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  background: var(--s1);
}

.installer-soon-name {
  grid-area: name;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-3);
}

.installer-soon-note {
  grid-area: note;
}

.installer-soon-status {
  grid-area: status;
}

/* The guide card is the Figma panel: s2, radius 12, 18px 20px, an 18/26 title and 15/24 body in ink-2. */
.installer-guide {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-panel);
  background: var(--s2);
}

.installer-guide h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--ink);
}

.installer-guide h4,
.installer-guide p {
  margin: 0;
}

.installer-guide-summary {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 24px;
}

/* The card's labels are sentences ("Store the API token in Key Vault"), not one word, so they wrap
   beside the copy button instead of being cut off. */
.installer-guide .onb-code-bar {
  flex-wrap: wrap;
}

.installer-guide .onb-code-label {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.installer-guide .copy-btn {
  flex: 0 0 auto;
}

.installer-guide .onb-docs-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

/* The Figma Field (3:57): a 6px column of label, a 44px box and a hint. The box is s1 with a hairline-strong border and the control radius. */
.installer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  max-width: 480px;
}

.installer-field-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-2);
}

.installer-field-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--s1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-ctl);
  font: inherit;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink);
}

.installer-field-input::placeholder {
  color: var(--ink-3);
}

.installer-field-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.installer-field-input[aria-invalid="true"] {
  border-color: var(--crit);
}

.installer-field-input:disabled {
  color: var(--ink-4);
  cursor: not-allowed;
}

.installer-field-hint {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-3);
}

.installer-field-hint.is-error {
  color: var(--crit);
}

.installer-status {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-ctl);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 15px;
  line-height: 24px;
}

.installer-status.is-empty {
  border-style: dashed;
  background: var(--s2);
}

.installer-status.is-error {
  border-color: color-mix(in srgb, var(--crit) 45%, var(--hairline));
  background: var(--crit-soft);
}

.installer-status:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.installer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.installer-actions .primary-btn,
.installer-actions .secondary-btn,
.installer-picker .copy-btn {
  min-height: 44px;
}

/* Figma Button: 13/20 medium with 11px 18px padding. */
.installer-actions .primary-btn,
.installer-actions .secondary-btn {
  padding: 11px 18px;
  font-size: 13px;
  line-height: 20px;
}

.installer-catalog,
.installer-command,
.installer-next {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.installer-next h4 {
  margin: 0;
}

.installer-next ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.25rem;
}

@media (max-width: 640px) {
  .installer-picker { padding: 14px; }
  .installer-choices,
  .installer-soon { grid-template-columns: minmax(0, 1fr); }
  .installer-actions { flex-direction: column; }
  .installer-actions .primary-btn,
  .installer-actions .secondary-btn,
  .installer-picker .copy-btn,
  .installer-picker .onb-code-bar .copy-btn {
    width: 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .installer-picker,
  .installer-picker *,
  .installer-picker *::before,
  .installer-picker *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .installer-picker,
  .installer-choice,
  .installer-soon-item,
  .installer-soon-status,
  .installer-status { border: 1px solid CanvasText; }
  .installer-choice input { border-color: CanvasText; }
  .installer-field-input { border: 1px solid CanvasText; }
  .installer-field-input:focus-visible { outline-color: Highlight; }
  .installer-choice input:checked { border-color: Highlight; background: radial-gradient(circle, Highlight 0 4px, transparent 4.5px); }
  .installer-choice:has(input:checked) { border-color: Highlight; }
  .installer-choice:has(input:focus-visible),
  .installer-choice:focus-within,
  .installer-picker:focus,
  .installer-status:focus { outline-color: Highlight; }
}

@media (forced-colors: active) {
  .insights-platform-card,
  .insights-install-note,
  .insights-install-warning { border-color: CanvasText; }
  .insights-platform-card.selected { outline: 2px solid Highlight; }
  .insights-platform-card:focus-visible,
  .insights-platform-card:focus-within { outline-color: Highlight; }
/* OI-19 item 22: a 40px minimum hit area at phone widths for the controls the page-scoped rule for
   buttons, button-like links and selects does not reach: text inputs, sidebar nav items and group labels
   (<summary>), role="button" and checkbox rows. Minimum heights only, no widths, so the desktop layout
   and the 375px page width stay as they are. */
@media (max-width: 640px) {
  input:not([type]),
  input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="date"], [type="time"], [type="datetime-local"]),
  .nav-item,
  summary,
  [role="button"],
  label:has(input[type="checkbox"]) {
    min-height: 40px;
  }
  /* A bare <label> is inline and min-height ignores inline boxes. :where() keeps this at zero specificity,
     so a row that already sets its own display (flex, grid, inline-flex) keeps it. */
  :where(label:has(input[type="checkbox"])) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}
}

.rum-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 12px 0 16px;
}

.rum-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1 160px;
  font-size: 0.78rem;
  color: var(--muted);
}

.rum-filter input,
.rum-filter select {
  min-height: 36px;
  padding: 6px 8px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.rum-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rum-ua {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rum-list-error {
  color: var(--danger);
}

.rum-detail-title h2 {
  margin: 0;
}

.rum-error-banner {
  margin: 10px 0 0;
  padding: 8px 12px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius: 8px;
}

.rum-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 16px;
  margin: 14px 0 0;
}

.rum-facts dt {
  font-size: 0.75rem;
  color: var(--muted);
}

.rum-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.rum-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rum-event {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 88px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.rum-event.is-error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--danger);
}

.rum-kind {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.rum-event.is-error .rum-kind,
.rum-kind-error {
  color: var(--danger);
}

.rum-event-body strong {
  overflow-wrap: anywhere;
}

.rum-event-detail {
  margin: 4px 0 0;
  color: var(--danger);
}

@media (max-width: 720px) {
  .rum-event {
    grid-template-columns: 1fr;
  }
}

.ff-pickers,
.ff-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.ff-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  min-width: 12rem;
}

.ff-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.ff-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12));
}

.ff-main {
  flex: 1 1 18rem;
}

.ff-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ff-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ff-error {
  color: var(--danger);
}

.ff-audit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-audit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
}

/* OI-75: full-page hold for a new account that has not confirmed its email. Same card language as
   .email-verified-card; sits on the same layer as that overlay. */
.email-gate {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 10, 16, 0.86);
  overflow-y: auto;
}
.email-gate-card {
  width: min(460px, 100%);
  display: grid;
  gap: 12px;
  padding: 28px 24px;
  border-radius: var(--radius-sm, 12px);
  background: var(--panel, #fff);
  color: var(--text, #14121e);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.email-gate-card h2 { margin: 0; font-family: var(--font-display, inherit); font-size: 1.5rem; }
.email-gate-card p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.email-gate-hint { font-size: 13px; color: var(--muted, inherit); }
.email-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.email-gate-actions button { white-space: nowrap; }
.email-gate-actions .ghost-btn[disabled] { opacity: 0.6; cursor: default; }
.email-gate-status { min-height: 1.45em; font-size: 13px; }

/* /assets/next/next.css */
/* ==========================================================================
   Onyx Next: the app shell and component layer.
   Loaded after styles.css. It owns the tokens for both themes, the shell (sidebar, top bar, page header)
   and the shared components (panels, buttons, forms, tables, badges, KPI tiles, drawers). styles.css keeps
   the page-specific rules; anything here wins by order, not by !important.

   Direction: dark-first onyx surfaces with a true light theme, one accent (Pulse Blue, from the logo),
   Geist and Geist Mono, hairline depth instead of shadows, radii 8 / 12 / 16. Status is never colour alone:
   every status carries a word. "Too little traffic" and "No data" are never green.
   Structural reference: Linear (awesome-design-md). An approximation, not an official system.
   ========================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root {
  --canvas: #f5f6f9;
  --s1: #ffffff;
  --s2: #f0f2f6;
  --s3: #e7eaf0;
  --s4: #dde1e9;
  --hairline: #e2e6ed;
  --hairline-strong: #cdd3de;
  --hairline-hi: #b4bccb;
  --edge-hi: rgba(255, 255, 255, 0);

  --ink: #0b0f17;
  --ink-2: #3a4456;
  --ink-3: #596477;
  --ink-4: #8b95a6;

  --accent: #1766d4;
  --accent-hover: #145fc8;
  --accent-press: #104fa6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(23, 102, 212, 0.1);
  --accent-line: rgba(23, 102, 212, 0.4);
  --focus: #1766d4;

  --ok: #0a6e43;
  --ok-soft: rgba(11, 122, 74, 0.1);
  --warn: #885306;
  --warn-soft: rgba(148, 90, 6, 0.1);
  --crit: #b62435;
  --crit-soft: rgba(200, 40, 58, 0.09);
  --low: #596477;
  --low-soft: rgba(89, 100, 119, 0.1);

  --c1: #1766d4;
  --c2: #5aa6ff;
  --c3: #6c7a91;
  --c4: #a3adbf;
  --grid: rgba(11, 15, 23, 0.08);

  --shadow-pop: 0 18px 44px rgba(20, 32, 60, 0.18);
  --scrim: rgba(12, 18, 32, 0.38);

  --r-ctl: 8px;
  --r-panel: 12px;
  --r-frame: 16px;
  --sidebar-w: 248px;
  --topbar-h: 56px;

  /* The app's long-standing token names read from the ladder above, so every page follows the theme. */
  --bg: var(--canvas);
  --panel: var(--s1);
  --panel-bg: var(--s1);
  --panel-strong: var(--s2);
  --panel-border: var(--hairline);
  --text: var(--ink);
  --muted: var(--ink-3);
  --accent-strong: #114ea3;
  --accent-glow: rgba(23, 102, 212, 0.16);
  --accent-warm-soft: var(--accent-soft);
  --teal: var(--ok);
  --success: var(--ok);
  --warning: var(--warn);
  --danger: var(--crit);
  --focus-ring: var(--focus);
  --control-border: var(--hairline-strong);
  --shadow: none;
  --radius: var(--r-panel);
  --radius-sm: var(--r-ctl);
  --sidebar-bg: var(--s1);
  --sidebar-border: var(--hairline);
  --sidebar-text: var(--ink-2);
  --sidebar-text-active: var(--ink);
  --sidebar-hover: var(--s2);
  --sidebar-active-bg: var(--s3);
  color-scheme: light;
}

/* ---------- Tokens: dark ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #080a0f;
  --s1: #0d1118;
  --s2: #131822;
  --s3: #1a202c;
  --s4: #212837;
  --hairline: #1d2431;
  --hairline-strong: #2b3547;
  --hairline-hi: #3a4660;
  --edge-hi: rgba(255, 255, 255, 0.05);

  --ink: #eef1f6;
  --ink-2: #b9c2d2;
  --ink-3: #8c97ab;
  --ink-4: #5d697e;

  --accent: #3d9bff;
  --accent-hover: #67b1ff;
  --accent-press: #2b86ea;
  --accent-ink: #04101f;
  --accent-soft: rgba(61, 155, 255, 0.14);
  --accent-line: rgba(61, 155, 255, 0.42);
  --focus: #7cc0ff;

  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.13);
  --warn: #f5b53d;
  --warn-soft: rgba(245, 181, 61, 0.14);
  --crit: #ff6b78;
  --crit-soft: rgba(255, 107, 120, 0.14);
  --low: #8c97ab;
  --low-soft: rgba(140, 151, 171, 0.12);

  --c1: #3d9bff;
  --c2: #8fd0ff;
  --c3: #b9c2d2;
  --c4: #6f7c93;
  --grid: rgba(185, 194, 210, 0.09);

  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
  --scrim: rgba(3, 5, 9, 0.66);

  --accent-strong: #67b1ff;
  --accent-glow: rgba(61, 155, 255, 0.2);
  --purple: #b79cf0;
  --bg-soft: rgba(255, 255, 255, 0.06);
}

/* ---------- Base ---------- */
html { background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, .mono-cell, .pay-amount, .pay-txn-id, code, kbd, pre { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
* { scrollbar-width: thin; scrollbar-color: var(--hairline-hi) transparent; }
.ph, .ph-fill { font-size: 1.15em; vertical-align: -0.18em; flex: none; line-height: 1; }
kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; text-align: center; font-size: 11px;
  background: var(--s2); border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 6px; color: var(--ink-2);
}

/* ==========================================================================
   Shell: sidebar
   ========================================================================== */
.app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: var(--canvas); }
.sidebar {
  height: 100vh; height: 100dvh; padding: 12px 12px 14px; gap: 12px;
  background: var(--s1); border-right: 1px solid var(--hairline);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 40px; }
/* Emblem crop of the existing logo poster; stands in until design supplies a vector mark. */
.sidebar-brand::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: var(--r-ctl);
  background: #05070b url("/assets/logo-onyx-insights.jpg") no-repeat; background-size: 101px auto; background-position: -37px -13px;
  border: 1px solid var(--hairline-strong);
}
.sidebar-brand .brand-logo-img { display: none; }
.sidebar-brand .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.sidebar-brand .brand-name small { display: block; font-weight: 400; font-size: 11.5px; letter-spacing: 0; color: var(--ink-3); margin-top: 1px; }

.nav-search-wrap { position: relative; }
.nav-search-wrap::before {
  content: "\e30c"; font-family: "Phosphor"; font-size: 15px; color: var(--ink-3);
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none;
}
.nav-search-wrap::after {
  content: "\2318K"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 1px 6px; border: 1px solid var(--hairline-strong); border-radius: 6px; background: var(--s1);
}
.nav-search-wrap:focus-within::after { opacity: 0; }
html[data-kbd="ctrl"] .nav-search-wrap::after { content: "Ctrl K"; }
html[data-kbd="ctrl"] .sidebar .nav-search, html[data-kbd="ctrl"] .nav-search { padding-right: 62px; }
.sidebar .nav-search, .nav-search {
  min-height: 36px; padding: 7px 44px 7px 33px; font-size: 13.5px; color: var(--ink);
  background: var(--s2); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl);
}
.sidebar .nav-search::placeholder, .nav-search::placeholder { color: var(--ink-3); }
.sidebar .nav-search:hover { border-color: var(--hairline-hi); }
.sidebar .nav-search:focus { background: var(--s2); border-color: var(--accent-line); outline: 2px solid var(--focus); outline-offset: 0; }

.sidebar-nav { gap: 2px; padding-right: 2px; }
.nav-pinned { border-bottom: 1px solid var(--hairline); margin-bottom: 8px; padding-bottom: 8px; }
.nav-group-label, .nav-group-label.is-flat {
  padding: 8px 10px 4px; margin-top: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3);
}
.sidebar .nav-group-label, .sidebar .nav-group-label.is-flat:hover { color: var(--ink-3); background: none; }
.sidebar .nav-group-label:hover { color: var(--ink); background: none; }
.nav-group-label { justify-content: space-between; }
.nav-chev { order: 2; color: var(--ink-3); width: 12px; height: 12px; font-size: 0.65rem; }
.nav-group-items { padding-left: 0; gap: 1px; }
.nav-item, .sidebar .nav-item {
  position: relative; min-height: 34px; padding: 7px 10px; gap: 10px; font-size: 13.5px; font-weight: 450;
  border: 0; border-radius: var(--r-ctl); color: var(--ink-2); background: transparent;
  transition: background 0.12s, color 0.12s;
}
.nav-icon, .sidebar .nav-icon { width: 17px; color: var(--ink-3); }
.nav-icon svg { stroke-width: 1.6; }
.nav-item:hover, .sidebar .nav-item:hover { background: var(--s2); color: var(--ink); border-left-color: transparent; }
.nav-item.active, .sidebar .nav-item.active { background: var(--s3); color: var(--ink); font-weight: 500; border-left-color: transparent; }
.nav-item.active .nav-icon, .sidebar .nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item .nav-desc { color: var(--ink-3); font-size: 11.5px; }
.nav-item.nav-connect:not(.active) { color: var(--accent); }
.nav-item.nav-connect:not(.active) .nav-icon { color: var(--accent); }
.nav-enterprise-badge { background: var(--accent); color: var(--accent-ink); border-radius: 6px; }

.sidebar-account { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); }
.account-menu-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.account-menu-trigger:hover { background: var(--s2); }
.account-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600;
}
.account-menu-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.account-menu-text strong { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-text .small-meta { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-popover {
  background: var(--s2); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); color: var(--ink);
  box-sizing: border-box; width: min(300px, var(--sidebar-w)); max-width: var(--sidebar-w); min-width: 0; overflow-wrap: anywhere;
}
.account-menu-link { color: var(--ink-2); }
.account-menu-link:hover { background: var(--s3); color: var(--ink); }
.nav-flyout { background: var(--s2); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); color: var(--ink); }

/* ==========================================================================
   Shell: top bar and page header
   ========================================================================== */
.content { background: var(--canvas); min-width: 0; }
.shell-bar {
  position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h); display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap; padding: 8px 24px;
  min-width: 0; container-type: inline-size; container-name: shellbar;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--hairline); box-shadow: none;
}
.shell-context { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.shell-context-label { flex: none; color: var(--ink-3); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.shell-workspace-name { display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; font-weight: 550; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-env-badge { flex: none; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); }
.shell-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.shell-actions > * { white-space: nowrap; }
.shell-updated { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.shell-timerange {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--hairline-strong); background: var(--s1); color: var(--ink-2);
}
.shell-timerange:hover { border-color: var(--hairline-hi); color: var(--ink); }
.shell-theme-btn, .shell-refresh-btn { min-width: 36px; padding: 0 10px; }
.shell-theme-btn .ph::before { content: "\e472"; }                                  /* sun: shown in dark, offers light */
html[data-theme="light"] .shell-theme-btn .ph::before { content: "\e330"; }          /* moon: shown in light, offers dark */
.shell-back-btn { border-color: transparent; background: transparent; }

/* The content column: a full-width sticky top bar, then padded pages. */
.content { padding: 0; gap: 0; }
.content > .section, .content > #page-topbar { width: 100%; max-width: 1480px; margin-inline: auto; padding: 24px; align-content: start; gap: 20px; }
.content > #page-topbar { padding-bottom: 0; }
.content > :is(.trial-banner, .email-verify-banner, .shell-notice):not(.section) { margin: 12px 24px 0; }
.shell-timerange svg { left: 12px; color: var(--ink-3); }
.shell-timerange select { width: 11rem; max-width: 11rem; padding-left: 32px; min-height: 36px; border: 0; background: transparent; text-overflow: ellipsis; }

/* Compact top bar: at 125%/150% zoom the CSS viewport shrinks and the time picker
   used to wrap onto a second row. The title ellipsizes, secondary labels collapse,
   and the time picker switches to compact mode so the bar stays one row. */
@container shellbar (max-width: 1100px) {
  .shell-updated,
  .shell-context-label,
  .shell-refresh-btn > span,
  .shell-back-btn > span { display: none; }
  .shell-refresh-btn { padding-inline: 8px; }
  .shell-timerange { min-height: 32px; padding: 0 6px 0 8px; gap: 4px; }
  .shell-timerange svg { left: 6px; width: 14px; height: 14px; }
  .shell-timerange select { width: 8.5rem; max-width: 8.5rem; min-height: 32px; padding-left: 22px; }
}
@container shellbar (max-width: 760px) {
  #ai-analyst-open,
  .shell-env-badge,
  .shell-timerange svg { display: none; }
  .shell-timerange { padding-left: 6px; }
  .shell-timerange select { width: 7.25rem; max-width: 7.25rem; padding-left: 8px; }
}

.email-verify-banner, .trial-banner {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-panel); font-size: 13px; line-height: 1.45;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink);
}
.email-verify-banner strong { color: var(--ink); }

/* One header per page. pageHeader() / .section-hero is the page's title block. */
.section-hero.page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 4px 0 0; margin: 0 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.section-hero.page-header::before, .section-hero.page-header::after { display: none; }
.section-hero.page-header h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); }
.section-hero.page-header p { color: var(--ink-3); margin-top: 4px; max-width: 62ch; font-size: 14px; line-height: 1.5; }
.section-hero-badge { color: var(--ink-2); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; font-size: 12px; padding: 2px 10px; border-radius: 99px; background: var(--s2); color: var(--ink-2); border: 1px solid var(--hairline-strong); }
.page-header-aside, .page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .breadcrumb, #page-topbar .breadcrumb { font-size: 28px; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); }
.page-description { color: var(--ink-3); }

/* styles.css still paints a few sidebar details in the old brand amber; the layer takes them back. */
.sidebar .nav-item.active, .sidebar .nav-item.active:hover { border-left-color: transparent; }
.nav-item:focus-visible, .nav-group-label:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sidebar :focus-visible, .mobile-app-header :focus-visible { outline-color: var(--focus) !important; } /* !important: styles.css forces its amber the same way */
.bar.alt { background: linear-gradient(180deg, var(--c2), var(--c1)); }

/* ==========================================================================
   Components
   ========================================================================== */

/* panels: depth by ladder and hairline, no shadow */
.sidebar-card, .panel, .metric-card, .table-card, .tile-card, .widget, .story-card, .integration-card, .chart-card {
  background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel);
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.panel-header { border-bottom-color: var(--hairline); }
.panel-header h3, .panel h3, .panel h2 { font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.panel strong { font-weight: 550; }
.small-meta { color: var(--ink-3); }
.insight-item, .dashboard-item { border-color: var(--hairline); }
.dashboard-item:hover, .insight-item:hover { background: var(--s2); }

/* buttons */
.primary-btn, .secondary-btn, .ghost-btn, .link-btn.is-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 500; font-size: 13.5px; line-height: 1.2; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s; box-shadow: none; text-decoration: none;
}
.primary-btn:active, .secondary-btn:active, .ghost-btn:active { transform: translateY(1px) scale(0.99); }
.primary-btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.primary-btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.primary-btn:active { background: var(--accent-press); }
.secondary-btn, .ghost-btn { background: var(--s2); color: var(--ink); border-color: var(--hairline-strong); }
.secondary-btn:hover, .ghost-btn:hover { background: var(--s3); border-color: var(--hairline-hi); color: var(--ink); }
.primary-btn[disabled], .secondary-btn[disabled], .ghost-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.link-btn { color: var(--accent); }
.link-btn:hover { color: var(--accent-hover); }

/* forms */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"],
input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input:not([type]), select, textarea {
  min-height: 36px; padding: 7px 12px; background: var(--s1); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 13.5px;
}
textarea { min-height: 80px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--hairline-hi); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
select option { background: var(--s2); color: var(--ink); }
.ui-field-label, .field-label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.ui-field-hint { color: var(--ink-3); }

/* status badges: soft tint, a word always present */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap; background: var(--s3); color: var(--ink-2);
}
.badge.good { color: var(--ok); background: var(--ok-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad { color: var(--crit); background: var(--crit-soft); }
.badge.info { color: var(--accent); background: var(--accent-soft); }
.badge.neutral { color: var(--ink-2); background: var(--low-soft); border: 1px dashed var(--hairline-hi); }
.badge.good::before, .badge.warn::before, .badge.bad::before, .badge.info::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

/* tables */
:where(.content) table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
:where(.content) table th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 9px 16px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap; background: var(--s1);
}
:where(.content) table td { padding: 10px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink); }
:where(.content) table tbody tr:last-child td { border-bottom: 0; }
:where(.content) table tbody tr:hover td { background: var(--s2); }

/* KPI tiles */
.kpi-tile { background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); box-shadow: inset 0 1px 0 var(--edge-hi); padding: 16px; }
.kpi-tile-label { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.kpi-tile-value {
  font-family: var(--font-body); font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi-tile .kpi-tile-delta:not(.good):not(.warn):not(.bad), .metric-delta:not(.good):not(.warn):not(.bad) { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3); }
.kpi-tile-bar { background: var(--s3); }
.kpi-tile-delta.good, .kpi-tile-delta.up-good { color: var(--ok); }
.kpi-tile-delta.bad, .kpi-tile-delta.up-bad { color: var(--crit); }

/* overlays */
#ai-analyst-dialog, .feature-settings-drawer, .resource-drawer, .logs-rules-drawer {
  background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop);
}
#ai-analyst-dialog header p { color: var(--ink-3); }
.resource-drawer-backdrop, .mobile-nav-overlay { background: var(--scrim); }

/* ==========================================================================
   Shared page primitives (OnyxNext in ui.js draws these): status, chips, provenance, trends, charts,
   segmented controls, tabs, callouts, empty states, lists, popovers.
   ========================================================================== */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 12px; font-weight: 500; line-height: 1.5;
  white-space: nowrap; border: 1px solid transparent;
}
.status .ph, .status .ph-fill { font-size: 14px; vertical-align: 0; }
.status.is-ok { color: var(--ok); background: var(--ok-soft); }
.status.is-warn { color: var(--warn); background: var(--warn-soft); }
.status.is-crit { color: var(--crit); background: var(--crit-soft); }
.status.is-low { color: var(--ink-2); background: var(--low-soft); border: 1px dashed var(--hairline-hi); }   /* dashed: unknown, not healthy */
.status.is-none { color: var(--ink-3); background: transparent; border: 1px dashed var(--hairline-strong); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--s2); border: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 12px; line-height: 1.5;
}
.chip.mono, .chip .mono { font-family: var(--font-mono); font-size: 11.5px; }
.chip--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
/* provenance chip: says how a number was counted (one counting rule, same on every page) */
.prov {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: 6px; border: 1px dashed var(--hairline-hi);
  color: var(--ink-3); font-size: 11.5px; cursor: help; background: transparent;
}
.prov:hover { color: var(--ink); border-color: var(--accent-line); }
.pop { position: relative; display: inline-flex; }
.pop-card {
  position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: 300px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--s4); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.pop:hover .pop-card, .pop:focus-within .pop-card { opacity: 1; visibility: visible; transform: none; }
.pop.is-dismissed .pop-card { opacity: 0; visibility: hidden; }

.delta { font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.delta.up-bad, .delta.down-bad { color: var(--crit); }
.delta.up-good, .delta.down-good { color: var(--ok); }
.delta.flat { color: var(--ink-3); }
.spark { width: 100%; height: 30px; overflow: visible; display: block; }
.spark polyline { fill: none; stroke: var(--c1); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--accent-soft); stroke: none; }
.spark.is-crit polyline { stroke: var(--crit); } .spark.is-crit .area { fill: var(--crit-soft); }
.spark.is-warn polyline { stroke: var(--warn); } .spark.is-warn .area { fill: var(--warn-soft); }
.spark.is-low polyline { stroke: var(--low); stroke-dasharray: 3 3; } .spark.is-low .area { fill: transparent; }

.nx-chart { position: relative; width: 100%; }
.nx-chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.nx-chart .gridline { stroke: var(--grid); stroke-width: 1; }
.nx-chart .axis { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; }
.nx-chart .line-1 { fill: none; stroke: var(--c1); stroke-width: 1.8; stroke-linejoin: round; }
.nx-chart .line-2 { fill: none; stroke: var(--crit); stroke-width: 1.8; stroke-linejoin: round; }
.nx-chart .cursor { stroke: var(--hairline-hi); stroke-dasharray: 3 3; }
.chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -110%); padding: 8px 10px; border-radius: var(--r-ctl); background: var(--s4);
  border: 1px solid var(--hairline-hi); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-pop); opacity: 0; transition: opacity 0.1s; z-index: 3;
}
.chart-tip.is-on { opacity: 1; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 2px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c1); }
.legend i.crit { background: var(--crit); }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--s2); border: 1px solid var(--hairline); border-radius: 10px; }
.seg button { min-height: 28px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; font-weight: 500; font-size: 13px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--s4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.tabs button { position: relative; padding: 10px 2px 11px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-weight: 500; font-size: 13.5px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tabs .badge { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; background: var(--s3); color: var(--ink-2); border: 0; }

.callout { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-panel); border: 1px solid var(--hairline-strong); background: var(--s2); align-items: flex-start; color: var(--ink); }
.callout .ph, .callout .ph-fill { font-size: 18px; margin-top: 1px; }
.callout.is-info { border-color: var(--accent-line); background: var(--accent-soft); } .callout.is-info > .ph, .callout.is-info > .ph-fill { color: var(--accent); }
.callout.is-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); } .callout.is-warn > .ph, .callout.is-warn > .ph-fill { color: var(--warn); }
.callout.is-crit { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: var(--crit-soft); } .callout.is-crit > .ph, .callout.is-crit > .ph-fill { color: var(--crit); }
.callout.is-low { border-style: dashed; border-color: var(--hairline-hi); }

.nx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px 24px; }
.nx-empty > .ph, .nx-empty > .ph-fill { font-size: 28px; color: var(--ink-3); }
.nx-empty p { color: var(--ink-3); max-width: 52ch; }
.skeleton { background: linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%); background-size: 200% 100%; border-radius: 6px; animation: nx-shimmer 0.8s linear infinite; min-height: 12px; }
@keyframes nx-shimmer { to { background-position: -200% 0; } }
.nx-list { display: flex; flex-direction: column; }
.nx-list > * { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.nx-list > *:last-child { border-bottom: 0; }
.nx-code { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; overflow: auto; }
.nx-code pre { margin: 0; padding: 12px 14px; font-family: inherit; }
.tok-k { color: var(--accent); } .tok-s { color: var(--ok); } .tok-n { color: var(--warn); } .tok-c { color: var(--ink-3); }

/* ==========================================================================
   Responsive: the existing mobile drawer stays; it just takes the new surfaces
   ========================================================================== */
@media (max-width: 1100px) {
  /* styles.css turns the sidebar into an off-canvas drawer here; the layer must not put the column back */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .content { padding: 0; }
  .shell-bar { padding: 8px 16px; }
  .nav-item.active::before { left: -12px; }
  .mobile-app-header { background: var(--s1); border-bottom: 1px solid var(--hairline); color: var(--ink); }
  .mobile-app-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .mobile-nav-toggle, .mobile-nav-close { color: var(--ink); }
}
@media (max-width: 640px) {
  .shell-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .shell-actions { margin-left: 0; width: 100%; flex: 1 1 auto; justify-content: flex-start; flex-wrap: wrap; }
  .shell-actions .shell-timerange { flex: 1 1 150px; min-height: 44px; padding: 0 10px 0 12px; gap: 8px; }
  .shell-timerange svg { display: block; width: 15px; height: 15px; left: 12px; }
  .shell-timerange select { width: auto; max-width: 100%; min-height: 44px; padding-left: 32px; }
  #ai-analyst-open { display: inline-flex; }
  .shell-env-badge:not(.is-hidden) { display: inline-flex; }
  .shell-refresh-btn > span { display: inline; }
  .shell-back-btn span { display: none; }
  .shell-back-btn { min-width: 44px; padding: 0 12px; }
  .shell-context-label { display: none; }
  .content > .section, .content > #page-topbar { padding: 16px 12px; gap: 16px; }
  .content > :is(.trial-banner, .email-verify-banner, .shell-notice):not(.section) { margin: 8px 12px 0; flex-wrap: wrap; }
  .section-hero.page-header h2, .topbar .breadcrumb, #page-topbar .breadcrumb { font-size: 24px; }
  .shell-updated { display: none; }
  /* touch targets: 44px minimum */
  .primary-btn, .secondary-btn, .ghost-btn, .nav-item, .sidebar .nav-item, .sidebar .nav-search, .nav-group-label, .account-menu-trigger, .shell-timerange, .shell-timerange select,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"],
  input[type="date"], input[type="datetime-local"], input:not([type]), select, .seg button, .tabs button, summary { min-height: 44px; }
  .shell-theme-btn, .shell-refresh-btn { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Dark theme: hard-coded light colours in styles.css that the tokens cannot reach
   (found by scanning every rule for light fills, dark text and light borders).
   ========================================================================== */
html[data-theme="dark"] .primary-btn, html[data-theme="dark"] .account-avatar, html[data-theme="dark"] .nav-enterprise-badge,
html[data-theme="dark"] .guardian-chip.is-selected, html[data-theme="dark"] .guardian-chip:has(input:checked) { color: var(--accent-ink); }
html[data-theme="dark"] .provider-badge.aws { color: var(--ink); }
html[data-theme="dark"] .provider-badge.gcp, html[data-theme="dark"] input.toggle-input::before,
html[data-theme="dark"] .security-qr svg { background-color: var(--s2); }
html[data-theme="dark"] .trial-banner-warning { color: var(--ink); }
html[data-theme="dark"] .ui-field-required { color: #ff9aa4; }
html[data-theme="dark"] .badge.info, html[data-theme="dark"] .trace-inline-link, html[data-theme="dark"] .trace-kind-chip.kind-server { color: #8fc3ff; }
html[data-theme="dark"] .trace-kind-chip { color: var(--ink-2); background-color: var(--s3); }
html[data-theme="dark"] .trace-kind-chip.kind-client { color: #7fe3d6; }
html[data-theme="dark"] .trace-kind-chip.kind-producer, html[data-theme="dark"] .trace-kind-chip.kind-consumer { color: #c3adf5; }
html[data-theme="dark"] .trace-span-error-msg, html[data-theme="dark"] .trace-status-message { color: #ff9aa4; }
html[data-theme="dark"] .trace-stack, html[data-theme="dark"] .topo-control:disabled, html[data-theme="dark"] .auth-password-meter { background-color: var(--s3); }
html[data-theme="dark"] .logs-footer .logs-tail-note { color: var(--warn); }
html[data-theme="dark"] .topo-summary-pill.good, html[data-theme="dark"] .a15-status.a15-tone-good, html[data-theme="dark"] .svc-cat-score.good, html[data-theme="dark"] .svc-cat-ready { color: var(--ok); }
html[data-theme="dark"] .topo-summary-pill.bad, html[data-theme="dark"] .a15-status.a15-tone-bad { color: var(--crit); }
html[data-theme="dark"] .a15-status.a15-tone-warn, html[data-theme="dark"] .svc-cat-score.warn { color: var(--warn); }
html[data-theme="dark"] .topo-control:hover { border-color: var(--hairline-hi); }
html[data-theme="dark"] .topo-map-scroll { background: radial-gradient(circle, rgba(185, 194, 210, 0.1) 1px, transparent 1px) 0 0 / 22px 22px, var(--s1); }
html[data-theme="dark"] .topo-node-status text { fill: var(--s1); }
html[data-theme="dark"] .sa-sample-banner { background-color: var(--warn-soft); color: var(--warn); }
html[data-theme="dark"] .badge.sa-sample-badge { color: var(--warn); }
html[data-theme="dark"] .a14-fields input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .a14-fields select,
html[data-theme="dark"] .studio-builder input, html[data-theme="dark"] .studio-builder select, html[data-theme="dark"] .email-verified-card { background-color: var(--s1); color: var(--ink); }
html[data-theme="dark"] #ai-analyst-dialog, html[data-theme="dark"] #ai-analyst-dialog header p, html[data-theme="dark"] #ai-analyst-dialog button:not(.ai-demo-question) { color: var(--ink); }
html[data-theme="dark"] #ai-analyst-dialog, html[data-theme="dark"] #ai-analyst-form textarea, html[data-theme="dark"] #ai-analyst-dialog button { border-color: var(--hairline-strong); }
html[data-theme="dark"] #ai-analyst-form textarea { background-color: var(--s2); color: var(--ink); }
html[data-theme="dark"] .ai-message { background-color: var(--s2); color: var(--ink); }
html[data-theme="dark"] .ai-message.user { background-color: var(--accent-soft); }

/* The guided Explore demo uses deliberately light fixed colours in styles.css. Keep its cards,
   prompts and action buttons legible when the signed-in app is using the dark theme. */
html[data-theme="dark"] .demo-walkthrough { border-color: var(--hairline-strong); background: linear-gradient(145deg, var(--s1) 0%, var(--s2) 58%, var(--s1) 100%); }
html[data-theme="dark"] .demo-walkthrough-hero h2, html[data-theme="dark"] .demo-industry-heading h3, html[data-theme="dark"] .qs-demo-questions h3 { color: var(--ink); }
html[data-theme="dark"] .demo-walkthrough-hero p, html[data-theme="dark"] .demo-tour-step p, html[data-theme="dark"] .demo-industry-heading p, html[data-theme="dark"] .demo-industry-card > p, html[data-theme="dark"] .qs-demo-questions p { color: var(--ink-2); }
html[data-theme="dark"] .demo-eyebrow { color: var(--accent) !important; }
html[data-theme="dark"] .demo-data-note { border-left-color: var(--accent); background-color: var(--accent-soft); color: var(--ink-2); }
html[data-theme="dark"] .demo-tour-progress-card, html[data-theme="dark"] .demo-tour-step, html[data-theme="dark"] .demo-industry-card, html[data-theme="dark"] .demo-oracle-question-library { border-color: var(--hairline-strong); background-color: var(--s1); }
html[data-theme="dark"] .demo-tour-progress-card strong, html[data-theme="dark"] .demo-tour-step h3, html[data-theme="dark"] .demo-industry-card-head, html[data-theme="dark"] .demo-oracle-question-library summary { color: var(--ink); }
html[data-theme="dark"] .demo-tour-step.is-complete { border-color: var(--ok); background-color: var(--ok-soft); }
html[data-theme="dark"] .demo-tour-number, html[data-theme="dark"] .demo-industry-count { background-color: var(--s3); color: var(--accent); }
html[data-theme="dark"] .demo-tour-check { color: var(--ok); }
html[data-theme="dark"] .demo-industry-icon { background-color: var(--s3); color: var(--accent); }
html[data-theme="dark"] .demo-feature-tags span { border-color: var(--hairline-strong); background-color: var(--s2); color: var(--ink-2); }
html[data-theme="dark"] .qs-demo-questions { border-color: var(--hairline-strong); background: linear-gradient(120deg, var(--s1), var(--s2)); }
html[data-theme="dark"] .qs-demo-question { border-color: var(--hairline-strong); background-color: var(--s1); color: var(--ink); }
html[data-theme="dark"] .qs-demo-question span:last-child { color: var(--accent); }
html[data-theme="dark"] .qs-demo-question:hover, html[data-theme="dark"] .qs-demo-question:focus-visible { border-color: var(--hairline-hi); background-color: var(--s3); }
html[data-theme="dark"] .ai-demo-question-group h3 { color: var(--ink-2); }
html[data-theme="dark"] #ai-analyst-dialog .ai-demo-question { border-color: var(--hairline-strong) !important; background-color: var(--s2) !important; color: var(--ink) !important; }
html[data-theme="dark"] #ai-analyst-dialog .ai-demo-question:hover, html[data-theme="dark"] #ai-analyst-dialog .ai-demo-question:focus-visible { border-color: var(--hairline-hi) !important; background-color: var(--s3) !important; }

/* Translucent black fills and borders (hover states, tracks, input wells) are invisible on a dark surface;
   these are the same rules with light-on-dark equivalents. Found by scanning every rule in styles.css. */
html[data-theme="dark"] .auth-overlay-back:hover { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .auth-form input { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .explain-btn { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .feature-settings-field input[type="text"], html[data-theme="dark"] .feature-settings-field input[type="number"], html[data-theme="dark"] .feature-settings-field select, html[data-theme="dark"] .feature-settings-field textarea { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] #overview .integration-pill { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-waterfall-track { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .kpi-nav-card { border: 1px solid rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .service-item { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .service-item { border: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .builder-row-stack input, html[data-theme="dark"] .builder-row-stack textarea { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .filter-row select, html[data-theme="dark"] .filter-row input, html[data-theme="dark"] .builder-row select, html[data-theme="dark"] .builder-row input, html[data-theme="dark"] .builder-row textarea { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .log-item, html[data-theme="dark"] .insight-item, html[data-theme="dark"] .rum-card, html[data-theme="dark"] .cloud-card, html[data-theme="dark"] .dashboard-item { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .log-item, html[data-theme="dark"] .insight-item, html[data-theme="dark"] .rum-card, html[data-theme="dark"] .cloud-card, html[data-theme="dark"] .dashboard-item { border: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .dashboard-item:hover, html[data-theme="dark"] .insight-item:hover { background-color: var(--s2); }
html[data-theme="dark"] .explain-btn:hover { background-color: var(--accent-soft); }
html[data-theme="dark"] .api-key { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .api-key { border: 1px solid rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] .code-block { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .code-block { border: 1px solid rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .host-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .resource-bar-track { background-color: rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] .vital-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .pipeline-stage { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .dora-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .threat-signal { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .model-card { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .topology-node { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .business-kpi-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .funnel-step-bar-track { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .monitor-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .pattern-cluster { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .pay-bar-track { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .resource-drawer-close:hover { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .resource-json-view mark { background-color: rgba(245, 181, 61, 0.32); }
html[data-theme="dark"] .kpi-tile-bar { background-color: rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] .badge.neutral { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .auth-panel .auth-overlay-back:hover, html[data-theme="dark"] .auth-panel .auth-overlay-back:focus-visible { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .auth-password-toggle:hover { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .onb-code-bar { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .trace-dist-bar:hover { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .trace-chip { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .trace-detail-note { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .trace-span-toggle:hover { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-collapsed-count { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-kind-chip { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .trace-detail .trace-waterfall-track { background-color: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .trace-critical-btn[aria-pressed="true"] { background-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .trace-panel-count { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-attr-table th, html[data-theme="dark"] .trace-attr-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .trace-span-logs li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .logs-chip-remove:hover, html[data-theme="dark"] .logs-chip-remove:focus-visible { background-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .metrics-key { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .sa-apdex-track { background-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .sa-volume-track { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .a14-hbar-track { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .a15-form input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .a15-form select, html[data-theme="dark"] .a15-form textarea, html[data-theme="dark"] .a15-mono-input { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .a15-key-code { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .studio-error { background-color: var(--crit-soft); }
html[data-theme="dark"] .studio-sql pre { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] #ai-analyst-dialog::backdrop { background-color: rgba(3, 5, 9, 0.66); }
html[data-theme="dark"] .shell-timerange select { background-color: transparent; }
html[data-theme="dark"] .bar.alt { background: linear-gradient(180deg, var(--c2), var(--c1)); }

/* /assets/next/guided-onboarding.css */
/* Guided onboarding (GUIDED_ONBOARDING_V2). Direction A: calm console.
   Accent is the approved Pulse Blue. Surfaces, type and focus follow the app tokens. */

.gob {
  --gob-accent: #1766d4;
  color: var(--ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 28px;
}

.gob-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gob-back,
.gob-primary,
.gob-secondary,
.gob-choice,
.gob-dot {
  font-family: inherit;
}

.gob-back {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  padding: 6px 2px;
  cursor: pointer;
}

.gob-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gob-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.gob-dot.is-done {
  background: var(--gob-accent);
  border-color: var(--gob-accent);
}

.gob-dot.is-current {
  width: 22px;
  background: var(--gob-accent);
  border-color: var(--gob-accent);
}

.gob-dot:disabled {
  cursor: default;
  opacity: 0.55;
}

.gob-mobile-progress {
  display: none;
}

.gob-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--s3);
  overflow: hidden;
}

.gob-bar > span {
  display: block;
  height: 100%;
  background: var(--gob-accent);
}

.gob-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.gob-oracle,
.gob-mission,
.gob-main {
  min-width: 0;
}

.gob-oracle-id {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.gob-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--gob-accent);
  flex: none;
}

.gob-oracle-name,
.gob-pct,
.gob-kicker,
.gob h2 {
  font-family: var(--font-display);
}

.gob-oracle-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.gob-oracle-sub,
.gob-time,
.gob-hint,
.gob-note,
.gob-reason,
.gob-credits {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
}

.gob-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.gob-bubble {
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--s2);
  border: 1px solid var(--hairline);
}

.gob-bubble p,
.gob-oracle-line {
  margin: 0;
}

.gob-oracle-line {
  font-size: 14px;
  line-height: 1.5;
}

.gob-main h2 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -0.02em;
  outline: none;
}

.gob-kicker {
  margin: 0 0 8px;
  font-size: 20px;
}

.gob-credits {
  margin-bottom: 18px;
}

.gob-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.gob-choice {
  text-align: left;
  background: var(--s1);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
}

.gob-choice.is-selected {
  border-color: var(--gob-accent);
  background: var(--accent-soft);
}

.gob-choice.is-disabled,
.gob-choice:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.gob-choice-label {
  font-weight: 600;
}

.gob-choice-note {
  color: var(--ink-3);
  font-size: 12px;
}

.gob-fieldset {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}

.gob-fieldset legend {
  font-weight: 600;
  margin-bottom: 8px;
}

.gob-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.gob-primary,
.gob-secondary {
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
}

.gob-primary {
  background: #1766d4;
  color: #fff;
  border: 1px solid #1766d4;
}

.gob-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.gob-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}

.gob-reason,
.gob-note,
.gob-hint {
  margin-top: 10px;
}

.gob-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.gob-pills li {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.gob-not-sure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.gob-not-sure .gob-note {
  margin: 0;
  flex: 1;
  min-width: 180px;
}

.gob-secondary.is-selected {
  border-color: #1766d4;
  color: #1766d4;
}

.gob-choice-note {
  margin-left: 8px;
  color: var(--ink-3);
  font-size: 12px;
}

.gob-summary,
.gob-why-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.gob-price {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 22px;
}

.gob-cloud {
  margin-top: 20px;
}

.gob-cloud h3,
.gob-cloud-provider h3 {
  margin: 16px 0 8px;
  font-size: 16px;
}

.gob-subhead {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.gob-applied {
  margin: 0;
  padding-left: 18px;
}

.gob-preset {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gob-finish-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--s1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.gob-finish-banner p {
  margin: 0;
}

.gob-why-desktop h3 {
  margin: 22px 0 4px;
  font-size: 13px;
  font-weight: 600;
}

.gob-why-text {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.gob-why-mobile {
  display: none;
}

.gob-mission {
  width: 300px;
  background: var(--s1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
}

.gob-pct {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.gob-pct-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
}

.gob-pct-label,
.gob-mission-mark {
  color: var(--ink-3);
  font-size: 12px;
}

.gob-time {
  margin: 4px 0 12px;
}

.gob-mission-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gob-mission-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
}

.gob-mission-list li.is-current {
  color: var(--ink);
  font-weight: 600;
}

.gob-mission-mark {
  width: 42px;
  flex: none;
  font-family: var(--font-mono);
}

.gob :focus-visible {
  outline: 2px solid var(--focus, #1766d4);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .gob-layout {
    grid-template-columns: 1fr;
  }

  .gob-mission,
  .gob-transcript,
  .gob-why-desktop,
  .gob-dots {
    display: none;
  }

  .gob-mobile-progress,
  .gob-why-mobile {
    display: block;
  }

  .gob-main h2 {
    font-size: 24px;
  }

  .gob-finish-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gob-oracle-line,
  .gob .onb-spin {
    transition: none;
    animation: none;
  }
}

/* The shell topbar is a separate card. On Connect data the heading lives inside the wizard. */
.content:has(> #onboarding-wizard.section.active) > #page-topbar {
  display: none;
}

.gob.gob-card {
  background: var(--s1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: 20px 24px 24px;
  box-shadow: none;
}

.gob-page-head {
  min-width: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--hairline);
}

.gob-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.gob-page-sub {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}

.gob-page-sub,
.gob-kicker,
.gob-oracle-line,
.gob-main {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  min-width: 0;
  height: auto;
  max-width: none;
}

/* /assets/next/pages/overview.css */
/* Onyx Next: overview pages. Page-specific layout only; shared parts live in ../next.css and ../ui.js.
   Covers #overview (the landing page), #dashboards (list, cards, builder) and #dashboard-detail.
   Tokens only: no hard-coded colours, no !important, no shadows. */

/* The sections are grids; without a minmax(0, 1fr) track one wide child (a table, a chart) widens the whole page. */
:is(#overview, #dashboards, #dashboard-detail) { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Shared by the three sections: panels with a hairline header, and the touch-target floor on phones
   ========================================================================== */
:is(#overview, #dashboards, #dashboard-detail) .panel { padding: 0; gap: 0; min-width: 0; align-content: start; }
:is(#overview, #dashboards, #dashboard-detail) .panel-header {
  justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--hairline);
}
:is(#overview, #dashboards, #dashboard-detail) .panel-header > :first-child { margin-right: auto; min-width: 0; }
:is(#overview, #dashboards, #dashboard-detail) .panel-header h3 { margin: 0; }
:is(#overview, #dashboards, #dashboard-detail) .panel-header p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
:is(#overview, #dashboards, #dashboard-detail) .panel-body { padding: 16px; }
:is(#overview, #dashboards, #dashboard-detail) .link-btn { white-space: nowrap; font-weight: 500; font-size: 13px; text-align: left; }
:is(#overview, #dashboards, #dashboard-detail) .nx-empty { padding: 28px 20px; }
:is(#overview, #dashboards, #dashboard-detail) .nx-empty h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
:is(#overview, #dashboards, #dashboard-detail) .nx-empty p { margin: 0; }
:is(#overview, #dashboards, #dashboard-detail) .nx-empty :is(.primary-btn, .secondary-btn, .ghost-btn) { margin-top: 6px; }

/* Explanatory popovers: open on hover and focus on desktop, inline on phones so they can never run off the viewport. */
@media (max-width: 640px) {
  :is(#overview, #dashboards, #dashboard-detail) .pop { display: block; }
  :is(#overview, #dashboards, #dashboard-detail) .pop-card {
    position: static; width: auto; margin-top: 8px; display: none; opacity: 1; visibility: visible; transform: none;
  }
  :is(#overview, #dashboards, #dashboard-detail) .pop:focus-within .pop-card { display: block; }
  :is(#overview, #dashboards, #dashboard-detail) :is(.primary-btn, .secondary-btn, .ghost-btn, .link-btn, .prov, .seg button, button.chip, .detail-breadcrumb-link) {
    min-height: 44px;
  }
  :is(#overview, #dashboards, #dashboard-detail) :is(.link-btn, .detail-breadcrumb-link) { display: inline-flex; align-items: center; }
  :is(#overview, #dashboards, #dashboard-detail) :is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) { min-height: 44px; }
  :is(#overview, #dashboards, #dashboard-detail) .prov { padding-left: 10px; padding-right: 10px; }
}

/* ==========================================================================
   Overview
   ========================================================================== */

/* Trial limit notice (shared with Billing; restyled here as an inline callout). */
#overview .paywall-inline-alert {
  margin: 0; padding: 12px 14px; border-radius: var(--r-panel); font-size: 13.5px; font-weight: 450; line-height: 1.5; color: var(--ink);
  background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent);
}
#overview .paywall-inline-alert::before { content: "\e4e2"; font-family: "Phosphor-Fill"; font-size: 18px; color: var(--crit); flex: none; line-height: 1; }
#overview .paywall-inline-alert strong { font-weight: 600; }

/* Answer first: the verdict and the counts behind it. */
#overview .ov-verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 20px; align-items: center; }
#overview .ov-verdict-main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
#overview .ov-verdict-icon { width: 44px; height: 44px; border-radius: var(--r-panel); display: grid; place-items: center; font-size: 24px; flex: none; }
#overview .ov-verdict-icon.is-ok { background: var(--ok-soft); color: var(--ok); }
#overview .ov-verdict-icon.is-warn { background: var(--warn-soft); color: var(--warn); }
#overview .ov-verdict-icon.is-crit { background: var(--crit-soft); color: var(--crit); }
#overview .ov-verdict-icon.is-low { background: var(--low-soft); color: var(--ink-2); border: 1px dashed var(--hairline-hi); }
#overview .ov-verdict-icon.is-none { background: transparent; color: var(--ink-3); border: 1px dashed var(--hairline-strong); }
#overview .ov-verdict h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; margin: 0; }
#overview .ov-verdict p { margin: 6px 0 0; max-width: 64ch; color: var(--ink-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#overview .ov-asof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
#overview .ov-asof .live-indicator { color: var(--ink-3); font-size: 12.5px; }
#overview .ov-vstats { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; gap: 8px 28px; }
#overview .ov-vstat {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 6px 8px; border: 0; border-radius: var(--r-ctl);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
#overview .ov-vstat:hover { background: var(--s2); }
#overview .ov-vstat b { font-size: 26px; font-weight: 550; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#overview .ov-vstat span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
#overview .ov-vstat.is-ok:not(.is-zero) b, #overview .ov-vstat.is-ok:not(.is-zero) .ph-fill { color: var(--ok); }
#overview .ov-vstat.is-warn:not(.is-zero) b, #overview .ov-vstat.is-warn:not(.is-zero) .ph-fill { color: var(--warn); }
#overview .ov-vstat.is-crit:not(.is-zero) b, #overview .ov-vstat.is-crit:not(.is-zero) .ph-fill { color: var(--crit); }
#overview .ov-vstat.is-zero b { color: var(--ink-3); }

/* Key figures */
#overview .ov-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
#overview .ov-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; }
#overview .ov-kpi:hover { border-color: var(--hairline-hi); }
#overview .ov-kpi:has(.ov-kpi-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
#overview .ov-kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
#overview .ov-kpi-link {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink-3);
  font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer;
}
#overview button.ov-kpi-link:hover { color: var(--ink); }
#overview button.ov-kpi-link:focus-visible { outline: none; }
#overview button.ov-kpi-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-panel); }   /* the whole tile is the link */
#overview .ov-kpi-value { margin-top: 2px; overflow-wrap: anywhere; }
#overview .ov-kpi-value small { margin-left: 3px; font-size: 14px; color: var(--ink-3); letter-spacing: 0; font-weight: 450; }
#overview .ov-kpi-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
#overview .ov-kpi.is-good .ov-kpi-sub .ph-fill { color: var(--ok); }
#overview .ov-kpi.is-warn .ov-kpi-sub .ph-fill { color: var(--warn); }
#overview .ov-kpi.is-bad .ov-kpi-sub .ph-fill { color: var(--crit); }
#overview .ov-kpi-spark { margin-top: 4px; }
#overview .ov-kpi-foot { position: relative; z-index: 1; margin-top: 4px; }

/* Popover cards open to the right of their chip; chips near the right edge open to the left instead. */
@media (min-width: 1280px) { #overview .ov-kpi:nth-child(n + 3) .pop-card { left: auto; right: 0; } }
@media (min-width: 641px) and (max-width: 1279px) { #overview .ov-kpi:is(:nth-child(3), :nth-child(5)) .pop-card { left: auto; right: 0; } }
@media (min-width: 641px) { #overview .ov-trend-foot .pop-card { left: auto; right: 0; } }
@media (min-width: 641px) { #overview .ov-aside .pop-card { left: auto; right: 0; } }

/* Optional signals: the Cloud resources tile and the "Not set up" line. */
#overview .ov-signals { display: flex; flex-direction: column; gap: 12px; }
#overview .ov-signals:empty { display: none; }
#overview .ov-signals .kpi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); gap: 16px; margin: 0; }
#overview .ov-signals .kpi-tile[data-a06-nav] { cursor: pointer; transition: border-color 0.12s; }
#overview .ov-signals .kpi-tile[data-a06-nav]:hover { border-color: var(--hairline-hi); box-shadow: none; }
#overview .ov-signals .kpi-tile[data-a06-nav]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; border-color: var(--hairline-hi); }
#overview .a06-setup-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 8px 14px; border: 1px dashed var(--hairline-hi); border-radius: var(--r-panel);
  color: var(--ink-3); font-size: 13px;
}
#overview .a06-setup-item { display: inline-flex; align-items: center; gap: 8px; }

/* Main column and aside. On narrower screens the panels interleave: attention first, then the trend. */
#overview .ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
#overview .ov-main, #overview .ov-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Trend */
#overview .ov-trend .panel-body { padding: 12px 16px 16px; }
#overview .ov-trend-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }

/* Services table */
#overview .ov-table-wrap { overflow-x: auto; }
#overview .ov-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#overview .ov-table th {
  padding: 9px 16px; border-bottom: 1px solid var(--hairline); background: var(--s1); color: var(--ink-3); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap;
}
#overview .ov-table td, #overview .ov-table tbody th { padding: 10px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
#overview .ov-table tbody th { color: var(--ink); font-size: 13.5px; font-weight: 500; }
#overview .ov-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
#overview .ov-table tbody tr:hover :is(td, th) { background: var(--s2); }
#overview .ov-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
#overview .ov-table th.num { font-family: var(--font-body); }
#overview .ov-table .muted { color: var(--ink-3); }
#overview .ov-svc-name { font-weight: 500; color: var(--ink); max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
#overview .ov-svc-name:hover { color: var(--accent); }
#overview .ov-table-more { margin: 0; padding: 10px 16px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 12.5px; }

/* Feeds: attention, activity and connectors share one row language. */
#overview .ov-feed { display: flex; flex-direction: column; }
#overview .ov-feed-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
#overview .ov-feed > :last-child { border-bottom: 0; }
#overview .ov-feed-icon { flex: none; margin-top: 1px; font-size: 18px; color: var(--ink-3); }
#overview .ov-feed-icon.is-crit { color: var(--crit); }
#overview .ov-feed-icon.is-warn { color: var(--warn); }
#overview .ov-feed-icon.is-ok { color: var(--ok); }
#overview .ov-feed-body { flex: 1; min-width: 0; }
#overview .ov-feed-body h4 { margin: 0; font-size: 13.5px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
#overview .ov-feed-body p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
#overview .ov-feed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
#overview .ov-feed-actions .ghost-btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
#overview .ov-feed-more { margin: 0; padding: 10px 16px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
#overview .ov-feed-time { flex: none; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
#overview .ov-subhead {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--s2); border-bottom: 1px solid var(--hairline); color: var(--ink-3); font-size: 12px; font-weight: 500;
}
#overview .ov-feed + .ov-subhead { border-top: 1px solid var(--hairline); }
#overview .ov-subhead .link-btn { margin-left: auto; font-size: 12px; }

/* SLO error budgets */
#overview .ov-slo-list { display: flex; flex-direction: column; }
#overview .ov-slo { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
#overview .ov-slo-list > :last-child { border-bottom: 0; }
#overview .ov-slo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#overview .ov-slo-head strong { font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere; }
#overview .ov-slo-meta { margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
#overview .ov-slo .kpi-tile-bar { height: 6px; margin: 2px 0 0; border-radius: 99px; background: var(--s3); overflow: hidden; }
#overview .kpi-tile-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
#overview .kpi-tile-bar-fill.good { background: var(--ok); }
#overview .kpi-tile-bar-fill.warn { background: var(--warn); }
#overview .kpi-tile-bar-fill.bad { background: var(--crit); }
#overview .kpi-tile-bar-fill.neutral { background: var(--low); }

/* Ask Onyx Oracle */
#overview .ov-ask-form { display: flex; gap: 8px; }
#overview .ov-ask-form input { flex: 1; min-width: 0; }
#overview .ov-ask-form .primary-btn { flex: none; padding: 0 12px; }
#overview .ov-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#overview .ov-suggest .chip { appearance: none; cursor: pointer; text-align: left; font-family: inherit; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
#overview .ov-suggest .chip:hover { border-color: var(--accent-line); color: var(--ink); }
#overview .ov-ask-note { margin: 12px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }

/* First-run checklist */
#overview .a06-checklist { margin: 0; }
#overview .a06-checklist-bar { height: 6px; margin: 14px 16px 6px; border-radius: 99px; background: var(--s3); overflow: hidden; }
#overview .a06-checklist-steps { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
#overview .a06-checklist-step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hairline);
}
#overview .a06-checklist-step:first-child { border-top: 0; }
#overview .a06-checklist-step strong { font-size: 13.5px; font-weight: 550; }
#overview .a06-checklist-step p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
#overview .a06-check { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--hairline-hi); border-radius: 50%; color: var(--ok); font-size: 0; }
#overview .a06-check .ph-fill { font-size: 22px; }
#overview .a06-checklist-step.is-done .a06-check { border: 0; background: none; }
#overview .a06-checklist-step.is-done strong { color: var(--ink-3); text-decoration: none; }
#overview .a06-checklist-action .primary-btn, #overview .a06-checklist-action .ghost-btn { margin-top: 0; white-space: nowrap; }

/* Loading */
#overview .ov-sk-icon { display: block; width: 44px; height: 44px; flex: none; border-radius: var(--r-panel); }
#overview .ov-sk-stack { display: flex; flex: 1; flex-direction: column; gap: 10px; }
#overview .ov-sk-title { display: block; width: min(320px, 70%); height: 24px; }
#overview .ov-sk-line { display: block; width: min(520px, 95%); height: 14px; }
#overview .ov-sk-label { display: block; width: 50%; height: 12px; }
#overview .ov-sk-value { display: block; width: 40%; height: 28px; }
#overview .ov-sk-sub { display: block; width: 70%; height: 12px; }
#overview .ov-sk-chart { display: block; width: 100%; height: 240px; }
#overview .ov-slo-list[aria-busy="true"] .ov-slo { gap: 8px; }

@media (max-width: 1279px) {
  #overview .ov-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #overview .ov-kpi { grid-column: span 2; }
  #overview .ov-kpi:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 1180px) {
  #overview .ov-verdict { grid-template-columns: minmax(0, 1fr); }
  #overview .ov-vstats { grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; }
  #overview .ov-grid { display: flex; flex-direction: column; }
  #overview .ov-main, #overview .ov-aside { display: contents; }
  #overview .ov-attention { order: 1; }
  #overview .ov-trend { order: 2; }
  #overview .ov-services { order: 3; }
  #overview .ov-slos { order: 4; }
  #overview .ov-activity, #overview .ov-connectors { order: 5; }
  #overview .ov-ask { order: 6; }
}
@media (max-width: 640px) {
  #overview .ov-verdict { padding: 16px; gap: 16px; }
  #overview .ov-verdict h3 { font-size: 20px; }
  #overview .ov-vstats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #overview .ov-vstat { min-height: 44px; }
  #overview .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #overview .ov-kpi, #overview .ov-kpi:nth-child(n + 4) { grid-column: auto; }
  #overview .ov-kpi:last-child { grid-column: 1 / -1; }
  #overview .ov-kpi-link { min-height: 44px; }
  #overview .ov-signals .kpi-strip { grid-template-columns: minmax(0, 1fr); }
  #overview .ov-feed-actions .ghost-btn { min-height: 44px; }
  #overview .ov-suggest .chip { padding: 0 12px; font-size: 13px; }
  #overview .a06-checklist-step { grid-template-columns: 24px minmax(0, 1fr); }
  #overview .a06-checklist-action { grid-column: 2; }
  /* the services table turns into labelled cards */
  #overview .ov-table thead { display: none; }
  #overview .ov-table, #overview .ov-table tbody, #overview .ov-table tr, #overview .ov-table td, #overview .ov-table th { display: block; width: 100%; }
  #overview .ov-table tr { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
  #overview .ov-table tbody tr:last-child { border-bottom: 0; }
  #overview .ov-table td, #overview .ov-table tbody th { padding: 3px 0; border: 0; background: none; text-align: left; }
  #overview .ov-table tbody tr:hover :is(td, th) { background: none; }
  #overview .ov-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  #overview .ov-table td[data-label]::before { content: attr(data-label); color: var(--ink-3); font-family: var(--font-body); font-size: 12px; }
  #overview .ov-table tbody th { padding-bottom: 6px; }
  #overview .ov-table-wrap { overflow-x: visible; }
}

/* ==========================================================================
   Dashboards: the list and the builder
   ========================================================================== */
#dashboards .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
#dashboards .kpi-tile-label { letter-spacing: 0; text-transform: none; }
#dashboards .kpi-tile-delta { font-size: 12.5px; }
#dashboards .a14-form-error { margin: 0; }

#dashboards .ds-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
#dashboards .ds-main, #dashboards .ds-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* The "your services are sending data" suggestion */
#dashboards .a14-suggestion { margin: 0; align-items: center; border-left: 1px solid var(--accent-line); }
#dashboards .a14-suggestion > div { flex: 1; min-width: 200px; }
#dashboards .a14-suggestion h3 { margin: 0; font-size: 14px; font-weight: 600; }
#dashboards .a14-suggestion p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }

/* Dashboard cards */
#dashboards .dashboard-catalog {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-height: none; overflow: visible; padding: 16px;
}
#dashboards .ds-card {
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 14px; min-width: 0; padding: 14px;
  background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-panel); transform: none; cursor: pointer;
}
#dashboards .ds-card:hover { background: var(--s3); border-color: var(--hairline-hi); transform: none; }
#dashboards .ds-card.selected { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: none; }
#dashboards .ds-card-main { min-width: 0; }
#dashboards .ds-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
#dashboards .ds-card-title {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
#dashboards .ds-card-title:hover { color: var(--accent); }
#dashboards .ds-card-meta { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; }
#dashboards .ds-card-widgets { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 12.5px; }
#dashboards .ds-card-widgets li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboards .ds-card-widgets li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; }
#dashboards .ds-card-widgets .ds-card-more { color: var(--ink-3); }
#dashboards .ds-card-actions { justify-content: flex-start; gap: 6px; }
#dashboards .ds-card-actions .ghost-btn { min-height: 32px; padding: 0 10px; font-size: 13px; background: var(--s1); }
#dashboards .ds-card-actions .ghost-btn:hover { background: var(--s4); }
#dashboards .ds-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Preview */
#dashboards .dashboard-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; padding: 16px; }
#dashboards .dashboard-preview-grid > .muted { margin: 0; color: var(--ink-3); }

/* Widget cards, in the preview and on the detail page */
:is(#dashboards, #dashboard-detail) .ds-widget { min-height: 0; overflow: hidden; background: var(--s2); }
:is(#dashboards, #dashboard-detail) .ds-widget .panel-header h3 { font-size: 14px; }
#dashboards .ds-widget.widget-analyze-btn { cursor: pointer; }
#dashboards .ds-widget.widget-analyze-btn:hover { background: var(--s3); border-color: var(--hairline-hi); }
:is(#dashboards, #dashboard-detail) .ds-widget .widget-analyze-inline-btn { margin-left: auto; min-height: 30px; padding: 0 10px; font-size: 12.5px; background: var(--s1); }
:is(#dashboards, #dashboard-detail) .ds-widget-body { padding: 16px; min-width: 0; }
:is(#dashboards, #dashboard-detail) .ds-widget-body > p.small-meta { margin: 0; color: var(--ink-3); font-size: 12.5px; }
:is(#dashboards, #dashboard-detail) .a14-widget-empty { padding: 20px 0; text-align: center; }
:is(#dashboards, #dashboard-detail) .a14-hbar-list { display: grid; gap: 12px; }
:is(#dashboards, #dashboard-detail) .a14-hbar-row { font-size: 12.5px; }
:is(#dashboards, #dashboard-detail) .a14-hbar-label { color: var(--ink-2); }
:is(#dashboards, #dashboard-detail) .a14-hbar-track { background: var(--s4); }
:is(#dashboards, #dashboard-detail) .a14-hbar-fill { background: var(--c1); }
:is(#dashboards, #dashboard-detail) .a14-hbar-value { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
:is(#dashboards, #dashboard-detail) .ds-widget .insight-list { display: flex; flex-direction: column; gap: 0; }
:is(#dashboards, #dashboard-detail) .ds-widget .insight-item {
  display: block; padding: 9px 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: none; transform: none;
}
:is(#dashboards, #dashboard-detail) .ds-widget .insight-list > :last-child { border-bottom: 0; }
:is(#dashboards, #dashboard-detail) .ds-widget .insight-item strong { font-size: 13px; font-weight: 550; }
:is(#dashboards, #dashboard-detail) .ds-widget .insight-item p { margin: 2px 0 0; }
:is(#dashboards, #dashboard-detail) .ds-widget .metric-card { padding: 0; border: 0; background: none; }
:is(#dashboards, #dashboard-detail) .ds-widget .metric-label { color: var(--ink-3); font-size: 12.5px; }
:is(#dashboards, #dashboard-detail) .ds-widget .metric-value { font-size: 32px; font-weight: 550; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
:is(#dashboards, #dashboard-detail) .ds-widget .chart { min-height: 0; gap: 8px; }
:is(#dashboards, #dashboard-detail) .ds-widget .bar-stack { height: 150px; }
:is(#dashboards, #dashboard-detail) .ds-widget .bar { background: var(--c1); border-radius: 4px 4px 2px 2px; }
:is(#dashboards, #dashboard-detail) .ds-widget .bar.alt { background: var(--c2); }
:is(#dashboards, #dashboard-detail) .ds-widget .studio-table-wrap { overflow-x: auto; }

/* Templates */
#dashboards .a14-template-row { display: flex; flex-direction: column; gap: 16px; margin: 0; }
#dashboards .a14-template-group { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
#dashboards .a14-template-group > .small-meta { flex-basis: auto; color: var(--ink); font-size: 13px; font-weight: 550; }
#dashboards .ds-group-desc { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
#dashboards .ds-group-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#dashboards .ds-group-buttons .ghost-btn { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* Builder */
#dashboards .ds-builder .onboarding-steps { gap: 0; }
#dashboards .ds-builder .onboarding-step { gap: 14px; padding-bottom: 20px; }
#dashboards .ds-builder .onboarding-step:last-child { padding-bottom: 4px; }
#dashboards .ds-builder .onboarding-step:not(:last-child)::before { left: 12px; background: var(--hairline); }
#dashboards .ds-builder .onboarding-step-num {
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-family: var(--font-body); font-weight: 600;
}
#dashboards .ds-builder .onboarding-step-body h4 { margin: 0; font-size: 14px; font-weight: 600; }
#dashboards .ds-builder .a14-fields { grid-template-columns: minmax(0, 1fr); }
#dashboards .ds-builder .ui-field-label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
#dashboards .ds-builder .ui-field-hint { color: var(--ink-3); font-size: 12px; }
#dashboards .ds-builder .a14-group-label { margin: 10px 0 0; }
#dashboards .ds-builder .a14-fields :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  min-height: 36px; padding: 7px 12px; background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 13.5px;
}
#dashboards .ds-builder .a14-fields :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
#dashboards .ds-builder-actions { justify-content: flex-start; margin-top: 4px; }
#dashboards .ds-builder .a14-results-title { margin: 18px 0 2px; font-size: 13px; font-weight: 600; }
#dashboards .ds-builder p.small-meta { margin: 0; font-size: 12.5px; }
#dashboards .ds-drafts { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
#dashboards .ds-drafts .dashboard-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-ctl); transform: none; }
#dashboards .ds-drafts .dashboard-item strong { font-size: 13px; font-weight: 550; }
#dashboards .ds-drafts .dashboard-item p { margin: 2px 0 0; }
#dashboards .ds-drafts > .muted { margin: 0; color: var(--ink-3); font-size: 12.5px; }

/* Chart-type and audience pickers */
#dashboards .graph-type-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 6px; }
#dashboards .graph-type-grid.audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dashboards .graph-type-card {
  flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 6px 10px; background: var(--s2); color: var(--ink-2);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 12.5px; font-weight: 500; text-align: left;
}
#dashboards .graph-type-grid:not(.audience-grid) .graph-type-card { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; }
#dashboards .graph-type-card:hover { background: var(--s3); border-color: var(--hairline-hi); }
#dashboards .graph-type-card.selected { background: var(--accent-soft); border-color: var(--accent-line); border-width: 1px; color: var(--ink); }
#dashboards .graph-type-icon { width: 28px; height: 28px; border-radius: var(--r-ctl); background: var(--s3); color: var(--ink-2); }
#dashboards .graph-type-card.selected .graph-type-icon { background: var(--accent); color: var(--accent-ink); }
#dashboards .graph-type-icon svg { width: 16px; height: 16px; }
#dashboards .graph-type-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
#dashboards .graph-type-icon svg [fill]:not([fill="none"]) { fill: currentColor; }

/* ==========================================================================
   Dashboard detail
   ========================================================================== */
#dashboard-detail .detail-breadcrumb { margin: 0; }
#dashboard-detail .detail-breadcrumb ol { font-size: 13px; }
#dashboard-detail .detail-breadcrumb-link { color: var(--ink-3); }
#dashboard-detail .detail-breadcrumb-link:hover { color: var(--ink); }
#dashboard-detail .detail-breadcrumb-current span { color: var(--ink); font-weight: 500; }
#dashboard-detail .ds-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
#dashboard-detail .ds-detail-empty { margin: 0; padding: 16px; color: var(--ink-3); }

@media (max-width: 1180px) {
  #dashboards .ds-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #dashboards .kpi-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #dashboards .dashboard-catalog { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  #dashboards .dashboard-preview-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  #dashboards .ds-card-actions .ghost-btn, #dashboards .ds-group-buttons .ghost-btn,
  :is(#dashboards, #dashboard-detail) .ds-widget .widget-analyze-inline-btn { min-height: 44px; }
  #dashboards .ds-card-title { display: inline-flex; align-items: center; min-height: 44px; }
  #dashboards .graph-type-card { min-height: 44px; }
  #dashboards .ds-builder .a14-fields :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { min-height: 44px; }
  #dashboards .graph-type-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  #dashboards .a14-suggestion .primary-btn { width: 100%; }
}

/* /assets/next/pages/services.css */
/* Onyx Next: services pages (Services, service detail, Service Catalog, Topology).
   Page-specific layout only; the tokens, panels, buttons, inputs, status pills, chips, provenance chips, tabs and
   callouts live in ../next.css and ../ui.js. Classes here are prefixed .nxs- (services), .nxc- (catalog) and .nxt-
   (topology) so nothing collides with the older rules in styles.css; colours come from the tokens, so both themes work. */

/* ==========================================================================
   Shared by the services pages: header, verdict, small text helpers
   ========================================================================== */
.nxs-head .section-hero-text { min-width: 0; flex: 1 1 420px; }
.nxs-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; overflow-wrap: anywhere; }
.nxs-title-status { display: inline-flex; font-size: 14px; letter-spacing: 0; }
:is(#services, #service-telemetry-detail, #service-detail, #service-catalog, #topology) .nxs-verdict {
  display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; max-width: 82ch; color: var(--ink); font-size: 16px; line-height: 1.5;
}
.nxs-verdict .ph, .nxs-verdict .ph-fill { font-size: 20px; margin-top: 1px; }
.nxs-verdict b { font-weight: 600; }
/* The verdict names services, and a name with no spaces must wrap here, not widen the page. */
.nxs-verdict > span { min-width: 0; overflow-wrap: anywhere; }
.nxs-verdict.is-crit > .ph-fill { color: var(--crit); }
.nxs-verdict.is-warn > .ph-fill { color: var(--warn); }
.nxs-verdict.is-ok > .ph-fill { color: var(--ok); }
.nxs-verdict.is-minor > .ph-fill { color: var(--minor-call, var(--crit)); }
.nxs-verdict.is-low > .ph, .nxs-verdict.is-low > .ph-fill { color: var(--ink-3); }
:is(#services, #service-telemetry-detail, #service-detail, #service-catalog, #topology) .nxs-head-sub { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; }
.nxs-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
.nxs-d-seen { color: var(--ink-3); font-size: 12.5px; }
.nxs-muted { color: var(--ink-3); }
.nxs-na { color: var(--ink-3); font-weight: 400; }
.nxs-none { margin: 0; color: var(--ink-3); font-size: 13px; }
.nxs-note { margin: 0 0 8px; color: var(--ink-3); font-size: 12.5px; }
.nxs-nowrap { white-space: nowrap; }
.nxs-secondary { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.nxs-primary { display: block; color: var(--ink); font-weight: 550; }
.nxs-compact { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.nxs-link {
  display: inline; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 550; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hairline-hi); text-underline-offset: 3px; text-align: left;
}
.nxs-link:hover { color: var(--accent-hover); text-decoration-color: var(--accent-line); }
.nxs-callout { align-items: flex-start; }
.nxs-callout-body { display: grid; gap: 8px; min-width: 0; }
.nxs-callout-body h3 { margin: 0; font-size: 15px; font-weight: 600; }
.nxs-callout-body p { margin: 0; color: var(--ink-2); }
.nxs-pad { padding: 16px; }
.nxs-flush { padding: 0; }
.nxs-skeleton-stack { display: grid; gap: 12px; }
.nxs-skeleton-stack .skeleton { display: block; height: 14px; border-radius: 6px; }
.nxs-skeleton-stack .nxs-sk-wide { height: 44px; }
.nxs-skeleton-stack .nxs-sk-kpis { height: 64px; }
.nxs-skeleton-stack .nxs-sk-chart { height: 150px; border-radius: var(--r-panel); }

/* ==========================================================================
   Services: summary tiles (also the status filters)
   ========================================================================== */
#services .nxs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#services .nxs-tile {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 14px 16px; text-align: left;
  background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--ink); font: inherit; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
#services .nxs-tile:hover { background: var(--s2); border-color: var(--hairline-hi); }
#services .nxs-tile[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.nxs-tile-n { min-width: 28px; font-size: 38px; line-height: 1; font-weight: 550; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.nxs-tile-n.is-crit { color: var(--crit); }
.nxs-tile-n.is-warn { color: var(--warn); }
.nxs-tile-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nxs-tile-l { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 550; }
.nxs-tile-l .is-crit { color: var(--crit); }
.nxs-tile-l .is-warn { color: var(--warn); }
.nxs-tile-sub { font-size: 12.5px; color: var(--ink-2); }
.nxs-tile-who { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* ==========================================================================
   Services: the list panel
   ========================================================================== */
#services .nxs-panel { padding: 0; gap: 0; overflow: clip; }
.nxs-infra { margin-top: 16px; }
.nxs-infra-summary {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
  cursor: pointer; padding: 14px 16px; min-height: 44px;
}
.nxs-infra-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nxs-infra[open] > .nxs-infra-summary { border-bottom: 1px solid var(--hairline); }
.nxs-infra > .nxs-note { margin: 12px 16px 0; }
.nxs-infra > .nxs-tablewrap { margin-top: 8px; }
.nxs-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.nxs-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nxs-count { color: var(--ink-3); font-size: 12.5px; }
.nxs-panel-aside { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
.nxs-totals { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-2); font-size: 13px; }
.nxs-totals b { color: var(--ink); font-weight: 550; }
.nxs-totals .nxs-muted { margin-left: 4px; font-size: 12px; }

.nxs-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.nxs-tb-status { flex: 1 1 100%; min-width: 0; display: grid; gap: 4px; }
.nxs-tb-search { flex: 0 1 260px; min-width: 180px; }
.nxs-tb-sort { flex: 0 0 190px; }
.nxs-toolbar .ui-field-label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.nxs-toolbar input[type="search"], .nxs-toolbar select { width: 100%; }
.nxs-filters { flex-wrap: wrap; }
.nxs-filters button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nxs-f-icon { display: inline-flex; font-size: 14px; }
.nxs-f-icon .ph, .nxs-f-icon .ph-fill { font-size: 14px; vertical-align: 0; }
.nxs-f-icon.is-ok { color: var(--ok); }
.nxs-f-icon.is-warn { color: var(--warn); }
.nxs-f-icon.is-crit { color: var(--crit); }
.nxs-f-icon.is-low, .nxs-f-icon.is-none { color: var(--ink-3); }
.nxs-n { margin-left: 2px; font-size: 11.5px; color: var(--ink-3); }
.nxs-filters button[aria-pressed="true"] .nxs-n { color: var(--ink-2); }

.nxs-tablewrap { overflow: clip; }
.nxs-table { table-layout: fixed; width: 100%; }
.nxs-table thead th {
  position: sticky; top: var(--topbar-h); z-index: 2; background: var(--s1); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--hairline); padding: 8px 12px;
}
.nxs-table thead th:first-child { padding-left: 16px; }
.nxs-table td, .nxs-table tbody th { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.nxs-table tbody th { position: static; background: transparent; color: var(--ink); font-size: inherit; font-weight: inherit; text-align: left; white-space: normal; padding-left: 16px; }
.nxs-table tbody tr:last-child td, .nxs-table tbody tr:last-child th { border-bottom: 0; }
.nxs-table th.num, .nxs-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.nxs-table th.num, .nxs-subtable th.num { font-family: var(--font-body); }
.nxs-table td.num .nxs-primary, .nxs-table td.num .nxs-secondary { font-family: var(--font-mono); }
.nxs-table td.num .nxs-primary { white-space: nowrap; }
.nxs-table td.num .nxs-secondary { font-size: 11.5px; }
.nxs-row { cursor: pointer; }
.nxs-row:hover td, .nxs-row:hover th { background: var(--s2); }
.nxs-row.is-selected td, .nxs-row.is-selected th { background: var(--accent-soft); }
.nxs-c-name { width: 21%; } .nxs-c-status { width: 25%; } .nxs-c-req { width: 10%; } .nxs-c-fail { width: 12%; }
.nxs-c-p95 { width: 11%; } .nxs-c-trend { width: 11%; } .nxs-c-seen { width: 10%; } .nxs-c-go { width: 36px; }
.nxs-table td.nxs-c-seen { white-space: nowrap; color: var(--ink-2); font-size: 12.5px; }
.nxs-table td.nxs-c-go { text-align: right; padding-left: 0; padding-right: 12px; color: var(--ink-3); }
.nxs-row:hover .nxs-c-go { color: var(--ink); }
.nxs-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nxs-open {
  display: inline; width: fit-content; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: var(--ink); font: inherit; font-weight: 550; font-size: 14px; letter-spacing: -0.01em; overflow-wrap: anywhere; min-height: 0;
  white-space: normal;   /* .svc-open-btn in styles.css says nowrap, which would stop a long name from wrapping */
}
.nxs-open:hover { color: var(--accent-hover); }
.nxs-sub { display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }
.nxs-sub > span { white-space: nowrap; }
.nxs-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nxs-reason { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.nxs-sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; min-height: 0;
}
.nxs-sort:hover, .nxs-sort.is-active { color: var(--ink); }
.nxs-sort .svc-sort-arrow { display: inline-flex; font-size: 12px; opacity: 0.6; }
.nxs-sort.is-active .svc-sort-arrow { opacity: 1; color: var(--accent); }
.nxs-table th.num .nxs-sort { flex-direction: row-reverse; }
.nxs-spark { width: 100px; max-width: 100%; height: 28px; }
.spark.nxs-spark polyline.fail { stroke: var(--crit); stroke-width: 1.4; }
.nxs-nomatch { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 28px 16px; color: var(--ink-3); border-top: 1px solid var(--hairline); }
.nxs-nomatch[hidden] { display: none; }
.nxs-legend { margin: 0; padding: 12px 16px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 12.5px; line-height: 1.55; background: var(--s1); }
.nxs-legend b { font-weight: 550; color: var(--ink-2); }

/* Provenance popovers sit at the right edge: they open leftwards so they never widen the page */
.nxs-panel-aside .pop-card, .nxs-summary-prov .pop-card { left: auto; right: 0; }

/* The time-range readout / selector in the header: one compact line; the hint stays for screen readers */
#services .page-header-actions .ui-field { display: flex; align-items: center; gap: 8px; }
#services .page-header-actions .ui-field-label { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
#services .page-header-actions .ui-field-hint { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#services .page-header-actions output { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--r-ctl); background: var(--s2); color: var(--ink-2); font-size: 13px; }
#services .svc-window { display: grid; gap: 2px; }
#services .svc-window-label { color: var(--ink-3); font-size: 12px; font-weight: 500; }
#services .svc-window-select { min-height: 36px; }

/* Empty and error states */
.nxs-empty { gap: 12px; max-width: 760px; }
.nxs-empty > .ph { font-size: 28px; }
.nxs-empty h3 { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.nxs-steps { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); max-width: 64ch; }
.nxs-steps li::marker { color: var(--ink-3); font-family: var(--font-mono); }
.nxs-code { width: 100%; max-width: 640px; }
.nxs-code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.nxs-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nxs-inline-empty { padding: 20px 16px; gap: 6px; }
.nxs-inline-empty h3 { font-size: 15px; }

/* ==========================================================================
   Service drawer: a right-hand quick look, opened from a row
   ========================================================================== */
#service-drawer-backdrop { position: fixed; inset: 0; z-index: 1000; background: var(--scrim); }
#service-drawer-backdrop[hidden] { display: none; }
#service-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(580px, 100vw); display: flex; flex-direction: column;
  background: var(--s1); color: var(--ink); border-left: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop);
}
#service-drawer[hidden] { display: none; }
#service-drawer:focus { outline: none; }
#service-drawer .nxs-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
#service-drawer .nxs-d-id { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; flex: 1; padding-top: 2px; }
#service-drawer h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
#service-drawer h2:focus-visible { outline-offset: 4px; }
#service-drawer .nxs-d-close { min-width: 36px; padding: 0 8px; }
#service-drawer .nxs-d-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 0 16px 12px; }
#service-drawer .nxs-d-tabs { padding: 0 16px; gap: 18px; flex: none; }
#service-drawer .nxs-d-tabs button { min-height: 40px; }
#service-drawer .nxs-d-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
#service-drawer .nxs-d-body:focus-visible { outline-offset: -2px; }
#service-drawer .nxs-pane { display: grid; gap: 16px; }
#service-drawer .nxs-d-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--s1); }
#service-drawer .nxs-d-foot .primary-btn { flex: 1 1 100%; }
#service-drawer .nxs-d-foot .secondary-btn { flex: 1 1 auto; }

/* ==========================================================================
   Service detail: what the drawer and the full page share
   ========================================================================== */
.nxs-why { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; }
.nxs-why-text { flex: 1 1 100%; color: var(--ink-2); line-height: 1.55; }
.nxs-why-text b { color: var(--ink); font-weight: 600; }
.nxs-why-text p { margin: 0; }
.nxs-why-text p + p, .nxs-why-text p + ul, .nxs-why-text ul + p { margin-top: 8px; }
.nxs-why-text ul { margin: 4px 0 0; padding-left: 18px; }
.nxs-why-h { color: var(--ink); font-weight: 550; }
.nxs-kpis { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr); margin: 0; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--s2); }
.nxs-kpis > div { padding: 10px 12px; min-width: 0; border-left: 1px solid var(--hairline); }
.nxs-kpis > div:first-child { border-left: 0; }
.nxs-kpis dt { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.nxs-kpis dd { margin: 2px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nxs-kpis dd small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; font-family: var(--font-body); }
.nxs-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#service-drawer .nxs-charts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.nxs-chart-card { margin: 0; padding: 12px 14px; display: grid; gap: 8px; min-width: 0; background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); }
#service-drawer .nxs-chart-card { background: var(--s2); }
.nxs-chart-card figcaption h3 { margin: 0; font-size: 14px; font-weight: 600; }
.nxs-chart-card figcaption p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.nxs-chart { position: relative; }
.nxs-plot { position: relative; height: 118px; margin: 8px 6px 26px 46px; }
.nxs-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.nxs-plot svg * { vector-effect: non-scaling-stroke; }
.nxs-chart .gridline { stroke: var(--grid); stroke-width: 1; }
.nxs-chart .line { fill: none; stroke: var(--c1); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.nxs-chart .area { fill: var(--accent-soft); stroke: none; }
/* A bucket alone between gaps has no line segment: it is drawn as a round dot (a zero-length stroke with round caps). */
.nxs-chart .dot { fill: none; stroke: var(--c1); stroke-width: 6; stroke-linecap: round; }
.nxs-chart .hit { fill: transparent; }
.nxs-chart .hit:hover { fill: var(--accent-soft); }
.nxs-chart--bad .line, .nxs-chart--bad .dot { stroke: var(--crit); }
.nxs-chart--bad .hit:hover { fill: var(--crit-soft); }
.nxs-chart--warn .line, .nxs-chart--warn .dot { stroke: var(--warn); }
.nxs-chart--warn .hit:hover { fill: var(--warn-soft); }
.nxs-chart .ref { stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.nxs-chart .ref--warn { stroke: var(--warn); }
.nxs-chart .ref--crit { stroke: var(--crit); }
.nxs-y span, .nxs-x span, .nxs-chart .ref-label { position: absolute; font-size: 10.5px; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.nxs-y span { right: calc(100% + 8px); transform: translateY(-50%); font-family: var(--font-mono); }
.nxs-x { position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: 12px; }
.nxs-x span { font-family: var(--font-mono); }
.nxs-x span:first-child { left: 0; }
.nxs-x span:last-child { right: 0; }
.nxs-chart .ref-label { right: 4px; padding: 0 3px; background: var(--s1); border-radius: 3px; transform: translateY(calc(-100% - 3px)); }
#service-drawer .nxs-chart .ref-label { background: var(--s2); }
.nxs-chart .ref-label--warn { color: var(--warn); }
.nxs-chart .ref-label--crit { color: var(--crit); }
.nxs-chart-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; border: 1px dashed var(--hairline-hi); border-radius: var(--r-ctl); color: var(--ink-3); font-size: 12.5px; }
.nxs-sec { display: grid; gap: 10px; }
.nxs-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.nxs-sec-h h3 { margin: 0; font-size: 14px; font-weight: 600; }

/* Error groups */
.nxs-egs { list-style: none; margin: 0; padding: 0; }
.nxs-eg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.nxs-eg:first-child { padding-top: 0; }
.nxs-eg:last-child { border-bottom: 0; padding-bottom: 0; }
.nxs-eg-main { display: grid; gap: 2px; min-width: 0; }
.nxs-eg-type { width: fit-content; max-width: 100%; font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; background: none; padding: 0; }
.nxs-eg-msg { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.nxs-eg-n { text-align: right; align-self: start; font-size: 14px; }
.nxs-eg-n .num { display: block; font-weight: 550; }
.nxs-eg-n small { display: block; font-size: 11.5px; color: var(--ink-3); }
.nxs-eg-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--s3); overflow: hidden; }
.nxs-eg-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c4); }
.nxs-eg-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; }
.nxs-eg-trace { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nxs-eg-trace .mono-cell { color: var(--ink-3); font-size: 12px; }
.nxs-eg-trace .copy-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Sub-tables (operations, instances) */
.nxs-subtablewrap { overflow-x: auto; }
.nxs-subtable { width: 100%; }
.nxs-subtable th, .nxs-subtable td { padding: 10px 12px; font-size: 13px; }
.nxs-subtable thead th { padding-top: 8px; padding-bottom: 8px; }
.nxs-subtable th:first-child, .nxs-subtable td:first-child { padding-left: 0; }
.nxs-subtable th.num, .nxs-subtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.nxs-subtable tbody th { color: var(--ink); font-weight: 450; background: transparent; white-space: normal; }
.nxs-subtable tbody tr:last-child th, .nxs-subtable tbody tr:last-child td { border-bottom: 0; }
.nxs-subtable td { white-space: nowrap; }
.nxs-subtable td.mono-cell { white-space: nowrap; }
.nxs-subtable .mono-cell { font-size: 12.5px; overflow-wrap: anywhere; }
.nxs-instance-id { margin-top: 4px; font-weight: 400; }
.nxs-instance-id:not([open]) > :not(summary) { display: none; }
.nxs-instance-id summary { cursor: pointer; color: var(--ink-3); font-size: 12px; }
.nxs-instance-id code { display: block; margin-top: 4px; overflow-wrap: anywhere; white-space: normal; font-weight: 400; }

/* Dependencies */
.nxs-dep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
#service-drawer .nxs-dep-grid { grid-template-columns: minmax(0, 1fr); }
.nxs-dep-grid h4 { margin: 0 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.nxs-deps { list-style: none; margin: 0 0 8px; padding: 0; }
.nxs-dep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.nxs-dep:last-child { border-bottom: 0; }
.nxs-dep-main { min-width: 0; }
.nxs-dep-name { font-weight: 550; overflow-wrap: anywhere; }
.nxs-dep-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); }
.nxs-dep-stats .is-failed { color: var(--crit); }

/* ==========================================================================
   Service detail: the full page
   ========================================================================== */
#service-telemetry-detail .detail-breadcrumb { margin-bottom: 0; }
.nxs-summary { padding: 16px; gap: 16px; }
.nxs-summary-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.nxs-summary-top .nxs-why { flex: 1 1 420px; min-width: 0; }
.nxs-summary-prov { flex: none; }
.nxs-block { padding: 0; gap: 0; overflow: clip; }
.nxs-block > :not(.nxs-block-head) { padding: 16px; }
.nxs-block > .nxs-subtablewrap, .nxs-block > .nxs-egs { padding-top: 12px; }
.nxs-block-head { padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.nxs-block-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nxs-block-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.nxs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nxs-two > .panel { min-width: 0; }
.nxs-facts { display: grid; gap: 0; margin: 0; padding: 4px 16px 8px; }
.nxs-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.nxs-facts > div:last-child { border-bottom: 0; }
.nxs-facts dt { color: var(--ink-3); font-size: 13px; }
.nxs-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.nxs-block > .nx-list { padding: 0; }
.nxs-block .nx-list > article p { margin: 2px 0 0; font-size: 12.5px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nxs-c-trend { display: none; }
  .nxs-c-name { width: 21%; } .nxs-c-status { width: 32%; } .nxs-c-req { width: 11%; } .nxs-c-fail { width: 12%; } .nxs-c-p95 { width: 10%; } .nxs-c-seen { width: 12%; }
  .nxs-charts { grid-template-columns: minmax(0, 1fr); }
  .nxs-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nxs-c-seen { display: none; }
  .nxs-c-name { width: 24%; } .nxs-c-status { width: 32%; } .nxs-c-req { width: 12%; } .nxs-c-fail { width: 15%; } .nxs-c-p95 { width: 17%; }
  .nxs-dep-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #services .nxs-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #services .nxs-tile { min-height: 76px; padding: 12px; gap: 12px; }
  .nxs-tile-n { font-size: 32px; }
  .nxs-panel-aside { margin-left: 0; justify-content: flex-start; width: 100%; }
  .nxs-tb-status { flex: 1 1 100%; order: 3; }
  .nxs-tb-search { flex: 1 1 55%; min-width: 0; }
  .nxs-tb-sort { flex: 1 1 35%; min-width: 0; }
  .nxs-filters { display: flex; }
  .nxs-filters button { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .nxs-toolbar input[type="search"], .nxs-toolbar select, .nxs-nomatch .secondary-btn { min-height: 44px; }

  /* each row becomes a labelled card */
  .nxs-tablewrap { overflow: visible; }
  .nxs-table, .nxs-table tbody { display: block; }
  /* On a phone the rows are cards and the sort menu replaces the column headers; display: none also takes the header's sort buttons out of the tab order. */
  .nxs-table thead { display: none; }
  .nxs-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 2px; align-content: start;
    padding: 14px 16px 12px; position: relative; border-bottom: 1px solid var(--hairline);
  }
  .nxs-table tbody tr:last-child { border-bottom: 0; }
  .nxs-table tbody tr > * { min-width: 0; width: auto; }
  .nxs-table tbody td { padding: 3px 0; border: 0; }
  .nxs-table tbody th { display: block; grid-column: 1 / -1; padding: 0 36px 6px 0; border: 0; }
  .nxs-table tbody td.nxs-c-status { grid-column: 1 / -1; order: 1; padding: 0 0 8px; }
  .nxs-table tbody td.nxs-c-req { order: 2; }
  .nxs-table tbody td.nxs-c-p95 { order: 3; }
  .nxs-table tbody td.nxs-c-fail { order: 4; grid-column: 1 / -1; }
  .nxs-table tbody td.nxs-c-trend { order: 5; display: flex; align-items: center; }
  .nxs-table tbody td.nxs-c-seen { order: 6; display: block; }
  .nxs-table tbody td[data-label]:not(.nxs-c-status):not(.nxs-c-trend)::before {
    content: attr(data-label); display: block; color: var(--ink-3); font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  }
  .nxs-table td.num { text-align: left; }
  .nxs-table tbody td.nxs-c-go { position: absolute; top: 14px; right: 16px; width: auto; padding: 0; display: block; }
  .nxs-open { min-height: 44px; display: inline-flex; align-items: center; }
  .nxs-spark { width: 84px; }

  #service-drawer { width: 100vw; border-left: 0; overflow-y: auto; }
  #service-drawer .nxs-d-head { position: sticky; top: 0; z-index: 3; background: var(--s1); }
  #service-drawer .nxs-d-body { overflow: visible; flex: none; }
  #service-drawer .nxs-d-close { min-width: 44px; min-height: 44px; }
  #service-drawer .nxs-d-tabs button { min-height: 44px; }
  #service-drawer .nxs-d-foot .primary-btn, #service-drawer .nxs-d-foot .secondary-btn { min-height: 44px; flex: 1 1 100%; }
  .nxs-kpis dd { font-size: 15px; }
  .nxs-kpis > div { padding: 10px; }
  .nxs-link, .nxs-eg-trace .copy-btn, .nxs-compact { min-height: 44px; }
  .nxs-link { display: inline-flex; align-items: center; }
  .nxs-compact { min-height: 44px; }
  .nxs-subtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nxs-subtable, .nxs-subtable tbody, .nxs-subtable tr, .nxs-subtable td, .nxs-subtable th { display: block; }
  .nxs-subtable tr { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
  .nxs-subtable tr:last-child { border-bottom: 0; }
  .nxs-subtable th, .nxs-subtable td { padding: 2px 0; border: 0; text-align: left; }
  .nxs-subtable td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12px; }
  .nxs-head .page-header-aside, .nxs-head .page-header-actions { width: 100%; }
  .nxs-head .page-header-actions .secondary-btn { flex: 1 1 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #service-drawer, #service-drawer-backdrop { transition: none; }
}

/* ==========================================================================
   Service Catalog
   ========================================================================== */
#service-catalog .nxc-kpis { margin-bottom: 0; }
.nxc-gaps { padding: 0; gap: 0; }
.nxc-gaps-head { padding: 14px 16px 0; }
.nxc-gaps-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nxc-gaps-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.nxc-gap-list { list-style: none; margin: 0; padding: 10px 16px 14px; display: grid; gap: 8px; }
.nxc-gap-list li { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.nxc-gap-label { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.nxc-gap-bar { height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden; }
.nxc-gap-bar i { display: block; height: 100%; border-radius: 6px; background: var(--warn); }
.nxc-gap-n { text-align: right; color: var(--ink); font-size: 13px; }

.nxc-services { display: grid; gap: 12px; }
.nxc-services-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.nxc-services-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nxc-services-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.nxc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.nxc-item {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px;
  background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); box-shadow: inset 0 1px 0 var(--edge-hi);
}
.nxc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nxc-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.nxc-score { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.nxc-pips { display: inline-flex; gap: 3px; }
.nxc-pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--s4); }
.nxc-score.is-ok .nxc-pips i.is-on { background: var(--ok); }
.nxc-score.is-warn .nxc-pips i.is-on { background: var(--warn); }
.nxc-score.is-crit .nxc-pips i.is-on { background: var(--crit); }
.nxc-score.is-ok { color: var(--ok); }
.nxc-score.is-warn { color: var(--warn); }
.nxc-score.is-crit { color: var(--crit); }
.nxc-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--ink-3); font-size: 12.5px; }
.nxc-meta em { color: var(--ink-3); }
.nxc-incidents { color: var(--crit); }
.nxc-error { margin: 0; color: var(--crit); font-size: 12.5px; }
.nxc-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nxc-fixes li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.nxc-fixes li > .ph-fill { color: var(--warn); margin-top: 2px; font-size: 15px; }
.nxc-fixes strong { color: var(--ink); font-weight: 550; }
.nxc-fix { display: block; color: var(--ink-3); font-size: 12.5px; }
.nxc-met { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.nxc-unscored { margin: 0; color: var(--ink-2); font-size: 13px; }
.nxc-ready { margin: 0; display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 13px; }
.nxc-ready .ph-fill { color: var(--ok); font-size: 15px; }
.nxc-owner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); }
.nxc-owner label { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
#service-catalog .svc-cat-owner-input { flex: 1 1 160px; min-width: 130px; min-height: 36px; padding: 7px 12px; font-size: 13.5px; border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); background: var(--s1); color: var(--ink); }
.nxc-orphans { list-style: none; margin: 0; padding: 0; }
.nxc-orphans li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid var(--hairline); }
.nxc-orphan-text { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.nxc-panel { padding: 0; gap: 0; overflow: clip; }
.nxc-panel-head { padding: 14px 16px; }
.nxc-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nxc-panel-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 80ch; }
.nxc-loading { padding: 16px; }
#service-catalog .empty-state { align-items: flex-start; text-align: left; padding: 28px 20px; }
#service-catalog .empty-state-message { max-width: 56ch; font-size: 13.5px; }
#service-catalog .empty-state-title { font-size: 15px; }
#service-catalog .empty-state .secondary-btn { margin-top: 8px; }
@media (max-width: 640px) {
  .nxc-gap-list li { grid-template-columns: minmax(0, 1fr) 36px; }
  .nxc-gap-bar { grid-column: 1 / -1; grid-row: 2; }
  .nxc-owner .secondary-btn, .nxc-owner .ghost-btn, #service-catalog .svc-cat-owner-input, #service-catalog #svc-cat-refresh-btn { min-height: 44px; }
  .nxc-owner .secondary-btn, .nxc-owner .ghost-btn { flex: 1 1 auto; }
  .nxc-orphans .ghost-btn { min-height: 44px; }
}

/* ==========================================================================
   Topology: the map, its filters, the connection list and the service drawer
   ========================================================================== */
/* A call with some failures, below the warning line: a muted red, so it is never drawn like a clean call (>= 6:1 on the map in both themes) */
#topology, #resource-drawer { --minor-call: color-mix(in srgb, var(--crit) 55%, var(--ink-3)); }
#topology .status.is-minor, #resource-drawer .status.is-minor { color: var(--minor-call); background: color-mix(in srgb, var(--minor-call) 12%, transparent); }
#topology .topo-panel { margin-top: 0; }
#topology .nxt-panel { padding: 0; gap: 0; overflow: clip; }
#topology .topo-panel-header { margin: 0; padding: 14px 16px; align-items: center; border-bottom: 1px solid var(--hairline); }
#topology .topo-panel-header h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#topology .topo-panel-header p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
#topology .topo-filters { padding: 14px 16px 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
#topology .topo-filters .ui-field-label, #topology .topo-declare .ui-field-label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
#topology .topo-filter-footer { margin: 0; padding: 8px 16px 0; }
#topology .topo-filter-footer .small-meta { margin: 0; color: var(--ink-3); font-size: 12.5px; }
#topology .topo-map-region { margin-top: 0; padding: 12px 16px 16px; }
#topology .topo-map-region > .nx-empty, #topology .topo-map-region > .empty-state { padding: 32px 8px; }
#topology .nxt-hint, #topology .topo-map-hint, #topology .topo-map-note { margin: 0 0 8px; color: var(--ink-3); font-size: 12.5px; }
#topology .topo-control {
  min-height: 36px; padding: 7px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); background-color: var(--s1); color: var(--ink); font-size: 13.5px;
}
#topology select.topo-control {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#topology .topo-control:hover { border-color: var(--hairline-hi); }
#topology .topo-control:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; box-shadow: none; }
#topology .topo-control:disabled { color: var(--ink-4); background-color: var(--s2); cursor: not-allowed; }
#topology .topo-declare { padding: 14px 16px 0; }
#topology .topo-declare-btn { min-height: 36px; }
#topology .topo-relationship-message { padding: 0 16px; margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; }
#topology .topo-relationship-list { margin-top: 12px; }

/* The map: a dotted well on the surface ladder; nodes and edges are drawn from tokens, so dark works as is */
#topology .topo-map-scroll {
  overflow: auto; max-width: 100%; margin-top: 0; border: 1px solid var(--hairline); border-radius: var(--r-panel);
  background: radial-gradient(circle, var(--grid) 1px, transparent 1px) 0 0 / 22px 22px, var(--canvas);
}
#topology .topo-map-scroll:focus-visible { outline-offset: -2px; }
#topology .topo-svg { margin: 0; }
#topology .topo-node-box { fill: var(--s1); stroke: var(--hairline-strong); stroke-width: 1; }
#topology .topo-node:hover .topo-node-box { stroke: var(--hairline-hi); }
#topology .topo-node:focus-visible .topo-node-box, #topology .topo-node.is-selected .topo-node-box { stroke: var(--accent); stroke-width: 2; }
#topology .topo-node-stripe { fill: var(--hairline-hi); }
#topology .topo-node.status-healthy .topo-node-stripe { fill: var(--ok); }
#topology .topo-node.status-warning .topo-node-stripe { fill: var(--warn); }
#topology .topo-node.status-critical .topo-node-stripe { fill: var(--crit); }
#topology .topo-node.status-critical .topo-node-box { stroke: color-mix(in srgb, var(--crit) 55%, transparent); }
#topology .topo-node-name { fill: var(--ink); font-size: 13.5px; font-weight: 600; }
#topology .topo-node-stats { fill: var(--ink-2); font-size: 12px; font-family: var(--font-mono); }
#topology .topo-node-meta { fill: var(--ink-3); font-size: 11.5px; }
#topology .topo-isolated-label { fill: var(--ink-3); font-size: 12px; font-weight: 500; }
#topology .topo-node-pill rect { fill: var(--low-soft); stroke: var(--hairline-hi); stroke-dasharray: 3 3; }
#topology .topo-node-pill text { fill: var(--ink-2); font-size: 11.5px; font-weight: 500; }
#topology .topo-node.status-healthy .topo-node-pill rect { fill: var(--ok-soft); stroke: none; stroke-dasharray: none; }
#topology .topo-node.status-healthy .topo-node-pill text { fill: var(--ok); }
#topology .topo-node.status-warning .topo-node-pill rect { fill: var(--warn-soft); stroke: none; stroke-dasharray: none; }
#topology .topo-node.status-warning .topo-node-pill text { fill: var(--warn); }
#topology .topo-node.status-critical .topo-node-pill rect { fill: var(--crit-soft); stroke: none; stroke-dasharray: none; }
#topology .topo-node.status-critical .topo-node-pill text { fill: var(--crit); }
/* grouping by an attribute: the stripe carries the group, the pill still carries the health */
#topology .topo-node[class*="group-"] .topo-node-stripe { width: 6px; }
#topology .topo-node.group-0 .topo-node-stripe, #topology .topo-swatch.group-0 { fill: var(--c1); background: var(--c1); }
#topology .topo-node.group-1 .topo-node-stripe, #topology .topo-swatch.group-1 { fill: var(--c2); background: var(--c2); }
#topology .topo-node.group-2 .topo-node-stripe, #topology .topo-swatch.group-2 { fill: var(--c3); background: var(--c3); }
#topology .topo-node.group-3 .topo-node-stripe, #topology .topo-swatch.group-3 { fill: var(--c4); background: var(--c4); }
#topology .topo-node.group-4 .topo-node-stripe, #topology .topo-swatch.group-4 { fill: var(--ink-2); background: var(--ink-2); }
#topology .topo-node.group-5 .topo-node-stripe, #topology .topo-swatch.group-5 { fill: var(--accent-line); background: var(--accent-line); }
#topology .topo-node.group-none .topo-node-stripe, #topology .topo-swatch.group-none { fill: var(--hairline-hi); background: var(--hairline-hi); }
/* Hues are rotated from the accent and kept clear of the status colours (red, amber, green), so a group is never read as a health state */
@supports (color: oklch(from red l c h)) {
  #topology .topo-node.group-1 .topo-node-stripe, #topology .topo-swatch.group-1 { fill: oklch(from var(--accent) l c calc(h - 55)); background: oklch(from var(--accent) l c calc(h - 55)); }
  #topology .topo-node.group-2 .topo-node-stripe, #topology .topo-swatch.group-2 { fill: oklch(from var(--accent) l c calc(h + 40)); background: oklch(from var(--accent) l c calc(h + 40)); }
  #topology .topo-node.group-3 .topo-node-stripe, #topology .topo-swatch.group-3 { fill: oklch(from var(--accent) l c calc(h + 80)); background: oklch(from var(--accent) l c calc(h + 80)); }
}

#topology .topo-edge-line { stroke-width: 1.6; }
#topology .topo-edge.tone-ok .topo-edge-line { stroke: var(--ink-3); }
#topology .topo-edge.tone-minor .topo-edge-line { stroke: var(--minor-call); stroke-width: 1.8; }
#topology .topo-edge.tone-warning .topo-edge-line { stroke: var(--warn); stroke-width: 2; }
#topology .topo-edge.tone-error .topo-edge-line { stroke: var(--crit); stroke-width: 2.2; }
#topology .topo-edge.tone-declared .topo-edge-line { stroke: var(--ink-3); stroke-dasharray: 6 5; }
#topology .topo-edge.tone-inferred .topo-edge-line { stroke: var(--accent); stroke-dasharray: 6 5; }
#topology .topo-edge:hover .topo-edge-line, #topology .topo-edge:focus-visible .topo-edge-line, #topology .topo-edge.is-selected .topo-edge-line { stroke-width: 3.4; }
#topology .topo-edge:focus-visible { outline: none; }
#topology .topo-arrow.tone-ok { fill: var(--ink-3); }
#topology .topo-arrow.tone-minor { fill: var(--minor-call); }
#topology .topo-arrow.tone-warning { fill: var(--warn); }
#topology .topo-arrow.tone-error { fill: var(--crit); }
#topology .topo-arrow.tone-declared { fill: var(--ink-3); }
#topology .topo-arrow.tone-inferred { fill: var(--accent); }
#topology .topo-edge-label rect { fill: var(--s2); stroke: var(--hairline-strong); }
#topology .topo-edge-label text { fill: var(--ink-2); font-size: 11px; font-weight: 500; }
#topology .topo-edge.tone-warning .topo-edge-label rect { fill: var(--s2); stroke: color-mix(in srgb, var(--warn) 55%, transparent); }
#topology .topo-edge.tone-warning .topo-edge-label text { fill: var(--warn); }
#topology .topo-edge.tone-error .topo-edge-label rect { fill: var(--s2); stroke: color-mix(in srgb, var(--crit) 55%, transparent); }
#topology .topo-edge.tone-error .topo-edge-label text { fill: var(--crit); }
#topology .topo-edge:focus-visible .topo-edge-label rect, #topology .topo-edge.is-selected .topo-edge-label rect { stroke: var(--accent); stroke-width: 2; }

#topology .topo-legend { margin-top: 12px; gap: 8px; }
#topology .topo-legend-row { font-size: 12.5px; color: var(--ink-3); gap: 6px 16px; }
#topology .topo-legend-title { font-weight: 500; color: var(--ink-2); }
#topology .topo-legend-line { stroke-width: 2.2; }
#topology .topo-legend-line.tone-ok { stroke: var(--ink-3); }
#topology .topo-legend-line.tone-minor { stroke: var(--minor-call); }
#topology .topo-legend-line.tone-warning { stroke: var(--warn); }
#topology .topo-legend-line.tone-error { stroke: var(--crit); }
#topology .topo-legend-line.tone-declared { stroke: var(--ink-3); stroke-dasharray: 5 4; }
#topology .topo-swatch { border-radius: 3px; }

/* The connection list */
.nxt-conns { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--hairline); }
.nxt-conn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.nxt-conn:last-child { border-bottom: 0; }
.nxt-conn:hover { background: var(--s2); }
.nxt-conn-main { display: grid; gap: 4px; min-width: 0; }
.nxt-conn-main strong { font-weight: 550; overflow-wrap: anywhere; }
.nxt-conn-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-3); font-size: 12.5px; }
#topology .topo-line-sample { border-top-color: var(--ink-3); }
#topology .topo-line-sample.tone-inferred { border-top-color: var(--accent); }
#topology .nxt-conns + .nx-empty, #topology .topo-relationship-list > .empty-state { padding: 28px 16px; }
#topology .topo-relationship-list { margin-top: 0; }
#topology .topo-relationship-list > .empty-state, #topology .topo-map-region > .empty-state { align-items: flex-start; text-align: left; }

/* The service / connection drawer: same drawer language as the Services drawer */
#resource-drawer-backdrop { background: var(--scrim); z-index: 1000; }
#resource-drawer { z-index: 1001; background: var(--s1); color: var(--ink); border-left: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop); }
#resource-drawer .resource-drawer-header { padding: 16px 16px 8px; border-bottom: 0; }
#resource-drawer .resource-drawer-title-row { flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
#resource-drawer .resource-drawer-title-row h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--ink); }
#resource-drawer .resource-drawer-title-row .status { order: 2; font-size: 12px; }
#resource-drawer .resource-drawer-close {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 8px; color: var(--ink-2);
  background: var(--s2); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 14px;
}
#resource-drawer .resource-drawer-close:hover { background: var(--s3); color: var(--ink); }
#resource-drawer .resource-drawer-tabs { padding: 0 16px; gap: 18px; border-bottom: 1px solid var(--hairline); }
#resource-drawer .resource-drawer-tab { position: relative; padding: 10px 2px 11px; border: 0; color: var(--ink-3); font-weight: 500; font-size: 13.5px; min-height: 40px; }
#resource-drawer .resource-drawer-tab:hover { color: var(--ink); }
#resource-drawer .resource-drawer-tab.active { color: var(--ink); }
#resource-drawer .resource-drawer-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
#resource-drawer .resource-drawer-body { padding: 16px; }
#resource-drawer .resource-drawer-body > * + * { margin-top: 16px; }
#resource-drawer .resource-drawer-body .panel { padding: 14px; background: var(--s1); border: 1px solid var(--hairline); }
#resource-drawer .resource-drawer-body .panel h3 { margin: 0; font-size: 14px; font-weight: 600; }
#resource-drawer .resource-drawer-body .kpi-strip { margin: 10px 0 0; gap: 8px; }
#resource-drawer .resource-drawer-body .kpi-tile { padding: 12px; background: var(--s2); }
#resource-drawer .resource-drawer-body .kpi-tile-value { font-size: 22px; }
#resource-drawer .resource-drawer-body .split-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#resource-drawer .resource-drawer-body .insight-item { padding: 10px 12px; background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-ctl); }
#resource-drawer .topo-call-row { padding: 10px 12px; background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-ctl); color: var(--ink); }
#resource-drawer .topo-call-row:hover, #resource-drawer .topo-call-row:focus-visible { border-color: var(--accent-line); background: var(--s3); outline: none; }
#resource-drawer .topo-call-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#resource-drawer .topo-call-row .topo-call-direction { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; }
#resource-drawer .topo-call-row .small-meta { color: var(--ink-3); font-size: 12.5px; }
#resource-drawer .topo-drawer-heading { font-size: 14px; font-weight: 600; color: var(--ink); }
#resource-drawer .relationship-item { display: flex; align-items: center; gap: 8px; }
#resource-drawer .resource-tag-chip { background: var(--s2); border: 1px solid var(--hairline); border-radius: 6px; color: var(--ink-2); font-size: 12px; padding: 2px 8px; }
#resource-drawer .resource-action-card { background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-panel); color: var(--ink); }
#resource-drawer .resource-action-card:hover { border-color: var(--accent-line); background: var(--s3); }
#resource-drawer .resource-json-view { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel); color: var(--ink-2); font-family: var(--font-mono); }
#resource-drawer .resource-drawer-skeleton .skeleton-line { height: 14px; }
#resource-drawer select, #resource-drawer input[type="text"] { width: 100%; }
#resource-drawer .small-meta { color: var(--ink-3); }

@media (max-width: 640px) {
  #topology .topo-panel-header { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  #topology .topo-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #topology .topo-filters > :nth-child(-n + 2) { grid-column: 1 / -1; }
  #topology .topo-declare { grid-template-columns: minmax(0, 1fr); }
  #topology .topo-control, #topology .topo-declare-btn { min-height: 44px; }
  #topology .topo-small-btn, #topology .topo-relationship .ghost-btn, .nxt-conn .ghost-btn { min-height: 44px; }
  .nxt-conn { flex-wrap: wrap; }
  #resource-drawer { width: 100vw; border-left: 0; }
  #resource-drawer .resource-drawer-close { min-width: 44px; min-height: 44px; }
  #resource-drawer .resource-drawer-tab { min-height: 44px; }
  #resource-drawer .topo-drawer-actions .primary-btn, #resource-drawer .topo-drawer-actions .ghost-btn { min-height: 44px; }
}
#topology .nxt-conn.topology-edge-trace-derived { border-left: 0; padding-left: 16px; }
#resource-drawer .nxt-drawer-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
#resource-drawer .nxt-drawer-h .pop-card { left: auto; right: 0; width: min(300px, calc(100vw - 48px)); }
#resource-drawer .nxt-facts { padding: 0; margin-top: 4px; }
#resource-drawer .nxt-facts dt { flex: none; max-width: 55%; }
#resource-drawer .nxt-facts dd { font-size: 13px; }
.topo-attr-key { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }

/* Touch targets on phones */
@media (max-width: 640px) {
  :is(#services, #service-telemetry-detail, #service-catalog, #topology, #resource-drawer) .prov { min-height: 44px; }
  :is(#services, #service-telemetry-detail, #topology) .pop-card { width: min(300px, calc(100vw - 48px)); }
  #service-telemetry-detail .detail-breadcrumb-link { display: inline-flex; align-items: center; min-height: 44px; }
  #topology .topo-edge-hit { stroke-width: 28; }
  .nxs-why .link-btn, .nxs-sec-h .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
  #services .nxs-sort { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; }
  /* styles.css (OI-19) gives the controls of #services a 40px phone minimum with an ID selector, which beats the class rules above.
     The Onyx Next minimum is 44px, so this one is as specific as the :is() list's class makes it. */
  #services :is(button, select, input[type="search"], .prov, .nxs-open) { min-height: 44px; }
}

/* Tablets (641 to 1024px): the phone block's 44px minimum, id-scoped the same way (controls measured 18 to 41px). */
@media (min-width: 641px) and (max-width: 1024px) {
  #services :is(button, select, input[type="search"], .prov, .nxs-open) { min-height: 44px; }
  #service-telemetry-detail :is(button, .prov, .nxs-link, .detail-breadcrumb-link) { min-height: 44px; }
  #service-drawer :is(button, .nxs-link), #service-drawer .nxs-d-tabs button { min-height: 44px; }
  #services :is(.nxs-open, .nxs-sort), #service-telemetry-detail :is(.nxs-link, .detail-breadcrumb-link), #service-drawer .nxs-link { display: inline-flex; align-items: center; }
}

/* /assets/next/pages/respond.css */
/* Onyx Next: respond pages. Page-specific layout only; shared parts live in ../next.css and ../ui.js.
   Pages: Alert Rules (#alerts), Incidents (#incidents), Investigations (#investigations, #investigation-detail),
   SLOs (#slos) and, lightly, Guardians (#guardians), AIOps (#aiops) and Workflows (#workflows).
   Class prefix rs- is this file's own. Tokens only: no hex or rgba colours, no !important. */

/* ==========================================================================
   Shared by every respond page
   ========================================================================== */
/* A name stays on one line while it fits, and wraps inside its own box when it cannot (a long name with no spaces). */
.rs-nw { display: inline-block; max-width: 100%; font-weight: 550; overflow-wrap: anywhere; }
.rs-icon-btn { min-width: 36px; padding: 0; }
.rs-start { justify-content: flex-start; }
.rs-pad { padding: 16px; display: grid; gap: 12px; align-content: start; }

/* A panel that holds a table or a feed: edge to edge, with its own header strip. */
.panel.rs-flush { padding: 0; gap: 0; overflow: hidden; align-content: start; }
.rs-panel-head { padding: 14px 16px; border-bottom: 1px solid var(--hairline); align-items: flex-start; }
.rs-panel-head h3 { font-size: 15px; }
.rs-panel-head p { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.rs-subhead { border-top: 1px solid var(--hairline); }
.rs-foot-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 12.5px; }
.rs-foot-note .ph { margin-top: 2px; }

/* Answer first: a verdict strip with the numbers behind the sentence. */
.panel.rs-verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 16px 20px; align-items: center; }
.rs-verdict-main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.rs-vicon { width: 40px; height: 40px; border-radius: var(--r-panel); display: grid; place-items: center; font-size: 22px; flex: none; background: var(--s3); color: var(--ink-2); }
.rs-vicon.is-crit { background: var(--crit-soft); color: var(--crit); }
.rs-vicon.is-warn { background: var(--warn-soft); color: var(--warn); }
.rs-vicon.is-ok { background: var(--ok-soft); color: var(--ok); }
.rs-vicon.is-low, .rs-vicon.is-none { background: var(--low-soft); color: var(--ink-2); border: 1px dashed var(--hairline-hi); }
.rs-verdict h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
.rs-verdict-main p { margin-top: 6px; max-width: 68ch; color: var(--ink-2); }
.rs-asof { position: relative; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
/* The provenance popover opens under the whole row and never wider than the screen. */
.rs-asof .pop { position: static; }
.rs-asof .pop-card { left: 0; right: auto; width: min(340px, 100%); }
.rs-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 28px; justify-content: flex-end; }
.rs-stat { display: flex; flex-direction: column; gap: 4px; min-width: 64px; }
.rs-stat b { font-size: 26px; font-weight: 550; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.rs-stat span { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rs-stat.is-crit b { color: var(--crit); }
.rs-stat.is-ok b { color: var(--ok); }
.rs-stat.is-warn b { color: var(--warn); }
.rs-stat.is-none b, .rs-stat.is-low b { color: var(--ink-2); }

.rs-callout { margin: 0; }
.rs-callout p { margin: 0; flex: 1 1 auto; }
.rs-read-notice .secondary-btn { flex: none; margin-left: auto; }
.rs-read-notice .secondary-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.rs-gate { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
.rs-gate:disabled { opacity: 0.55; }

/* Tabs: the existing .alert-tab-btn buttons, drawn as the shared .tabs component. */
.rs-tabs { gap: 20px; }
.rs-tabs button, .rs-tabs button.alert-tab-btn, .rs-tabs button.alert-tab-btn.active {
  border: 0; border-radius: 0; background: none; padding: 10px 2px 11px; color: var(--ink-3); font-weight: 500; font-size: 13.5px;
}
.rs-tabs button:hover { color: var(--ink); background: none; }
.rs-tabs button { position: relative; }
.rs-tabs button[aria-current="true"], .rs-tabs button.alert-tab-btn.active { color: var(--ink); }
.rs-tabs button[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.rs-tabs .badge { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; }

.rs-new-btn { white-space: nowrap; }
.page-header-actions { gap: 12px; }

/* Rules and lists as dense tables: sticky-feeling header strip, hairline rows, status pill first. */
.rs-table-wrap { container-type: inline-size; overflow-x: auto; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rs-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 16px; text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); background: var(--s2); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.rs-table tbody th, .rs-table tbody td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); background: transparent; color: var(--ink); font-weight: 400; white-space: normal; }
.rs-table tbody tr:last-child > * { border-bottom: 0; }
.rs-table tbody tr:hover > * { background: var(--s2); }
.rs-table .rs-name { display: grid; gap: 4px; min-width: 150px; }
.rs-table .rs-name .badge { padding: 0 8px; }
.rs-table .rs-name strong { font-weight: 550; overflow-wrap: anywhere; }
.rs-table p { margin: 0; }
.rs-table p + p { margin-top: 3px; }
.rs-table .small-meta { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.rs-table code { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 6px; padding: 0 6px; font-size: 11.5px; }
.rs-table .rs-cond { min-width: 240px; max-width: 420px; }
.rs-table .rs-cond > p:first-child { color: var(--ink); }
.rs-table .rs-state { min-width: 170px; max-width: 280px; }
.rs-table .rs-state .status { margin-bottom: 6px; }
.rs-table .rs-notify { display: flex; gap: 6px; align-items: baseline; margin-top: 6px; }
.rs-table .rs-actions { width: 1%; text-align: right; }
.rs-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 190px; }
.rs-table .ghost-btn, .rs-table .secondary-btn, .rs-alert-actions .ghost-btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.rs-table tr.is-paused .rs-name strong { color: var(--ink-2); }
.rs-table tr.rs-subrow > td { background: var(--s2); border-bottom: 1px solid var(--hairline); padding: 12px 16px 14px; }
.rs-table tr.rs-subrow:hover > td { background: var(--s2); }
.alert-rule-channels-editor { display: grid; gap: 10px; max-width: 520px; }
.alert-rule-channels-editor .alert-channel-picker { margin: 0; }
.alert-rule-channels-editor .action-row { justify-content: flex-start; }

/* Feeds: a stack of rows with a hairline between, in place of a stack of cards. */
.rs-feed { display: flex; flex-direction: column; }
.rs-feed > .rs-line, .rs-feed > .dashboard-item { border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; padding: 14px 16px; transform: none; }
.rs-feed > :last-child { border-bottom: 0; }
/* Recent alerts: the "Declared incidents (not from rules)" and "No longer open" headings, and "No open rule alerts." */
.rs-feed > .a14-alert-group-heading { margin: 0; padding: 12px 16px 6px; border-bottom: 1px solid var(--hairline); }
.rs-feed > p.small-meta:not(.rs-aside-empty) { margin: 0; padding: 14px 16px 0; }
.rs-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rs-line strong { font-weight: 550; overflow-wrap: anywhere; }
.rs-line-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rs-aside-empty { padding: 16px; color: var(--ink-3); }

.rs-alert { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); position: relative; }
.rs-alert.is-selected { background: var(--accent-soft); }
.rs-alert.is-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.rs-alert.is-closed .rs-alert-title strong { color: var(--ink-2); font-weight: 500; }
.rs-alert-ico { font-size: 20px; margin-top: 1px; }
.rs-alert-ico.is-crit { color: var(--crit); }
.rs-alert-ico.is-warn { color: var(--warn); }
.rs-alert-ico.is-ok { color: var(--ok); }
.rs-alert-ico.is-info { color: var(--accent); }
.rs-alert-main { min-width: 0; display: grid; gap: 4px; }
.rs-alert-main p { margin: 0; }
.rs-alert-title { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.rs-alert-title strong { font-weight: 550; font-size: 14px; overflow-wrap: anywhere; }
.rs-alert-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rs-alert .small-meta { overflow-wrap: anywhere; }
.rs-alert .small-meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.rs-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.panel.rs-flush.rs-aside { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; }

/* Severity badges keep their word and are written in sentence case. */
.rs-sev { text-transform: capitalize; }

/* Legacy empty state, drawn the Next way: left aligned, says what is missing, one action. */
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state {
  align-items: flex-start; text-align: left; gap: 8px; padding: 28px 20px; color: var(--ink-3);
}
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state-icon { color: var(--ink-3); opacity: 1; margin-bottom: 2px; }
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state-title { font-size: 15px; font-weight: 600; color: var(--ink); }
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state-message { font-size: 13.5px; max-width: 56ch; color: var(--ink-3); }
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state-actions { display: flex; gap: 8px; margin-top: 8px; }
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state .primary-btn,
:is(#alerts, #incidents, #investigations, #investigation-detail, #slos, #guardians, #aiops, #workflows) .empty-state .ghost-btn { margin-top: 0; }
.rs-empty-panel { padding: 0; }

/* Timeline rail: the same vertical rail, on tokens. */
:is(#alerts, #incidents, #investigation-detail) .timeline-rail { padding: 16px; gap: 0; }
:is(#alerts, #incidents, #investigation-detail) .timeline-event::before { background: var(--hairline-strong); }
:is(#alerts, #incidents, #investigation-detail) .timeline-dot.good { background: var(--ok-soft); border-color: var(--ok); }
:is(#alerts, #incidents, #investigation-detail) .timeline-dot.warn { background: var(--warn-soft); border-color: var(--warn); }
:is(#alerts, #incidents, #investigation-detail) .timeline-dot.bad { background: var(--crit-soft); border-color: var(--crit); }
:is(#alerts, #incidents, #investigation-detail) .timeline-body p { color: var(--ink-2); }

/* ==========================================================================
   Drawer: create and edit forms open from the right, over a scrim, instead of taking half the page
   ========================================================================== */
/* Above the phone header (900) and the nav drawer (950), below confirm dialogs (1500). */
.rs-scrim { position: fixed; inset: 0; z-index: 1400; background: var(--scrim); }
.rs-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1401; width: min(560px, 100vw); display: flex; flex-direction: column;
  background: var(--s1); border-left: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop); color: var(--ink);
}
.rs-scrim[hidden], .rs-drawer[hidden] { display: none; }
body:has(.section.active .rs-drawer:not([hidden])) { overflow: hidden; }
.rs-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.rs-drawer-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.rs-drawer-head p { margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.rs-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.rs-drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--hairline); background: var(--s1); }
.rs-foot-error { margin: 0 auto 0 0; flex: 1 1 200px; }
.rs-group { border: 0; margin: 0; padding: 0 0 20px; min-width: 0; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--hairline); }
.rs-group:last-child { border-bottom: 0; padding-bottom: 0; }
.rs-group > legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.rs-fields { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.rs-fields.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs-fields .ui-field-hint { font-size: 12px; }
.rs-fields .rs-field-note, .rs-fields .a14-picker { grid-column: 1 / -1; }
.rs-drawer :is(input, select, textarea) { width: 100%; }
.rs-drawer input[type="checkbox"], .rs-drawer input[type="radio"] { width: auto; }
.rs-drawer .alert-channel-picker { display: grid; gap: 8px; }
.rs-drawer .alert-channel-picker label { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); background: var(--s2); color: var(--ink); }
.rs-drawer .alert-channel-picker legend { padding: 0; margin: 0 0 6px; }

/* The rule sentence: the condition in plain words, kept in step with the fields above it. */
.rs-sentence { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-ctl); padding: 10px 12px; display: grid; gap: 4px; }
.rs-sentence-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.rs-sentence p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; }

/* Alert type picker, on the surface ladder. Icons take the text colour instead of a per-type fill. */
#alerts .alert-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#alerts .alert-type-card {
  flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); color: var(--ink); font-size: 13px; font-weight: 500; min-height: 44px; padding: 8px 10px; line-height: 1.25;
}
#alerts .alert-type-card .small-meta { flex-basis: 100%; font-weight: 400; font-size: 11.5px; }
#alerts .alert-type-card:hover { border-color: var(--hairline-hi); background: var(--s2); }
#alerts .alert-type-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
#alerts .alert-type-icon { background: var(--s3); color: var(--ink-2); width: 28px; height: 28px; }
#alerts .alert-type-card.selected .alert-type-icon { background: var(--accent); color: var(--accent-ink); }
#alerts .alert-type-icon svg [stroke] { stroke: currentColor; }
#alerts .alert-type-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
#alerts .alert-type-card[disabled] { opacity: 0.55; }

.composite-builder { display: grid; gap: 12px; }
.composite-operator { display: flex; flex-wrap: wrap; gap: 8px; }
.composite-combine-btn {
  min-height: 36px; padding: 6px 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--hairline-strong); background: var(--s1); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.composite-combine-btn.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.composite-condition {
  display: grid; gap: 10px; padding: 12px; border: 1px solid var(--hairline-strong);
  border-radius: var(--r-ctl); background: var(--s1);
}
.composite-condition-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.composite-preview-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.composite-preview-list li { line-height: 1.45; }
.rs-detail-actions { padding: 0 16px 12px; }
#alert-rule-detail-h + p { margin: 4px 0 0; color: var(--ink-2); }

/* ==========================================================================
   Lists with a detail beside them (Incidents, SLOs): the list keeps its place, the detail opens next to it
   ========================================================================== */
.rs-master { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.rs-master.has-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* .panel.rs-flush clips with overflow: hidden, so the detail needs the same weight or its own scroll never runs. */
.panel.rs-flush.rs-detail { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; }
.rs-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; padding: 12px 16px; border-bottom: 1px solid var(--hairline); background: var(--s1); }
.rs-toolbar .ui-field { min-width: 160px; }
.rs-title-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 550; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.rs-title-btn:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rs-title-btn[aria-current="true"] { color: var(--accent); }
.rs-row.is-selected { background: var(--accent-soft); }
.rs-table tbody tr.rs-row.is-selected > *, .rs-table tbody tr.rs-row.is-selected:hover > * { background: transparent; }
.rs-when { white-space: nowrap; }
.rs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 20px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.rs-facts dt { font-size: 12px; color: var(--ink-3); }
.rs-facts dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.rs-detail-section { padding: 14px 16px; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.rs-detail-section h4 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rs-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rs-signals { display: grid; gap: 8px; }
.rs-fields .ui-field { min-width: 0; }
.rs-fields :is(input, select, textarea) { width: 100%; min-width: 0; }
.rs-fields-with-action { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.rs-fields-with-action > :nth-child(3) { grid-column: 1 / -1; }
.rs-fields-with-action > button { justify-self: start; }
.rs-edit { border-bottom: 0; gap: 14px; }
.rs-update-row { grid-template-columns: minmax(0, 1fr) auto; }

/* Severity and timeline of an incident, on tokens (styles.css draws them with fixed colours). */
.incident-severity-badge { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 9px; }
.incident-severity-badge { text-transform: none; }
.incident-severity-badge.sev1, .incident-severity-badge.sev2, .incident-severity-badge.critical { background: var(--crit-soft); color: var(--crit); }
.incident-severity-badge.sev3, .incident-severity-badge.warning { background: var(--warn-soft); color: var(--warn); }
.incident-severity-badge.sev4, .incident-severity-badge.info { background: var(--accent-soft); color: var(--accent); }
.incident-timeline { margin-top: 0; }
.incident-timeline-entry { border-left-color: var(--hairline-strong); padding-bottom: 14px; }
.incident-timeline-entry::before { background: var(--accent); border-color: var(--s1); }
.incident-timeline-entry strong { font-weight: 550; font-size: 13.5px; }
#incidents .insight-item, #investigation-detail .insight-item { background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 10px 12px; }
#incidents .insight-item:hover, #investigation-detail .insight-item:hover { background: var(--s2); transform: none; border-color: var(--hairline-strong); }
#incidents textarea { width: 100%; }

/* ==========================================================================
   SLOs
   ========================================================================== */
.rs-stat small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rs-stat.is-crit small { color: var(--crit); }
.rs-notice { padding: 14px 16px; margin: 0; }
.rs-slos { table-layout: fixed; }
.rs-slos thead th:nth-child(2) { width: 150px; }
.rs-slos thead th:nth-child(3) { width: 150px; }
.rs-slos thead th:nth-child(4) { width: 210px; }
.rs-slos .rs-name .small-meta { line-height: 1.5; }
.rs-attain .num { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.rs-none { color: var(--ink-3); }
.rs-budget .small-meta, .rs-attain .small-meta { display: block; }
.rs-slos .kpi-tile-bar { margin: 6px 0 2px; background: var(--s3); }
.rs-slos .kpi-tile-bar-fill { background: var(--accent); }
.rs-slos .kpi-tile-bar-fill.good { background: var(--ok); }
.rs-slos .kpi-tile-bar-fill.warn { background: var(--warn); }
.rs-slos .kpi-tile-bar-fill.bad { background: var(--crit); }
/* An SLO badge keeps its tone class but is drawn like the shared status pill: icon first, no extra dot. */
.rs-slo .badge { padding: 2px 9px 2px 7px; font-size: 12px; white-space: normal; max-width: 100%; }
.rs-slo .badge::before { display: none; }
.rs-slo .badge .ph, .rs-slo .badge .ph-fill { font-size: 14px; vertical-align: 0; }
.rs-slo .badge.neutral { color: var(--ink-3); background: transparent; border: 1px dashed var(--hairline-strong); }
.slo-target-grid { gap: 8px; }
#slos .slo-target-card { background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); color: var(--ink); }
#slos .slo-target-card:hover { border-color: var(--hairline-hi); background: var(--s2); }
#slos .slo-target-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
#slos .slo-target-card-value { font-family: var(--font-mono); color: var(--ink); }
#slos .slo-target-card-label { color: var(--ink-3); }

/* ==========================================================================
   Investigation detail
   ========================================================================== */
.rs-inv-head { display: grid; gap: 10px; padding: 4px 0 0; }
.rs-inv-head h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; overflow-wrap: anywhere; }
.rs-inv-head .rs-badges { margin-top: 0; align-items: center; }
.rs-inv-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rs-inv-main, .rs-inv-side { display: grid; gap: 20px; min-width: 0; align-content: start; }
.rs-quote { margin: 0; padding: 14px 16px; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.rs-notes { display: grid; gap: 8px; padding: 12px 16px 0; }
.rs-notes > p { margin: 0; }
.rs-notes .insight-item p { margin: 4px 0 0; color: var(--ink-2); }
.rs-notes .insight-item strong { font-weight: 550; }

/* The timeline as steps: a rail, a mark per event, what happened and who did it. */
.rs-steps { list-style: none; margin: 0; padding: 8px 8px 12px; display: flex; flex-direction: column; }
.rs-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 8px; border-radius: var(--r-ctl); }
.rs-step-mark { position: relative; font-size: 18px; line-height: 1; color: var(--ink-3); padding-top: 1px; }
.rs-step:not(:last-child) .rs-step-mark::after { content: ""; position: absolute; left: 8px; top: 26px; bottom: -34px; width: 2px; background: var(--hairline-strong); border-radius: 2px; }
.rs-step.is-evidence .rs-step-mark { color: var(--warn); }
.rs-step-text { margin: 0; color: var(--ink); font-weight: 450; overflow-wrap: anywhere; }
.rs-step-body .small-meta { margin: 2px 0 0; }
.rs-step-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

/* Evidence digest: one entry per tab, the figure first. */
.rs-evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rs-ev { padding: 12px 16px; border-bottom: 1px solid var(--hairline); display: grid; gap: 2px; }
.rs-ev:last-child { border-bottom: 0; }
.rs-ev-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rs-ev-label { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.rs-ev-link { font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.rs-ev-fig { font-size: 20px; font-weight: 550; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rs-ev-fig small { font-size: 13px; font-weight: 450; color: var(--ink-2); letter-spacing: 0; margin-left: 2px; }
.rs-ev p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.rs-sub-h { margin-top: 14px; }
.rs-skel { height: 14px; }
.rs-skel:nth-child(1) { width: 90%; } .rs-skel:nth-child(2) { width: 70%; } .rs-skel:nth-child(3) { width: 80%; }
.rs-gaps { list-style: none; margin: 0; padding: 4px 16px 12px; display: flex; flex-direction: column; }
.rs-gaps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.rs-gaps li:last-child { border-bottom: 0; }
.rs-gaps .ph { margin-top: 2px; color: var(--ink-3); font-size: 16px; }
.rs-gaps b { color: var(--ink); font-weight: 550; }

#investigation-detail .investigation-pending-approval {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--accent-line); border-left-width: 3px; border-radius: var(--r-panel); background: var(--accent-soft);
}
#investigation-detail .investigation-pending-approval > .ph-fill { font-size: 20px; color: var(--accent); }
#investigation-detail .investigation-pending-approval > div { flex: 1 1 260px; min-width: 0; }
#investigation-detail .investigation-pending-approval p { margin: 2px 0 0; flex: none; }
#investigation-detail .investigation-pending-approval .primary-btn { margin-left: auto; }

/* The evidence tabs keep their own panels; they sit on the same surfaces and rows as the rest. */
#investigation-detail .panel > .panel-header { margin-bottom: 4px; }
#investigation-detail .panel h3 { font-size: 15px; }
#investigation-detail .insight-list { gap: 8px; }
#investigation-detail .insight-item strong { font-weight: 550; }
#investigation-detail .insight-item .badge { margin-left: 6px; }
#investigation-detail .insight-item .ghost-btn, #investigation-detail .insight-item .link-btn.investigation-open-trace-btn { margin-top: 6px; }
#investigation-detail .insight-item .ghost-btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
#investigation-detail .small-meta code { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 6px; padding: 0 6px; }

/* ==========================================================================
   Alert Rules
   ========================================================================== */
#alerts .a14-count-pills { gap: 6px; }

/* Narrow containers: each rule becomes a stacked card with its labels. */
@container (max-width: 880px) {
  .rs-slos { table-layout: auto; }
  .rs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rs-table, .rs-table tbody { display: block; }
  .rs-table tbody tr { display: grid; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
  .rs-table tbody tr:last-child { border-bottom: 0; }
  .rs-table tbody th, .rs-table tbody td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; }
  .rs-table tbody .rs-actions { width: auto; }
  .rs-actions-row { flex-direction: row; flex-wrap: wrap; }
  .rs-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink-3); }
  .rs-table tbody tr:hover > * { background: transparent; }
  .rs-table tr.rs-subrow { padding: 0; }
  .rs-table tr.rs-subrow > td { padding: 12px 16px; }
}

/* The incident list beside its detail is narrow: a row stays two lines (title, then severity, status, time). */
@container (max-width: 880px) {
  .rs-incidents tbody tr { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 10px; }
  .rs-incidents tbody tr > th { grid-column: 1 / -1; }
  .rs-incidents td[data-label]::before { display: none; }
  .rs-incidents .rs-when { text-align: right; white-space: normal; }
}

@media (max-width: 1280px) {
  /* One column: the evidence comes straight after the summary, before the notes and the edit form. */
  .rs-inv-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-inv-main, .rs-inv-side { display: contents; }
  .rs-p-hyp { order: 1; } .rs-p-evidence { order: 2; } .rs-p-gaps { order: 3; } .rs-p-activity { order: 4; } .rs-p-notes { order: 5; } .rs-p-status { order: 6; }
  .rs-master.has-detail { grid-template-columns: minmax(0, 1fr); }
  .panel.rs-flush.rs-detail { position: static; max-height: none; overflow: visible; }
  .rs-split { grid-template-columns: minmax(0, 1fr); }
  .panel.rs-flush.rs-aside { position: static; max-height: none; overflow: visible; }
  .panel.rs-verdict { grid-template-columns: minmax(0, 1fr); }
  .rs-stats { justify-content: flex-start; }
}
@media (max-width: 640px) {
  #investigation-detail .detail-breadcrumb-link { display: inline-flex; align-items: center; min-height: 44px; }
  #investigation-detail .explain-btn { width: 44px; height: 44px; }
  .rs-inv-head h2 { font-size: 24px; }
  .rs-ev-link { min-height: 44px; }
  .rs-asof .prov { min-height: 44px; }
  .panel.rs-verdict { padding: 16px; }
  .rs-verdict-main { gap: 12px; }
  .rs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .rs-fields.is-pair { grid-template-columns: minmax(0, 1fr); }
  .rs-update-row { grid-template-columns: minmax(0, 1fr); }
  .rs-title-btn { min-height: 44px; }
  .rs-toolbar .ui-field { flex: 1 1 140px; }
  #alerts .alert-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-drawer { width: 100vw; border-left: 0; }
  .rs-drawer-head, .rs-drawer-body, .rs-drawer-foot { padding-inline: 16px; }
  .rs-drawer-foot > button { flex: 1 1 0; }
  .rs-drawer :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button), .rs-toolbar :is(select, input) { min-height: 44px; }
  /* The drawers sit inside #alerts, #incidents, #investigations and #slos; styles.css gives the controls in #alerts and #slos a 40px
     minimum (OI-19 #335) through an id selector, so the drawer's own 44px needs the same weight to win. */
  :is(#alerts, #incidents, #investigations, #slos) .rs-drawer :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) { min-height: 44px; }
  .rs-icon-btn, :is(#alerts, #incidents, #investigations, #slos) .rs-drawer .rs-icon-btn { min-width: 44px; min-height: 44px; }
  .rs-tabs { gap: 16px; }
  .rs-tabs button { min-height: 44px; }
  .rs-table .ghost-btn, .rs-table .secondary-btn, .rs-alert-actions .ghost-btn { min-height: 44px; padding: 0 14px; }
  .rs-new-btn { min-height: 44px; }
  .page-header-actions { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-drawer, .rs-scrim { transition: none; animation: none; }
}

/* ==========================================================================
   Guardians, AIOps, Workflows: the same components, drawn on the same surfaces (no new structure)
   ========================================================================== */
:is(#guardians, #aiops, #workflows) :is(.dashboard-item, .insight-item) {
  background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-ctl); transform: none;
}
:is(#guardians, #aiops, #workflows) :is(.dashboard-item, .insight-item):hover { background: var(--s2); border-color: var(--hairline-strong); transform: none; }
:is(#guardians, #aiops, #workflows) .dashboard-list, :is(#guardians, #aiops, #workflows) .insight-list { gap: 8px; }
:is(#guardians, #aiops, #workflows) :is(.dashboard-item, .insight-item) strong { font-weight: 550; }
:is(#guardians, #aiops, #workflows) .action-row .ghost-btn, :is(#guardians, #aiops) .dashboard-item .ghost-btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }

/* Workflow step marks: one neutral tile, the glyph takes the text colour. */
#workflows .workflow-step-icon, #workflows .workflow-step-icon.large {
  background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline); box-shadow: none;
}
#workflows .workflow-step-icon svg [stroke] { stroke: currentColor; }
#workflows .workflow-step-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
#workflows .wf-template-card { background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); box-shadow: none; }
#workflows .wf-template-card:hover { background: var(--s2); border-color: var(--hairline-strong); transform: none; }
#workflows .wf-template-card-unmet { border-style: dashed; border-color: var(--hairline-hi); }
#workflows .wf-template-reason { color: var(--warn); }
#workflows .wf-template-link { color: var(--accent); text-underline-offset: 3px; }
#workflows .wf-template-group { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
#workflows .workflow-step-type-chip { background: var(--s1); border-color: var(--hairline-strong); color: var(--ink); }
#workflows .workflow-step-type-chip:hover { background: var(--s2); border-color: var(--hairline-hi); }
#workflows .workflow-step-type-chip.selected { border-color: var(--accent); background: var(--accent-soft); }

/* Guardian choice chips and the pinned-condition box, on tokens. */
#guardians .guardian-chip, .guardian-dialog .guardian-chip { background: var(--s1); border-color: var(--hairline-strong); color: var(--ink); }
.guardian-dialog .guardian-chip.is-selected, .guardian-dialog .guardian-chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.guardian-dialog .guardian-condition-pinned { background: var(--s2); border-color: var(--hairline-strong); color: var(--ink); }
.guardian-dialog .guardian-dialog-head, .guardian-dialog .guardian-dialog-actions { border-color: var(--hairline); }

@media (max-width: 640px) {
  :is(#guardians, #aiops, #workflows) :is(.dashboard-item, .insight-item) { flex-wrap: wrap; }
  :is(#guardians, #aiops) .dashboard-item .ghost-btn, #workflows .action-row .ghost-btn, #workflows .action-row .secondary-btn { min-height: 44px; padding: 0 14px; }
  #workflows .wf-template-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* /assets/next/pages/explore.css */
/* Onyx Next: explore pages. Page-specific layout only; shared parts live in ../next.css and ../ui.js.
   Pages: Query Studio (#query), Logs (#logs, #log-detail), Traces (#traces, #trace-detail), Metrics (#metrics),
   Analytics (#analytics) and the Ask Onyx Oracle drawer (#ai-analyst-dialog). Tokens only; every rule is scoped by the
   page's section id so it beats the older rules in styles.css without !important. */

/* ==========================================================================
   Shared by the explore pages
   ========================================================================== */
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .panel { padding: 0; gap: 0; display: block; }
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .panel-header {
  padding: 14px 16px; border-bottom: 1px solid var(--hairline); align-items: flex-start; gap: 12px;
}
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .panel-header h3 { margin: 0; }
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .panel-header p { color: var(--ink-3); font-size: 13px; margin: 2px 0 0; }
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .qs-help,
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .xp-help { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; margin: 0; }
:is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  :is(#query, #logs, #log-detail, #traces, #trace-detail, #metrics, #analytics) .prov { min-height: 44px; }
}

.xp-w-55 { width: 55%; } .xp-w-70 { width: 70%; } .xp-w-76 { width: 76%; } .xp-w-84 { width: 84%; } .xp-w-90 { width: 90%; }
.xp-fig-sk { width: 120px; height: 34px; }

/* ==========================================================================
   Query Studio
   ========================================================================== */
#query .qs-layout { display: grid; grid-template-columns: minmax(340px, 408px) minmax(0, 1fr); gap: 16px; align-items: start; }
#query .qs-side, #query .qs-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ----- saved queries rail ----- */
#query .qs-rail { display: block; }
#query .qs-rail-sum {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none;
  font-weight: 550; font-size: 13.5px; color: var(--ink); border-radius: var(--r-panel);
}
#query .qs-rail-sum::-webkit-details-marker { display: none; }
#query .qs-rail-sum:hover { background: var(--s2); }
#query .qs-rail-sum .ph-caret-down { margin-left: auto; color: var(--ink-3); transition: transform 0.15s; }
#query .qs-rail[open] > .qs-rail-sum { border-bottom: 1px solid var(--hairline); border-radius: var(--r-panel) var(--r-panel) 0 0; }
#query .qs-rail[open] > .qs-rail-sum .ph-caret-down { transform: rotate(180deg); }
#query .qs-rail-body { padding: 10px 8px 10px; display: grid; gap: 8px; }
#query .qs-rail-body > .qs-help { padding: 0 8px; }
#query .qs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 268px; overflow-y: auto; }
#query .qs-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 8px 8px 10px; border-radius: var(--r-ctl); }
#query .qs-item:hover { background: var(--s2); }
#query .qs-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#query .qs-item .nm { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
#query .qs-item .sn { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; background: none; padding: 0; border: 0; }
#query .qs-item .mt { font-size: 11.5px; color: var(--ink-3); }
#query .qs-item-actions { display: flex; align-items: center; gap: 2px; flex: none; }
#query .qs-load { min-height: 30px; padding: 0 10px; font-size: 13px; }
#query .qs-rail-empty { display: flex; gap: 12px; align-items: flex-start; padding: 4px 8px; color: var(--ink-3); }
#query .qs-rail-empty .ph { font-size: 22px; margin-top: 2px; }
#query .qs-rail-empty strong { display: block; color: var(--ink); font-weight: 550; }
#query .qs-rail-empty p { margin: 2px 0 0; }

/* ----- builder ----- */
#query .qs-glance {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--s2) 55%, transparent);
}
#query .qs-glance .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#query .qs-glance .chip .ph { color: var(--ink-3); }
#query .qs-glance .chip--accent .ph { color: var(--accent); }
#query .qs-sec-top { padding: 14px 16px; }
#query .qs-grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; }
#query .qs-span2 { grid-column: 1 / -1; }
#query .qs-field { display: grid; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); min-width: 0; }
#query .qs-field > span { color: var(--ink-2); }
#query .ui-field { display: grid; gap: 4px; min-width: 0; }
#query .ui-field-label { margin: 0; }
#query .ui-field-hint { margin: 0; font-size: 12px; color: var(--ink-3); }

#query .qs-sec { margin: 0; padding: 14px 16px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; display: grid; gap: 10px; min-width: 0; }
#query .qs-sec > legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
#query .qs-sec > legend .ui-field-optional { font-weight: 400; color: var(--ink-3); }
#query .qs-rows { display: grid; gap: 10px; }
#query .qs-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
#query .qs-add-row .ui-field { flex: 1 1 160px; }
#query .qs-add { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* one plain-language row per filter, group and calculation */
#query .qs-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 6px 8px; align-items: center; margin: 0; }
#query .qs-row select, #query .qs-row input {
  width: 100%; min-width: 0; min-height: 36px; padding: 6px 10px; font-size: 13px; background: var(--s1); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl);
}
#query .qs-row select:hover, #query .qs-row input:hover { border-color: var(--hairline-hi); }
#query .qs-row [hidden] { display: none; }
#query .qs-lead { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--ink-3); white-space: nowrap; align-self: center; }
#query .qs-row .qs-x { grid-column: 4; grid-row: 1; }
#query .qs-x { min-width: 36px; width: 36px; padding: 0; min-height: 36px; background: transparent; border-color: transparent; color: var(--ink-3); }
#query .qs-x:hover { background: var(--s3); color: var(--ink); border-color: var(--hairline-strong); }
#query .studio-filter-field, #query .studio-agg-fn, #query .studio-formula-id, #query .studio-having-column { grid-column: 2; }
#query .studio-filter-op, #query .studio-agg-field, #query .studio-countif-op { grid-column: 3; }
#query .studio-group-field { grid-column: 2 / 4; }
#query .studio-formula-id, #query .studio-having-column { grid-column: 2 / 4; }
#query .studio-filter-key, #query .studio-filter-value, #query .studio-group-key, #query .studio-agg-key, #query .studio-agg-alias,
#query .studio-countif-key, #query .studio-countif-value, #query .studio-formula-expr { grid-column: 2 / 4; }
#query .studio-countif-field { grid-column: 2; }
#query .studio-agg-fn:has(+ .studio-agg-field[hidden]) { grid-column: 2 / 4; }
#query .studio-row[data-kind="having"] .studio-having-op { grid-column: 2; }
#query .studio-row[data-kind="having"] .studio-having-value { grid-column: 3; }
#query .studio-formula-error { grid-column: 2 / 4; }
#query .studio-formula-error:empty { display: none; }
#query .studio-formula-expr { font-family: var(--font-mono); }
#query .studio-row .studio-filter-value, #query .studio-row .studio-countif-value { font-family: var(--font-mono); font-size: 12.5px; }

/* the OQL editor: a disclosure at the end of the form */
#query .qs-oql { border-top: 1px solid var(--hairline); }
#query .qs-oql > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; font-weight: 550; font-size: 13.5px; color: var(--ink-2); }
#query .qs-oql > summary:hover { color: var(--ink); background: var(--s2); }
#query .qs-oql > summary .ph { color: var(--ink-3); }
#query .qs-oql-body { padding: 4px 16px 16px; display: grid; gap: 10px; }
#query #studio-oql {
  width: 100%; min-height: 148px; padding: 10px 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; resize: vertical;
  background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel);
}
#query #studio-oql-highlight {
  margin: 0; padding: 10px 12px; max-height: 180px; overflow: auto; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
#query #studio-oql-highlight:empty { display: none; }
#query .oql-word { color: color-mix(in srgb, var(--accent) 82%, var(--ink)); }
#query .oql-string { color: color-mix(in srgb, var(--ok) 82%, var(--ink)); }
#query .oql-number { color: color-mix(in srgb, var(--warn) 82%, var(--ink)); }
#query #studio-oql-suggestions { display: flex; flex-wrap: wrap; gap: 4px; }
#query #studio-oql-suggestions:empty { display: none; }
#query #studio-oql-suggestions button { min-height: 28px; padding: 0 8px; font-family: var(--font-mono); font-size: 12px; }
#query .qs-oql-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#query #studio-oql-error:empty { display: none; }

/* save sits at the end of the form; Run stays in reach while the form scrolls */
#query .qs-save-row { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--hairline); }
#query .qs-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
#query .qs-save input { min-height: 36px; }
#query .qs-notice { margin: 0; font-size: 12.5px; color: var(--ink-2); }
#query .qs-notice:empty { display: none; }
#query .qs-foot {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; padding: 12px 16px; background: var(--s1);
  border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r-panel) var(--r-panel);
}
#query .qs-foot .primary-btn { flex: 1; }
#query .qs-loading { padding: 16px; display: grid; gap: 10px; }
#query .qs-alert { margin: 12px 16px 0; }
#query .qs-alert p { margin: 0; }
#query .qs-builder > .qs-alert:last-child { margin-bottom: 12px; }
#query .qs-alert .ghost-btn { margin-left: 8px; min-height: 30px; }
#query .studio-builder button[disabled] { opacity: 0.45; }

/* ----- results ----- */
#query .qs-results { overflow: hidden; }
#query .qs-res-head { align-items: center; }
#query .qs-res-aside .pop-card { left: auto; right: 0; }
#query .qs-answer { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 16px; border-bottom: 1px solid var(--hairline); }
#query .qs-fig { font-size: 36px; font-weight: 550; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
#query .qs-fig small { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; font-weight: 450; color: var(--ink-3); margin-left: 8px; }
#query .qs-ans-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 220px; }
#query .qs-ans-txt strong { font-weight: 550; }
#query .qs-ans-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#query .qs-ans-chips .chip .ph, #query .qs-ans-chips .chip .ph-fill { color: var(--ink-3); }
#query .qs-ans-chips .is-warn-chip { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
#query .qs-ans-chips .is-warn-chip .ph-fill { color: var(--warn); }
#query .qs-tabs { padding: 0 16px; }
#query .qs-tabs .qs-tab .ph { font-size: 15px; }
#query .qs-scroll { max-height: 440px; overflow: auto; }
#query .studio-table { width: 100%; border-collapse: collapse; }
#query .studio-table th {
  position: sticky; top: 0; z-index: 1; background: var(--s1); padding: 9px 16px; font-size: 12px; font-weight: 500; color: var(--ink-3);
  border-bottom: 1px solid var(--hairline); white-space: nowrap; text-transform: none; letter-spacing: 0;
}
#query .studio-table td { padding: 9px 16px; font-size: 13px; border-bottom: 1px solid var(--hairline); max-width: 420px; vertical-align: top; }
#query .studio-table tbody tr:last-child td { border-bottom: 0; }
#query .studio-table td.num, #query .studio-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#query .studio-table th.num { font-family: var(--font-body); }
#query .studio-table .studio-trace-link { min-height: 24px; padding: 1px 8px; font-size: 12px; }
#query .studio-json { font-family: var(--font-mono); font-size: 12px; background: none; border: 0; padding: 0; }
#query .qs-chart-pad { padding: 16px; }
#query .qs-chart { margin: 0; display: grid; gap: 8px; }
#query .qs-chart figcaption { font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
#query .studio-chart-row { display: grid; grid-template-columns: minmax(80px, 170px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
#query .studio-chart-row > span:first-child { overflow-wrap: anywhere; color: var(--ink-2); }
#query .studio-chart-row > .num { font-size: 12.5px; text-align: right; }
#query .studio-chart-row meter { width: 100%; height: 10px; appearance: none; background: none; border: 0; }
#query meter::-webkit-meter-bar { background: var(--s3); border: 0; border-radius: 5px; height: 10px; }
#query meter::-webkit-meter-optimum-value, #query meter::-webkit-meter-suboptimum-value, #query meter::-webkit-meter-even-less-good-value { background: var(--c1); border-radius: 5px; }
#query meter::-moz-meter-bar { background: var(--c1); border-radius: 5px; }

#query .qs-query { padding: 14px 16px; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
#query .qs-query-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#query .qs-query-head h4 { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink); }
#query .qs-query-head h4 .ph { color: var(--ink-3); }
#query .qs-query .copy-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
#query .qs-code { max-height: 232px; font-size: 12.5px; }
#query .qs-code pre { white-space: pre; font-size: 12.5px; line-height: 1.65; }
#query .qs-code .qs-pipe { color: var(--ink-3); }
#query .qs-sql summary { cursor: pointer; font-size: 12.5px; color: var(--ink-3); padding: 4px 0; }
#query .qs-sql .nx-code { margin-top: 8px; max-height: 200px; }
#query .qs-sql pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: none; padding: 10px 12px; }
#query .qs-foot-meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--hairline); background: var(--s2);
  font-size: 12.5px; color: var(--ink-3); margin: 0;
}
#query .qs-results > .qs-alert { margin: 12px 16px 0; }
#query .qs-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--hairline); margin: 0; }
#query .qs-actions .qs-field { min-width: 200px; flex: 0 1 260px; }
#query .qs-actions .qs-help { flex: 1 1 100%; }

#query .qs-state { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
#query .qs-state > .ph { font-size: 28px; color: var(--ink-3); }
#query .qs-state h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
#query .qs-state p { margin: 0; color: var(--ink-3); max-width: 62ch; }
#query .qs-state .callout { width: 100%; }
#query .qs-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
#query .qs-examples-label { font-size: 12.5px; color: var(--ink-3); }
#query .qs-example { cursor: pointer; min-height: 32px; padding: 4px 10px; font-size: 13px; color: var(--ink); background: var(--s2); }
#query .qs-example:hover { border-color: var(--accent-line); background: var(--s3); }
#query .qs-sk { gap: 12px; }
#query .qs-sk-run { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
#query .qs-sk-run .ph { animation: xp-spin 0.9s linear infinite; }
#query #studio-run .ph, #query #studio-run .ph-fill { font-size: 1.1em; }
#query #studio-run .ph-circle-notch { animation: xp-spin 0.9s linear infinite; }
@keyframes xp-spin { to { transform: rotate(360deg); } }
#query .empty-state { align-items: flex-start; text-align: left; padding: 28px 24px; }

@media (max-width: 1180px) { #query .qs-layout { grid-template-columns: minmax(320px, 372px) minmax(0, 1fr); } }
@media (max-width: 860px) {
  #query .qs-layout { grid-template-columns: minmax(0, 1fr); }
  #query .qs-foot { position: static; }
  #query .qs-list { max-height: none; }
}
@media (max-width: 640px) {
  /* styles.css gives #query's buttons and selects an ID-scoped 40px minimum (OI-19) that beats class rules; this has the
     same specificity and loads later, so the 44px these controls are designed for wins. */
  #query :is(button, a.primary-btn, a.secondary-btn, a.ghost-btn, select) { min-height: 44px; }
  #query .qs-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 44px; }
  #query select, #query input:not([type="checkbox"]):not([type="radio"]), #query .qs-oql a { min-height: 44px; }
  #query .qs-oql a { display: inline-flex; align-items: center; }
  #query .qs-row select, #query .qs-row input, #query .qs-save input, #query .qs-x, #query .qs-add, #query .qs-load, #query .qs-rail-sum,
  #query .qs-oql > summary, #query .qs-example, #query .qs-tabs button, #query .qs-query .copy-btn, #query #studio-oql-suggestions button { min-height: 44px; }
  #query .qs-x { width: 44px; min-width: 44px; }
  #query .qs-grid2 { grid-template-columns: minmax(0, 1fr); }
  #query .qs-save { grid-template-columns: minmax(0, 1fr); }
  #query .qs-fig { font-size: 30px; }
  #query .qs-answer, #query .qs-glance { padding-left: 12px; padding-right: 12px; }
  #query .qs-state { padding: 20px 12px; }
  #query .studio-chart-row { grid-template-columns: minmax(64px, 110px) minmax(0, 1fr) auto; gap: 8px; }
}

/* ==========================================================================
   Logs
   ========================================================================== */
#logs .lg-summary { display: grid; gap: 12px; }
#logs .lg-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#logs .lg-verdict p { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
#logs .lg-summary .kpi-tile { padding: 12px 16px; min-height: 0; gap: 4px; }
#logs .lg-summary .kpi-tile-value { font-size: 24px; }

#logs .lg-panel { overflow: hidden; }
#logs .lg-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
#logs .lg-toolbar .ui-field { display: grid; gap: 4px; flex: 0 1 190px; min-width: 0; }
#logs .lg-toolbar .ui-field-label { margin: 0; }
#logs .lg-toolbar .ui-field-hint { margin: 0; font-size: 12px; color: var(--ink-3); }
#logs .lg-tb-search { flex: 1 1 280px; min-width: 220px; }
#logs .lg-tb-search .ui-field { flex: none; }
#logs .lg-toolbar .lg-tb-severity { flex: 0 0 auto; }
#logs .lg-seg { flex-wrap: nowrap; }
#logs .lg-search { position: relative; display: block; }
#logs .lg-search > .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
#logs .lg-search input { width: 100%; padding-left: 34px; min-height: 36px; }
#logs .lg-toolbar select { width: 100%; min-height: 36px; }
#logs .logs-range-readout {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px dashed var(--hairline-hi);
  border-radius: var(--r-ctl); color: var(--ink-2); background: transparent; white-space: nowrap;
}
#logs .logs-range-readout .ph { color: var(--ink-3); }
#logs .lg-tb-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 4px; border-top: 1px solid var(--hairline); margin-top: 2px; }
#logs .lg-tb-actions > .logs-tail-control { flex: 1 1 auto; }
#logs .lg-tb-actions > #logs-facets-toggle { margin-left: auto; }
#logs .logs-tail-control { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#logs .logs-tail-hint { margin: 0; font-size: 12.5px; }
#logs .logs-tail-toggle { gap: 8px; }
#logs .logs-tail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-hi); }
#logs .logs-tail-toggle.is-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
#logs .logs-tail-toggle.is-on .logs-tail-dot { background: var(--ok); }
#logs .lg-tb-actions .ghost-btn { min-height: 36px; white-space: nowrap; }

#logs .logs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--hairline); }
#logs .logs-chips:empty { display: none; }
#logs-chips:empty { display: none; }
#logs .logs-chip { display: inline-flex; align-items: center; max-width: 100%; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 99px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink); font-size: 12.5px; }
#logs .logs-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logs .logs-chip-remove { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
#logs .logs-chip-remove:hover, #logs .logs-chip-remove:focus-visible { background: var(--s4); color: var(--ink); }
#logs .logs-chips .link-btn { font-size: 12.5px; margin-left: 4px; }

#logs .lg-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; align-items: start; }
#logs .lg-layout.facets-hidden { grid-template-columns: minmax(0, 1fr); }
#logs .lg-facets {
  display: grid; gap: 16px; padding: 14px 10px 16px 16px; border-right: 1px solid var(--hairline); min-width: 0;
  position: sticky; top: calc(var(--topbar-h) + 8px); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow-y: auto; align-content: start;
}
#logs .lg-facets[hidden] { display: none; }
#logs .logs-facets-note { margin: 0; font-size: 12px; color: var(--ink-3); }
#logs .logs-facet-title { margin: 0 0 4px; padding: 0 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
#logs .logs-facet-values { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
#logs .logs-facet-value {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 3px 6px; border: 1px solid transparent;
  border-radius: var(--r-ctl); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
#logs .logs-facet-value:hover, #logs .logs-facet-value:focus-visible { background: var(--s2); color: var(--ink); }
#logs .logs-facet-value.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
#logs .logs-facet-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logs .logs-facet-count { flex: none; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

#logs .logs-results { min-width: 0; }
#logs .logs-results[aria-busy="true"] .logs-table-wrap { opacity: 0.55; }
#logs .logs-table-wrap { position: relative; overflow: auto; max-height: min(660px, calc(100dvh - 180px)); }
#logs .logs-table { table-layout: fixed; width: 100%; min-width: 780px; font-size: 12.5px; border-collapse: collapse; }
#logs .logs-table th {
  position: sticky; top: 0; z-index: 1; background: var(--s1); padding: 8px 12px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ink-3); border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
#logs .logs-table td { padding: 5px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; font-size: 12.5px; }
#logs .logs-col-time { width: 148px; }
#logs .logs-col-service { width: 150px; }
#logs .logs-col-severity { width: 92px; }
#logs .logs-col-trace { width: 116px; }
#logs .logs-col-open { width: 48px; }
#logs .logs-cell-time, #logs .logs-cell-service, #logs .logs-cell-message, #logs .logs-cell-trace { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logs .logs-cell-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* the zone is stated once, in the "Time (CDT)" column header; the phone cards have no header, so the cell shows it there */
#logs .lg-zone { display: none; }
#logs .logs-cell-service { color: var(--ink-2); }
#logs .logs-cell-message { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
#logs .logs-cell-trace .log-id { display: block; }
#logs .logs-row { cursor: pointer; }
#logs .logs-row:hover td, #logs .logs-row.is-expanded td { background: var(--s2); }
#logs .logs-row.is-expanded td { background: var(--accent-soft); }
#logs .logs-row.is-error td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
#logs .logs-row.is-expanded td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#logs .logs-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@keyframes lg-fresh { from { background: var(--accent-soft); } }
#logs .logs-row.is-fresh td { animation: lg-fresh 2.4s ease-out; }
#logs .logs-cell-open .ghost-btn { min-height: 28px; min-width: 28px; padding: 0; background: transparent; border-color: transparent; color: var(--ink-3); }
#logs .logs-cell-open .ghost-btn:hover { background: var(--s3); border-color: var(--hairline-strong); color: var(--ink); }
#logs .log-trace-link { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 12px; }
#logs .log-trace-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#logs .logs-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--hairline); background: var(--s2); color: var(--ink-3); }
#logs .logs-footer .logs-tail-note { color: var(--warn); }
#logs .logs-empty-note { padding: 0 24px 24px; margin: 0; }
#logs .lg-loading { padding: 16px; display: grid; gap: 10px; }
#logs .lg-loading .skeleton { height: 16px; }
#logs .logs-refresh-error { margin: 12px 16px 0; }
#logs .empty-state { align-items: flex-start; text-align: left; padding: 28px 24px; }

/* the quick view of one line */
.lg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(480px, 100vw); display: flex; flex-direction: column;
  background: var(--s1); color: var(--ink); border-left: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop);
}
.lg-drawer[hidden] { display: none; }
.lg-drawer:focus { outline: none; }
.lg-drawer:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lg-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--hairline); }
.lg-drawer-title { min-width: 0; }
.lg-drawer-kicker { margin: 0; font-size: 12px; color: var(--ink-3); }
.lg-drawer-head h3 { margin: 2px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.lg-drawer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lg-drawer-head .ghost-btn { min-width: 36px; padding: 0; flex: none; }
.lg-drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.lg-drawer-block { display: grid; gap: 8px; }
.lg-drawer-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.lg-drawer-block-head h4 { margin: 0; font-size: 13px; font-weight: 600; }
.lg-drawer-block-head .copy-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.lg-drawer .nx-code { max-height: 280px; }
.lg-drawer .lg-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.lg-drawer-trace { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.lg-drawer .log-trace-link { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 12.5px; }
.lg-drawer .log-trace-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-drawer .log-id .copy-btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
.lg-attrs { margin: 0; display: grid; gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-ctl); overflow: hidden; }
.lg-attrs > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--hairline); }
.lg-attrs > div:last-child { border-bottom: 0; }
.lg-attrs dt { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.lg-attrs dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.lg-drawer-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--s1); }

@media (max-width: 1100px) {
  #logs .lg-layout { grid-template-columns: minmax(0, 1fr); }
  #logs .lg-facets { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  #logs .logs-facets-note { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #logs .lg-toolbar .ui-field, #logs .lg-tb-search { flex: 1 1 100%; }
  #logs .lg-tb-actions { width: 100%; }
  /* one card per line instead of a sideways-scrolling table */
  #logs .logs-table-wrap { max-height: none; overflow: visible; }
  #logs .logs-table, #logs .logs-table tbody { display: block; min-width: 0; }
  #logs .logs-table colgroup, #logs .logs-table thead { display: none; }
  #logs .logs-table .logs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
  #logs .logs-table .logs-row td { padding: 0; border: 0; background: none; }
  #logs .logs-row.is-expanded { background: var(--accent-soft); }
  #logs .logs-row:hover td, #logs .logs-row.is-expanded td { background: none; }
  #logs .logs-cell-time { grid-column: 1; grid-row: 1; }
  #logs .lg-zone { display: inline; }
  #logs .logs-cell-severity { grid-column: 2; grid-row: 1; }
  #logs .logs-cell-open { grid-column: 3; grid-row: 1; }
  #logs .logs-cell-service { grid-column: 1 / -1; grid-row: 2; }
  #logs .logs-cell-message { grid-column: 1 / -1; grid-row: 3; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  #logs .logs-cell-trace { grid-column: 1 / -1; grid-row: 4; }
  #logs .logs-row.is-error { box-shadow: inset 3px 0 0 var(--crit); }
  #logs .logs-row.is-error td:first-child { box-shadow: none; }
  #logs .logs-row.is-expanded { box-shadow: inset 3px 0 0 var(--accent); }
}
@media (max-width: 640px) {
  #logs .lg-search input, #logs .lg-toolbar select, #logs .lg-seg button, #logs .logs-range-readout, #logs .lg-tb-actions .ghost-btn, #logs .logs-facet-value,
  #logs .logs-chip-remove, #logs .logs-cell-open .ghost-btn, #logs .logs-load-older, #logs .log-trace-link, #logs .logs-chips .link-btn, #logs .logs-tail-hint .link-btn { min-height: 44px; }
  #logs .logs-chip-remove, #logs .logs-cell-open .ghost-btn { min-width: 44px; }
  #logs .log-trace-link, #logs .logs-chips .link-btn, #logs .logs-tail-hint .link-btn { display: inline-flex; align-items: center; }
  #logs .lg-seg { width: 100%; flex-wrap: wrap; }
  #logs .lg-seg button { flex: 1 1 auto; }
  .lg-drawer .ghost-btn, .lg-drawer .primary-btn, .lg-drawer .log-trace-link { min-height: 44px; }
  .lg-drawer .log-trace-link { display: inline-flex; align-items: center; }
  .lg-drawer .lg-drawer-head .ghost-btn { min-width: 44px; }
  .lg-drawer-foot > button { flex: 1 1 140px; }
}

/* ----- log detail (its own page: /app/log-detail) ----- */
#log-detail .lg-detail { display: grid; gap: 16px; }
#log-detail .lg-dhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; }
#log-detail .lg-kicker { margin: 0; font-size: 12px; color: var(--ink-3); }
#log-detail .lg-dhead .title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 4px; }
#log-detail .lg-dhead h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
#log-detail .lg-dhead .small-meta { margin: 0; }
#log-detail .lg-dhead .ghost-btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
#log-detail .lg-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 16px; align-items: start; }
#log-detail .lg-dmain, #log-detail .lg-daside { display: grid; gap: 16px; min-width: 0; }
#log-detail .lg-dblock { overflow: hidden; }
#log-detail .lg-dblock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--hairline); }
#log-detail .lg-dblock-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
#log-detail .lg-dblock-head .copy-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
#log-detail .lg-dbody { display: grid; gap: 12px; padding: 16px; min-width: 0; }
#log-detail .lg-dbody > p { margin: 0; }
#log-detail .log-detail-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; border: 0; background: none; padding: 12px 14px; margin: 0; }
#log-detail .log-detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px 20px; margin: 0; padding: 16px; border: 0; border-radius: 0; }
#log-detail .log-detail-facts > .is-wide { grid-column: 1 / -1; }
#log-detail .log-detail-facts dt { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
#log-detail .log-detail-facts dd { margin: 3px 0 0; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
#log-detail .log-id { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; max-width: 100%; }
#log-detail .log-id .copy-btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
#log-detail .log-trace-link { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; white-space: normal; }
#log-detail .log-trace-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#log-detail .log-detail-more summary { cursor: pointer; padding: 8px 0; font-size: 13px; color: var(--accent); }
#log-detail .log-detail-more[open] summary { margin-bottom: 4px; }

/* attributes: key over value, with the actions at the right on hover or focus */
#log-detail .log-kv-table { display: block; width: 100%; }
#log-detail .log-kv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#log-detail .log-kv-table tbody { display: block; }
#log-detail .log-kv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); align-items: center; }
#log-detail .log-kv-table tbody tr:last-child { border-bottom: 0; }
#log-detail .log-kv-table tbody tr:hover td { background: none; }
#log-detail .log-kv-table th.log-kv-key { grid-column: 1; grid-row: 1; width: auto; padding: 0; border: 0; background: none; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
#log-detail .log-kv-table td.log-kv-value { grid-column: 1; grid-row: 2; padding: 0; border: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
#log-detail .log-kv-table td.log-kv-actions { grid-column: 2; grid-row: 1 / span 2; padding: 0; border: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; white-space: nowrap; }
#log-detail .log-kv-actions .ghost-btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
@media (hover: hover) {
  #log-detail .log-kv-table tr { position: relative; grid-template-columns: minmax(0, 1fr); }
  #log-detail .log-kv-table td.log-kv-actions {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex-direction: row; gap: 4px; padding-left: 20px; opacity: 0; transition: opacity 0.12s;
    background: linear-gradient(90deg, transparent, var(--s1) 18px);
  }
  #log-detail .log-kv-table tr:hover .log-kv-actions, #log-detail .log-kv-table tr:focus-within .log-kv-actions { opacity: 1; }
}

/* lines before and after, and the rest of the trace: dense mono rows */
#log-detail .log-context-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 12.5px; }
#log-detail .log-context-scope code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
#log-detail .log-context-scope .ghost-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
#log-detail .log-trace-logs { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
#log-detail .log-trace-log-btn {
  display: grid; grid-template-columns: 156px 96px 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 4px 10px;
  border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
#log-detail .log-trace-log-btn:hover:not(:disabled), #log-detail .log-trace-log-btn:focus-visible { background: var(--s2); }
#log-detail .log-trace-log.is-current .log-trace-log-btn { border-color: var(--accent-line); background: var(--accent-soft); cursor: default; opacity: 1; }
#log-detail .log-trace-log-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
#log-detail .log-trace-log-service { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
#log-detail .log-trace-log-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; }
#log-detail .log-trace-log-btn .badge { justify-self: start; }
#log-detail .log-context-more { padding: 4px 10px; font-style: normal; }
#log-detail .log-detail-trace-logs-link { justify-self: start; }

@media (max-width: 1100px) {
  #log-detail .lg-dgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #log-detail .log-trace-log-btn { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 10px; }
  #log-detail .log-trace-log-time, #log-detail .log-trace-log-service { grid-column: 1 / -1; }
  #log-detail .log-trace-log-body { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  #log-detail .lg-dbody, #log-detail .log-detail-facts { padding: 12px; }
}
@media (max-width: 640px) {
  #log-detail .ghost-btn, #log-detail .primary-btn, #log-detail .log-detail-more summary, #log-detail .log-trace-log-btn, #log-detail .log-trace-link,
  #log-detail .log-detail-trace-logs-link, #log-detail .lg-dblock-head .copy-btn, #log-detail .log-context-scope .ghost-btn, #log-detail .detail-breadcrumb-link { min-height: 44px; }
  #log-detail .detail-breadcrumb-link, #trace-detail .detail-breadcrumb-link { display: inline-flex; align-items: center; }
  #log-detail .log-trace-link, #log-detail .log-detail-trace-logs-link, #log-detail .log-detail-more summary { display: inline-flex; align-items: center; }
  #log-detail .log-kv-actions .ghost-btn { min-height: 44px; }
  #log-detail .log-id .copy-btn { min-height: 44px; }
}

/* ==========================================================================
   Traces (list)
   ========================================================================== */
#traces .tr-summary { display: grid; gap: 12px; }
#traces .tr-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#traces .tr-verdict p { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
#traces .tr-summary .kpi-tile { padding: 12px 16px; min-height: 0; gap: 4px; }
#traces .tr-summary .kpi-tile-value { font-size: 24px; }

#traces .tr-controls, #traces .tr-list-panel { overflow: hidden; }
#traces .tr-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; padding: 14px 16px; }
#traces .tr-filters .ui-field { display: grid; gap: 4px; flex: 0 1 150px; min-width: 0; }
#traces .tr-filters .ui-field:first-child { flex: 1 1 200px; min-width: 180px; }
#traces .tr-filters .ui-field:nth-child(4) { flex-basis: 130px; }
#traces .tr-filters .ui-field-label { margin: 0; }
#traces .tr-filters .tr-tb-seg { flex: 0 0 auto; }
#traces .tr-filters select, #traces .tr-filters input { width: 100%; min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
#traces .tr-search { position: relative; display: block; }
#traces .tr-search > .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
#traces .tr-search input { padding-left: 34px; }
#traces .trace-filters-actions { display: flex; align-items: flex-end; align-self: flex-end; margin-left: auto; }
#traces .trace-filters-actions .ghost-btn { min-height: 36px; }
#traces .trace-filters-actions .ghost-btn:disabled { opacity: 0.45; }

#traces .trace-attr-filters { padding: 0 16px 12px; }
#traces .trace-attr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#traces .trace-active-filter { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 4px 2px 10px; border-radius: 99px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink); font-size: 12.5px; }
#traces .trace-attr-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
#traces .trace-active-filter .link-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
#traces .trace-active-filter .link-btn:hover { background: var(--s4); color: var(--ink); }
#traces .trace-attr-chips .trace-attr-add { min-height: 30px; padding: 0 10px; font-size: 13px; border-style: dashed; }
#traces .trace-attr-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; padding: 14px; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--s2); }
#traces .trace-attr-form .ui-field { display: grid; gap: 4px; flex: 1 1 160px; min-width: 0; }
#traces .trace-attr-form input, #traces .trace-attr-form select { width: 100%; min-height: 36px; }
#traces .trace-attr-form-actions { display: flex; gap: 8px; }
#traces .trace-attr-form-note { flex: 1 1 100%; margin: 0; }

#traces #trace-list-distribution { border-top: 1px solid var(--hairline); padding: 14px 16px 10px; }
#traces .trace-dist { display: grid; gap: 8px; border: 0; padding: 0; }
#traces .trace-dist-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; }
#traces .trace-dist-head strong { font-weight: 600; }
#traces .tr-dist-hint { font-size: 12px; color: var(--ink-3); }
#traces .trace-dist-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
#traces .trace-dist-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
#traces .trace-dist-key.ok, #traces .trace-dist-ok { background: var(--c1); }
#traces .trace-dist-key.err, #traces .trace-dist-errors { background: var(--crit); }
#traces .trace-dist-bars { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding-bottom: 2px; min-height: 132px; }
#traces .trace-dist-bar { flex: 1 0 52px; display: grid; grid-template-rows: 16px 1fr auto; gap: 3px; min-width: 52px; padding: 4px 2px; color: var(--ink-3); background: none; border: 1px solid transparent; border-radius: var(--r-ctl); cursor: pointer; }
#traces .trace-dist-bar:hover { background: var(--s2); }
#traces .trace-dist-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#traces .trace-dist-bar.is-selected { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
#traces .trace-dist-count { font-family: var(--font-mono); font-size: 11.5px; text-align: center; }
#traces .trace-dist-column { align-self: end; display: flex; flex-direction: column; width: 70%; max-width: 44px; margin: 0 auto; border-radius: 4px 4px 0 0; overflow: hidden; }
#traces .trace-dist-column > span { flex-basis: 0; min-height: 2px; }
#traces .trace-dist-label { font-size: 11.5px; text-align: center; white-space: nowrap; }

#traces .trace-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
#traces .trace-list-count { margin: 0; color: var(--ink-3); font-size: 13px; }
#traces .trace-list-count strong { color: var(--ink); font-weight: 550; }
#traces .trace-list-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#traces .trace-list-toolbar-actions .ghost-btn { min-height: 30px; font-size: 13px; }
#traces .trace-list-error { margin: 12px 16px 0; color: var(--crit); font-size: 13px; }
#traces #trace-list-results.is-loading .trace-table-wrap { opacity: 0.55; transition: opacity 0.15s; }
#traces #trace-list-kpis.is-loading, #traces #trace-list-distribution.is-loading { opacity: 0.55; transition: opacity 0.15s; }
#traces .trace-table-wrap { overflow-x: auto; }
#traces .trace-list-table { min-width: 880px; width: 100%; border-collapse: collapse; }
#traces .trace-list-table th { padding: 8px 12px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
#traces .trace-list-table td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; font-size: 13px; }
#traces .trace-list-table tbody tr:last-child td { border-bottom: 0; }
#traces .trace-list-table th.num, #traces .trace-list-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#traces .trace-list-table th.num { font-family: var(--font-body); }
#traces .trace-list-row { cursor: pointer; }
#traces .trace-list-row:hover td { background: var(--s2); }
#traces .trace-list-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#traces .trace-list-row:focus-visible td { background: var(--s2); }
#traces .trace-list-row.has-error td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
#traces .trace-op-cell { min-width: 190px; }
#traces .trace-op-name { display: block; font-weight: 550; color: var(--ink); overflow-wrap: anywhere; }
#traces .trace-op-service { display: block; font-size: 12px; color: var(--ink-3); }
#traces .trace-chip-list { display: flex; gap: 4px; flex-wrap: nowrap; }
#traces .trace-chip { display: inline-block; max-width: 150px; padding: 1px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); border: 1px solid var(--hairline); border-radius: 6px; background: var(--s2); }
#traces .trace-chip-more { color: var(--ink-3); }
#traces .trace-duration { white-space: nowrap; width: 150px; }
#traces .trace-duration-text { display: block; font-size: 13px; color: var(--ink); }
#traces .tr-dur-track { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--s3); overflow: hidden; }
#traces .tr-span-preview { display: flex; gap: 2px; height: 8px; margin-top: 6px; }
#traces .tr-span-seg { flex: 1 1 0; min-width: 3px; height: 8px; border-radius: 2px; background: var(--c1); }
#traces .tr-span-seg:nth-child(even) { opacity: 0.55; }
#traces .tr-span-seg.is-error { background: var(--crit); }
#traces .tr-span-caption { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11px; font-weight: 400; white-space: normal; }
#traces .tr-dur-bar { display: block; height: 100%; border-radius: 2px; background: var(--c1); margin-left: auto; }
#traces .tr-dur-bar.is-error { background: var(--crit); }
#traces .trace-error-count { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
#traces .trace-id-cell { white-space: nowrap; }
#traces .trace-id-cell .mono-cell { font-size: 12px; color: var(--ink-2); background: none; border: 0; padding: 0; }
#traces .trace-id-cell .copy-btn { margin: 0 0 0 6px; min-height: 26px; padding: 0 8px; font-size: 12px; }
#traces .trace-list-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--hairline); }
#traces .tr-loading { padding: 16px; display: grid; gap: 10px; text-align: left; }
#traces .tr-loading .skeleton { height: 18px; }
#traces .empty-state { align-items: flex-start; text-align: left; padding: 28px 24px; }

@media (max-width: 1100px) { #traces .tr-filters .ui-field { flex-basis: 150px; } }
@media (max-width: 720px) {
  #traces .tr-filters .ui-field, #traces .tr-filters .ui-field:first-child { flex: 1 1 100%; }
  #traces .tr-filters .tr-tb-seg { flex: 1 1 100%; }
  /* the list becomes one card per trace */
  #traces .trace-table-wrap { overflow: visible; }
  #traces .trace-list-table, #traces .trace-list-table tbody { display: block; min-width: 0; }
  #traces .trace-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #traces .trace-list-table .trace-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
  #traces .trace-list-table .trace-list-row td { padding: 0; border: 0; background: none; text-align: left; }
  #traces .trace-list-row:hover td { background: none; }
  #traces .trace-list-row.has-error { box-shadow: inset 3px 0 0 var(--crit); }
  #traces .trace-list-row.has-error td:first-child { box-shadow: none; }
  #traces .trace-list-table td.trace-op-cell { grid-column: 1; grid-row: 1; }
  #traces .trace-list-table td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  #traces .trace-list-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #traces .trace-list-table td.num { display: none; }
  #traces .trace-list-table td.trace-duration { display: block; grid-column: 1; grid-row: 3; width: auto; }
  #traces .trace-list-table td:nth-child(6) { grid-column: 2; grid-row: 3; justify-self: end; }
  #traces .trace-list-table td.trace-id-cell { grid-column: 1 / -1; grid-row: 4; }
  #traces .trace-list-table td:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  #traces .tr-filters select, #traces .tr-filters input, #traces .tr-filters .seg button, #traces .trace-filters-actions .ghost-btn, #traces .trace-attr-chips .trace-attr-add,
  #traces .trace-active-filter .link-btn, #traces .trace-dist-bar, #traces .trace-list-toolbar-actions .ghost-btn, #traces .trace-id-cell .copy-btn, #traces .trace-attr-form input,
  #traces .trace-attr-form select, #traces .trace-attr-form-actions button, #traces #trace-list-load-more { min-height: 44px; }
  #traces .trace-active-filter .link-btn { min-width: 44px; }
  #traces .tr-filters .seg { width: 100%; flex-wrap: wrap; }
  #traces .tr-filters .seg button { flex: 1 1 auto; }
}

/* ==========================================================================
   Trace detail: header numbers, tree waterfall with token-coloured spans, span drawer
   ========================================================================== */
/* Service colours: six hues from the theme tokens, none of them a status colour. They follow the theme, so the
   same service keeps its colour in light and dark. */
#trace-detail {
  --tr-1: var(--c1);
  --tr-2: color-mix(in srgb, var(--accent) 42%, var(--ok));
  --tr-3: color-mix(in srgb, var(--accent) 62%, var(--crit));
  --tr-4: var(--c3);
  --tr-5: var(--c2);
  --tr-6: color-mix(in srgb, var(--c1) 50%, var(--c3));
  --trace-label-col: clamp(240px, 36%, 420px);
  --trace-duration-col: 92px;
}
#trace-detail .tr-detail { display: grid; gap: 16px; }
#trace-detail .tr-head { overflow: hidden; }
#trace-detail .trace-detail-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; }
#trace-detail .tr-kicker { margin: 0; font-size: 12px; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
#trace-detail .trace-detail-title { min-width: 0; }
#trace-detail .trace-detail-title .title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 4px; }
#trace-detail .trace-detail-title h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
#trace-detail .trace-detail-title .small-meta { margin: 0; }
#trace-detail .trace-detail-actions .ghost-btn { min-height: 36px; }
#trace-detail .trace-detail-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--s2) 55%, transparent); }
#trace-detail .trace-detail-facts > div { flex: 0 1 auto; min-width: 0; padding: 12px 20px; border-right: 1px solid var(--hairline); }
#trace-detail .trace-detail-facts > div:last-child { border-right: 0; flex: 1 1 280px; }
#trace-detail .trace-detail-facts dt { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
#trace-detail .trace-detail-facts dd { margin: 2px 0 0; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#trace-detail .tr-stat-big { font-family: var(--font-body); font-size: 22px; font-weight: 550; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#trace-detail .trace-id-code { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; color: var(--ink-2); background: none; border: 0; padding: 0; }
#trace-detail .trace-detail-facts .copy-btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
#trace-detail .trace-fact-bad { display: inline-flex; align-items: center; gap: 6px; color: var(--crit); font-weight: 550; }
#trace-detail .trace-detail-note { margin: 0 16px 12px; padding: 8px 12px; font-size: 13px; color: var(--ink-2); background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-ctl); }
#trace-detail .trace-error-icon { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--crit); color: var(--s1); font-size: 10px; font-weight: 700; line-height: 1; }

#trace-detail .tr-wf { overflow: visible; }
#trace-detail .trace-detail-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
#trace-detail .trace-span-filter-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 340px; min-width: 0; flex-wrap: wrap; }
#trace-detail .tr-find { position: relative; display: block; flex: 1 1 260px; max-width: 420px; }
#trace-detail .tr-find > .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
#trace-detail .trace-filter-input { width: 100%; min-height: 36px; padding: 6px 12px 6px 34px; font-size: 13.5px; background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); }
#trace-detail .trace-critical-btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; border: 1px solid var(--hairline-strong); }
#trace-detail .trace-critical-btn[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 550; }
#trace-detail .trace-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
#trace-detail .trace-legend li { display: inline-flex; align-items: center; gap: 6px; }
#trace-detail .trace-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#trace-detail .trace-legend-error { color: var(--crit); }

#trace-detail .trace-detail-body { padding: 0 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
#trace-detail .trace-waterfall-wrap { container-type: inline-size; min-width: 0; }
#trace-detail .trace-waterfall-scale { position: sticky; top: var(--topbar-h); z-index: 2; background: var(--s1); margin: 0; padding: 10px 4px 6px; border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: var(--trace-label-col) minmax(0, 1fr) var(--trace-duration-col); gap: 10px; align-items: center; }
#trace-detail .trace-scale-caption { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
#trace-detail .trace-scale-track { position: relative; height: 16px; }
#trace-detail .trace-tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
#trace-detail .trace-tick:first-child { transform: none; }
#trace-detail .trace-tick.trace-tick-end { transform: translateX(-100%); }
#trace-detail .trace-waterfall { gap: 0; display: grid; }
#trace-detail .trace-span-row { display: grid; grid-template-columns: var(--trace-label-col) minmax(0, 1fr) var(--trace-duration-col); gap: 10px; align-items: center; padding: 4px; border-radius: 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
#trace-detail .trace-span-row:hover { background: var(--s2); }
#trace-detail .trace-span-row.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
#trace-detail .trace-span-row.is-context { opacity: 0.5; }
#trace-detail .trace-span-label { min-width: 0; padding-left: calc(var(--trace-depth, 0) * 14px); }
#trace-detail .trace-span-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
#trace-detail .trace-span-toggle, #trace-detail .trace-span-toggle-spacer { flex: none; width: 22px; height: 22px; }
#trace-detail .trace-span-toggle { display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; }
#trace-detail .trace-span-toggle:hover { background: var(--s3); color: var(--ink); }
#trace-detail .trace-span-toggle:disabled { cursor: default; opacity: 0.4; }
#trace-detail .trace-span-open { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 2px 4px; border: 0; border-radius: 5px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
#trace-detail .trace-span-toggle:focus-visible, #trace-detail .trace-span-open:focus-visible, #trace-detail .trace-inline-link:focus-visible, #trace-detail .trace-span-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#trace-detail .trace-span-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
#trace-detail .trace-span-service { color: var(--ink-3); }
#trace-detail .trace-span-op { font-weight: 550; }
#trace-detail .trace-span-target { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }
#trace-detail .trace-collapsed-count { flex: none; padding: 0 7px; border-radius: 99px; background: var(--s3); color: var(--ink-2); font-size: 11px; }
#trace-detail .trace-service-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; margin-right: 2px; }
#trace-detail .trace-span-facts .trace-service-dot { margin-right: 6px; vertical-align: middle; }
#trace-detail .trace-kind-chip { flex: none; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.6; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); background: var(--s3); }
#trace-detail .trace-kind-chip.kind-server { color: var(--accent); background: var(--accent-soft); }
#trace-detail .trace-kind-chip.kind-client { color: color-mix(in srgb, var(--accent) 45%, var(--ok)); background: color-mix(in srgb, color-mix(in srgb, var(--accent) 45%, var(--ok)) 14%, transparent); }
#trace-detail .trace-kind-chip.kind-producer, #trace-detail .trace-kind-chip.kind-consumer { color: color-mix(in srgb, var(--accent) 62%, var(--crit)); background: color-mix(in srgb, color-mix(in srgb, var(--accent) 62%, var(--crit)) 14%, transparent); }
#trace-detail .trace-orphan-hint, #trace-detail .trace-span-error-msg { margin-left: 28px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trace-detail .trace-orphan-hint { color: var(--ink-3); font-style: normal; }
#trace-detail .trace-span-error-msg { color: var(--crit); }
#trace-detail .trace-waterfall-track { position: relative; height: 18px; border-radius: 3px; background: var(--s2); }
#trace-detail .trace-waterfall-bar { position: absolute; top: 4px; height: 10px; min-width: 3px; border-radius: 3px; background: var(--trace-bar-color, var(--c1)); }
#trace-detail .trace-waterfall-bar.is-error { outline: 2px solid var(--crit); outline-offset: 1px; }
#trace-detail .trace-span-duration { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
#trace-detail .trace-duration-error { display: inline-flex; }
#trace-detail .trace-no-match { padding: 16px 4px; }
#trace-detail .shows-critical-path .trace-span-row:not(.on-critical-path) .trace-waterfall-bar { opacity: 0.35; }
#trace-detail .shows-critical-path .trace-span-row.on-critical-path .trace-waterfall-track { box-shadow: inset 0 -2px 0 var(--ink-2); }
#trace-detail .small-meta { color: var(--ink-3); }

/* span drawer: docks beside the waterfall on very wide screens, slides over it below 1600px */
#trace-detail .trace-span-panel { min-width: 0; padding: 16px; border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); background: var(--s1); color: var(--ink); box-shadow: none; overflow: auto; overscroll-behavior: contain; }
#trace-detail .trace-span-panel[hidden] { display: none; }
@media (min-width: 1600px) {
  #trace-detail .trace-detail-body.has-panel { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); }
  #trace-detail .trace-span-panel { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100dvh - var(--topbar-h) - 24px); }
}
@media (max-width: 1599.98px) {
  #trace-detail .trace-span-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 950; width: min(480px, 100vw); border-radius: 0; border-width: 0 0 0 1px; box-shadow: var(--shadow-pop); }
}
#trace-detail .trace-span-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#trace-detail .trace-span-panel-kicker { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-3); }
#trace-detail .trace-span-panel-head h4 { margin: 2px 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; }
#trace-detail .trace-span-panel-badges { display: flex; align-items: center; gap: 6px; }
#trace-detail .trace-panel-close { flex: none; min-height: 32px; min-width: 32px; padding: 0; }
#trace-detail .trace-span-facts { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 6px 14px; margin: 0 0 10px; padding: 12px 0; border-top: 1px solid var(--hairline); }
#trace-detail .trace-span-facts > div { display: contents; }
#trace-detail .trace-span-facts dt { font-size: 12.5px; color: var(--ink-3); padding-top: 1px; }
#trace-detail .trace-span-facts dd { margin: 0; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
#trace-detail .trace-span-facts code, #trace-detail .trace-links code, #trace-detail .trace-exception code { font-family: var(--font-mono); font-size: 12px; background: none; border: 0; padding: 0; color: var(--ink); }
#trace-detail .trace-status-message { margin-top: 4px; color: var(--crit); font-size: 13px; white-space: pre-wrap; }
#trace-detail .trace-inline-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#trace-detail .trace-panel-section { border-top: 1px solid var(--hairline); }
#trace-detail .trace-panel-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }
#trace-detail .trace-panel-count { padding: 0 7px; border-radius: 99px; background: var(--s3); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
#trace-detail .trace-panel-section-body { padding-bottom: 12px; display: grid; gap: 8px; }
#trace-detail .trace-panel-section-body > p { margin: 0; }
#trace-detail .trace-attr-filter-row { padding: 10px 0; border-top: 1px solid var(--hairline); }
#trace-detail .trace-attr-filter-row .trace-filter-input { padding-left: 12px; }
#trace-detail .trace-attr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#trace-detail .trace-attr-table th, #trace-detail .trace-attr-table td { padding: 5px 4px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; background: none; }
#trace-detail .trace-attr-table tbody tr:hover td, #trace-detail .trace-attr-table tbody tr:hover th { background: none; }
#trace-detail .trace-attr-table tbody tr:last-child td, #trace-detail .trace-attr-table tbody tr:last-child th { border-bottom: 0; }
#trace-detail .trace-attr-table th { width: 40%; font-weight: 400; }
#trace-detail .trace-attr-table th code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); overflow-wrap: break-word; }
#trace-detail .trace-attr-cell { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
#trace-detail .trace-attr-value { min-width: 0; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
#trace-detail .trace-attr-cell .copy-btn { flex: none; min-height: 22px; padding: 0 7px; font-size: 11.5px; }
#trace-detail .trace-event { padding-left: 10px; border-left: 3px solid var(--hairline-strong); display: grid; gap: 6px; }
#trace-detail .trace-event.is-exception { border-left-color: var(--crit); }
#trace-detail .trace-exception-label { display: inline-block; min-width: 64px; color: var(--ink-3); font-size: 12px; }
#trace-detail .trace-stack { margin: 0; max-height: 320px; padding: 10px 12px; overflow: auto; border-radius: var(--r-ctl); background: var(--canvas); color: var(--ink-2); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
#trace-detail .trace-span-logs li { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
#trace-detail .trace-span-log-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
#trace-detail .trace-span-log-body { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
#trace-detail .trace-panel-section-body > .trace-logs-btn { justify-self: start; }
#trace-detail .trace-events, #trace-detail .trace-span-logs, #trace-detail .trace-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#trace-detail .trace-links li { display: grid; gap: 4px; font-size: 13px; }
#trace-detail .empty-state { align-items: flex-start; text-align: left; padding: 28px 24px; }
#trace-detail .panel-header { border-bottom: 0; }

@container (max-width: 700px) { #trace-detail .trace-tick-odd { display: none; } }
@container (max-width: 540px) {
  #trace-detail .trace-waterfall-scale, #trace-detail .trace-span-row { grid-template-columns: minmax(0, 1fr) 72px; row-gap: 2px; }
  #trace-detail .trace-span-label { grid-column: 1 / -1; padding-left: calc(var(--trace-depth, 0) * 8px); }
  #trace-detail .trace-scale-caption:first-child { display: none; }
  #trace-detail .trace-scale-track { grid-column: 1; }
}
@media (max-width: 720px) {
  #trace-detail .trace-detail-facts > div { flex: 1 1 45%; border-right: 0; border-bottom: 1px solid var(--hairline); }
  #trace-detail .trace-detail-facts > div:last-child { flex: 1 1 100%; border-bottom: 0; }
  #trace-detail .trace-detail-body, #trace-detail .trace-detail-toolbar { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 640px) {
  #trace-detail .ghost-btn, #trace-detail .primary-btn, #trace-detail .trace-filter-input, #trace-detail .trace-span-open, #trace-detail .trace-panel-section > summary,
  #trace-detail .trace-inline-link, #trace-detail .trace-detail-facts .copy-btn, #trace-detail .trace-attr-cell .copy-btn { min-height: 44px; }
  #trace-detail .trace-span-toggle, #trace-detail .trace-span-toggle-spacer { width: 44px; height: 44px; }
  #trace-detail .trace-detail-actions .ghost-btn { min-height: 44px; }
  #trace-detail .trace-panel-close { min-width: 44px; }
  #trace-detail .trace-inline-link { display: inline-flex; align-items: center; }
  #trace-detail .detail-breadcrumb-link { min-height: 44px; }
}

/* ==========================================================================
   Metrics
   ========================================================================== */
/* Series colours: a fixed categorical order, from the theme tokens (none of them is a status colour on its own); "Other" is neutral. */
#metrics {
  --metrics-series-1: var(--c1);
  --metrics-series-2: color-mix(in srgb, var(--accent) 42%, var(--ok));
  --metrics-series-3: color-mix(in srgb, var(--accent) 62%, var(--crit));
  --metrics-series-4: var(--c3);
  --metrics-series-5: var(--c2);
  --metrics-series-6: color-mix(in srgb, var(--c1) 50%, var(--c3));
  --metrics-series-7: color-mix(in srgb, var(--ok) 60%, var(--c3));
  --metrics-series-8: color-mix(in srgb, var(--warn) 50%, var(--ok));
  --metrics-series-other: var(--c4);
  --metrics-grid: var(--grid);
}
#metrics .mx-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: -4px; }
#metrics .mx-verdict p { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
#metrics .kpi-tile { padding: 12px 16px; min-height: 0; gap: 4px; }
#metrics .kpi-tile-value { font-size: 24px; }

#metrics .metrics-filters { padding: 14px 16px; }
#metrics .metrics-connector-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--accent-line); border-radius: var(--r-ctl); background: var(--accent-soft); }
#metrics .metrics-connector-filter p { margin: 0; color: var(--ink); }
#metrics .metrics-field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
#metrics .metrics-field-row .ui-field { display: grid; gap: 4px; flex: 1 1 200px; max-width: 320px; min-width: 0; }
#metrics .metrics-field-row .ui-field-label { margin: 0; }
#metrics .metrics-field-row .ui-field-hint { margin: 0; font-size: 12px; color: var(--ink-3); }
#metrics .metrics-query-row .ui-field:first-child { flex-basis: 300px; max-width: 440px; }
#metrics .metrics-query-row { padding: 14px 16px; }
#metrics .metrics-field-row select, #metrics .metrics-field-row input { width: 100%; min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
#metrics .metrics-field-row input[aria-invalid="true"] { border-color: var(--crit); }
#metrics .metrics-field-row input[aria-invalid="true"] + .ui-field-hint { color: var(--crit); }
#metrics .logs-range-readout {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px dashed var(--hairline-hi);
  border-radius: var(--r-ctl); color: var(--ink-2); background: transparent; white-space: nowrap;
}
#metrics .metrics-refresh-error { margin: 0; }

#metrics .mx-tabs { padding: 0; }
#metrics .mx-tabs .top-tab { margin: 0; padding: 10px 2px 11px; border: 0; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; }
#metrics .mx-tabs .top-tab.active { border: 0; font-weight: 500; }
#metrics .mx-tabs .ph { font-size: 15px; }
#metrics .metrics-tabpanel { display: grid; gap: 16px; }

#metrics .metrics-list-controls { padding: 14px 16px; border-bottom: 1px solid var(--hairline); align-items: flex-end; }
#metrics .metrics-list-count { align-self: center; margin: 0 0 0 auto; font-size: 13px; color: var(--ink-3); }
#metrics .metrics-list-hint, #metrics .metrics-range-note, #metrics .metrics-note { margin: 0; padding: 10px 16px 0; font-size: 12.5px; color: var(--ink-3); }
#metrics .metrics-loading { padding: 16px; margin: 0; }
#metrics .metrics-table-wrap { overflow-x: auto; }
#metrics .metrics-catalog-table, #metrics .metrics-data-table { width: 100%; border-collapse: collapse; }
#metrics .metrics-catalog-table th, #metrics .metrics-data-table th { padding: 8px 16px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); border-bottom: 1px solid var(--hairline); white-space: nowrap; background: var(--s1); }
#metrics .metrics-catalog-table td, #metrics .metrics-data-table td { padding: 10px 16px; border-bottom: 1px solid var(--hairline); font-size: 13px; vertical-align: top; }
#metrics .metrics-catalog-table td:first-child { min-width: 260px; }
#metrics .metrics-catalog-table tbody tr:last-child td, #metrics .metrics-data-table tbody tr:last-child td { border-bottom: 0; }
#metrics .metrics-data-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#metrics .metrics-data-table caption { padding: 10px 16px; text-align: left; font-size: 12.5px; color: var(--ink-3); caption-side: top; }
#metrics .metrics-catalog-row { cursor: pointer; }
#metrics .metrics-catalog-row:hover td { background: var(--s2); }
#metrics .metrics-name-btn { padding: 0; border: 0; background: none; color: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; overflow-wrap: break-word; }
#metrics .metrics-name-btn:hover, #metrics .metrics-name-btn:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
#metrics .metrics-desc { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
#metrics .metrics-keys { display: flex; flex-wrap: wrap; gap: 4px; }
#metrics .metrics-key { padding: 1px 7px; border-radius: 6px; background: var(--s2); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
#metrics .metrics-quick-picks { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 24px; }
#metrics .metrics-quick-picks .ghost-btn { font-family: var(--font-mono); font-size: 12.5px; min-height: 32px; }
#metrics .empty-state { align-items: flex-start; text-align: left; padding: 28px 24px; }

#metrics .metrics-chart-panel { overflow: hidden; }
#metrics .metrics-chart-header { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#metrics .metrics-chart-header h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; font-size: 16px; }
#metrics .metrics-chart-header h3 .mono-cell { font-size: 15px; }
#metrics .metrics-chart-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#metrics .metrics-chart-actions .ghost-btn { min-height: 32px; padding: 0 12px; font-size: 13px; margin: 0; }
#metrics .metrics-chart-wrap { position: relative; padding: 8px 16px 0; }
#metrics .metrics-chart-canvas { width: 100%; min-height: 280px; }
#metrics .metrics-chart-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
#metrics .metrics-chart-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
#metrics .metrics-grid { stroke: var(--grid); stroke-width: 1; }
#metrics .metrics-axis, #metrics .metrics-baseline, #metrics .metrics-tick { stroke: var(--hairline-strong); stroke-width: 1; }
#metrics .metrics-axis-text, #metrics .metrics-axis-unit { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; }
#metrics .metrics-axis-unit { font-weight: 500; }
#metrics .metrics-dot, #metrics .metrics-hover-dot { stroke: var(--s1); stroke-width: 2; }
#metrics .metrics-crosshair { stroke: var(--hairline-hi); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
#metrics .metrics-hit { cursor: crosshair; }
#metrics .metrics-tooltip { position: absolute; z-index: 5; min-width: 180px; max-width: 320px; padding: 8px 10px; border: 1px solid var(--hairline-hi); border-radius: var(--r-ctl); background: var(--s4); box-shadow: var(--shadow-pop); font-size: 12px; pointer-events: none; }
#metrics .metrics-tooltip[hidden] { display: none; }
#metrics .metrics-tooltip-time { margin-bottom: 4px; color: var(--ink-3); }
#metrics .metrics-tooltip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
#metrics .metrics-tooltip-row strong { font-family: var(--font-mono); font-weight: 500; }
#metrics .metrics-tooltip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#metrics .metrics-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; }
#metrics .metrics-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 16px 16px; list-style: none; font-size: 12.5px; color: var(--ink-2); }
#metrics .metrics-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
#metrics .metrics-legend-label { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  #metrics .metrics-field-row .ui-field, #metrics .metrics-query-row .ui-field:first-child { flex-basis: 100%; max-width: none; }
  #metrics .metrics-list-count { margin-left: 0; }
  #metrics .metrics-field-row select, #metrics .metrics-field-row input, #metrics .mx-tabs .top-tab, #metrics .metrics-chart-actions .ghost-btn, #metrics .metrics-quick-picks .ghost-btn,
  #metrics .metrics-connector-filter .ghost-btn, #metrics .logs-range-readout, #metrics .metrics-name-btn { min-height: 44px; }
  #metrics .metrics-name-btn { display: inline-flex; align-items: center; }
  #metrics .metrics-chart-wrap { padding-left: 8px; padding-right: 8px; }
}

/* ==========================================================================
   Analytics
   ========================================================================== */
#analytics .an-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#analytics .an-verdict p { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
#analytics .an-feed, #analytics .an-aiops { overflow: hidden; }
#analytics .an-feed .panel-header { flex-wrap: wrap; align-items: center; }
#analytics .an-seg { flex-wrap: wrap; }
#analytics .an-seg button { display: inline-flex; align-items: center; gap: 8px; }
#analytics .an-n { font-family: var(--font-mono); font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--s3); color: var(--ink-2); }
#analytics .an-feed > p.muted, #analytics .an-feed > .ghost-btn { margin: 16px; }
#analytics .an-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; grid-template-columns: none; gap: 0; }
#analytics .an-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: none; box-shadow: none; }
#analytics .an-item:last-child { border-bottom: 0; }
#analytics .an-item:hover { background: var(--s2); }
#analytics .an-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-ctl); background: var(--s2); border: 1px solid var(--hairline); color: var(--ink-2); font-size: 16px; }
#analytics .an-main { min-width: 0; display: grid; gap: 4px; }
#analytics .an-title { font-weight: 550; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
#analytics .an-main p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; max-width: 90ch; }
#analytics .an-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
#analytics .an-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
#analytics .an-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; min-height: 24px; }
#analytics .an-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
#analytics .an-aiops-body { padding: 16px; display: grid; gap: 10px; justify-items: start; }
#analytics .an-aiops-body p { margin: 0; }
#analytics .empty-state { align-items: flex-start; text-align: left; padding: 28px 24px; }
@media (max-width: 640px) {
  #analytics .an-item { grid-template-columns: minmax(0, 1fr); }
  #analytics .an-icon { display: none; }
  #analytics .an-seg button, #analytics .an-link, #analytics .an-feed .ghost-btn, #analytics .an-aiops-body .ghost-btn { min-height: 44px; }
  #analytics .an-seg { width: 100%; }
  #analytics .an-seg button { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Ask Onyx Oracle: a right-hand drawer (the same <dialog>, so focus trapping, Esc and the backdrop keep working)
   ========================================================================== */
html[data-theme] #ai-analyst-dialog {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0;
  border: 0; border-left: 1px solid var(--hairline-strong); border-radius: 0; background: var(--s1); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden;
}
/* A flex column, not fixed grid rows: the progress line and the limit notice are each hidden while empty, so the row
   the messages land in would move. Only the messages scroll. */
html[data-theme] #ai-analyst-dialog[open] { display: flex; flex-direction: column; }
html[data-theme] #ai-analyst-dialog[open] > * { flex: none; }
/* INSIGHTS-279: the messages and the demo question list share one scrolling body, so a long list or a long answer
   never pushes the form (and Investigate) below the bottom of the screen at 1280x800 or 1366x768. */
html[data-theme] #ai-analyst-dialog[open] > .ai-analyst-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html[data-theme] #ai-analyst-dialog .ai-analyst-body > #ai-analyst-demo-questions { max-height: none; overflow: visible; margin: 0; padding: 16px; }
html[data-theme] #ai-analyst-dialog[open] > #ai-analyst-form { flex: none; }
html[data-theme] #ai-analyst-dialog::backdrop, html[data-theme="dark"] #ai-analyst-dialog::backdrop { background: var(--scrim); }
html[data-theme] #ai-analyst-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
html[data-theme] #ai-analyst-dialog header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
html[data-theme] #ai-analyst-dialog header h2::before { content: "\e6a2"; font-family: "Phosphor"; font-weight: 400; color: var(--accent); font-size: 18px; line-height: 1; }
html[data-theme] #ai-analyst-dialog header p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
html[data-theme] #ai-analyst-dialog .ai-btn-close, html[data-theme] #ai-analyst-dialog #ai-analyst-close {
  position: relative; flex: none; width: 36px; height: 36px; min-width: 36px; padding: 0; font-size: 0; background: var(--s2); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); color: var(--ink); cursor: pointer;
}
html[data-theme] #ai-analyst-dialog #ai-analyst-close::before { content: "\e4f6"; font-family: "Phosphor"; font-size: 18px; line-height: 1; position: absolute; inset: 0; display: grid; place-items: center; }
html[data-theme] #ai-analyst-dialog #ai-analyst-close:hover { background: var(--s3); border-color: var(--hairline-hi); }
html[data-theme] #ai-analyst-dialog #ai-analyst-disclaimer { margin: 0; padding: 8px 16px; font-size: 12px; line-height: 1.4; color: var(--ink-3); border-bottom: 1px solid var(--hairline); }
html[data-theme] #ai-analyst-dialog > p[role="status"] { margin: 12px 16px 0; padding: 10px 12px; font-size: 13px; color: var(--ink); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--r-ctl); }
html[data-theme] #ai-analyst-dialog > p[role="status"]:empty { display: none; margin: 0; }
/* The waiting line ("Investigation is running; checking for results…") is progress, not a warning. */
html[data-theme] #ai-analyst-dialog #ai-analyst-progress { margin: 0; padding: 8px 16px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; }
html[data-theme] #ai-analyst-dialog #ai-analyst-progress:empty { display: none; }
html[data-theme] #ai-analyst-dialog #ai-analyst-messages { flex: none; overflow: visible; max-height: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

html[data-theme] #ai-analyst-dialog .ai-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
html[data-theme] #ai-analyst-dialog .ai-intro > .ph { font-size: 28px; color: var(--accent); }
html[data-theme] #ai-analyst-dialog .ai-intro h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
html[data-theme] #ai-analyst-dialog .ai-intro p { margin: 0; color: var(--ink-3); font-size: 13.5px; max-width: 46ch; }
html[data-theme] #ai-analyst-dialog .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme] #ai-analyst-dialog .ai-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 28px; font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; color: var(--ink);
  background: var(--s2); border: 1px solid var(--hairline-strong); border-radius: 6px; cursor: pointer;
}
html[data-theme] #ai-analyst-dialog .ai-chip:hover { border-color: var(--accent-line); background: var(--s3); }
html[data-theme] #ai-analyst-dialog .ai-chip.is-static { cursor: default; color: var(--ink-2); border-color: var(--hairline); }
html[data-theme] #ai-analyst-dialog .ai-chip.is-static:hover { background: var(--s2); border-color: var(--hairline); }
html[data-theme] #ai-analyst-dialog .ai-chip[data-ai-trace] { color: var(--accent); }
/* accent text on the hover surface (--s3) is 4.48:1 in the light theme; the hover accent is 4.98:1 */
html[data-theme] #ai-analyst-dialog .ai-chip[data-ai-trace]:hover { color: var(--accent-hover); }

html[data-theme] #ai-analyst-dialog .ai-message { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink); background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-panel); }
html[data-theme] #ai-analyst-dialog .ai-message.user { align-self: flex-end; max-width: 88%; background: var(--accent-soft); border-color: var(--accent-line); border-bottom-right-radius: 4px; }
html[data-theme] #ai-analyst-dialog .ai-message.assistant { background: var(--s1); border-color: var(--hairline-strong); display: flex; flex-direction: column; gap: 10px; white-space: normal; }
html[data-theme] #ai-analyst-dialog .ai-message.is-pending { color: var(--ink-3); border-style: dashed; white-space: pre-wrap; }
html[data-theme] #ai-analyst-dialog .ai-message.is-pending::before { content: "\e1a0"; font-family: "Phosphor"; font-size: 18px; line-height: 1; }
/* How it ended: failed in the critical colour, cancelled and partial dashed and neutral. */
html[data-theme] #ai-analyst-dialog .ai-status { margin: 0; font-weight: 550; line-height: 1.5; color: var(--ink-2); }
html[data-theme] #ai-analyst-dialog .ai-message.is-failed { border-left: 3px solid var(--crit); }
html[data-theme] #ai-analyst-dialog .ai-message.is-failed .ai-status { color: var(--crit); }
html[data-theme] #ai-analyst-dialog .ai-message.is-cancelled, html[data-theme] #ai-analyst-dialog .ai-message.is-partial { border-style: dashed; }
html[data-theme] #ai-analyst-dialog .ai-evidence-note { margin: 0; font-size: 12.5px; color: var(--ink-3); }
html[data-theme] #ai-analyst-dialog .ai-summary { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; font-weight: 450; white-space: pre-wrap; }
html[data-theme] #ai-analyst-dialog .ai-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-theme] #ai-analyst-dialog .ai-message h3 { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 13px; font-weight: 600; }
html[data-theme] #ai-analyst-dialog .ai-message ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
html[data-theme] #ai-analyst-dialog .ai-message details { font-size: 12.5px; }
html[data-theme] #ai-analyst-dialog .ai-message summary { cursor: pointer; color: var(--ink-3); padding: 4px 0; }
html[data-theme] #ai-analyst-dialog .ai-message pre { margin: 6px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto; font-family: var(--font-mono); font-size: 12px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-ctl); white-space: pre-wrap; }
html[data-theme] #ai-analyst-dialog .ai-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); }
html[data-theme] #ai-analyst-dialog .ai-follow > span { font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }

html[data-theme] #ai-analyst-dialog #ai-analyst-form { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--hairline); background: var(--s1); }
html[data-theme] #ai-analyst-dialog #ai-analyst-form label:not(.ai-analyst-enter-option) { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
html[data-theme] #ai-analyst-dialog #ai-analyst-form textarea { width: 100%; min-height: 76px; max-height: 24vh; padding: 10px 12px; font: inherit; font-size: 13.5px; resize: vertical; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); }
html[data-theme] #ai-analyst-dialog #ai-analyst-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
html[data-theme] #ai-analyst-dialog .ai-analyst-enter-option { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-3); }
html[data-theme] #ai-analyst-dialog #ai-analyst-form > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
html[data-theme] #ai-analyst-dialog #ai-analyst-new { margin-left: auto; }
html[data-theme] #ai-analyst-dialog #ai-analyst-new, html[data-theme] #ai-analyst-dialog #ai-analyst-stop, html[data-theme] #ai-analyst-dialog #ai-analyst-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; font: inherit; font-size: 13.5px; font-weight: 500; border-radius: var(--r-ctl); cursor: pointer;
}
html[data-theme] #ai-analyst-dialog #ai-analyst-new, html[data-theme] #ai-analyst-dialog #ai-analyst-stop { background: var(--s2); color: var(--ink); border: 1px solid var(--hairline-strong); }
html[data-theme] #ai-analyst-dialog #ai-analyst-new:hover, html[data-theme] #ai-analyst-dialog #ai-analyst-stop:hover { background: var(--s3); border-color: var(--hairline-hi); }
/* display above would beat the hidden attribute the script uses while no investigation is running */
html[data-theme] #ai-analyst-dialog #ai-analyst-stop[hidden] { display: none; }
html[data-theme] #ai-analyst-dialog #ai-analyst-submit { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; }
html[data-theme] #ai-analyst-dialog #ai-analyst-submit:hover { background: var(--accent-hover); }
html[data-theme] #ai-analyst-dialog #ai-analyst-submit[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 640px) {
  html[data-theme] #ai-analyst-dialog #ai-analyst-close { width: 44px; height: 44px; min-width: 44px; }
  html[data-theme] #ai-analyst-dialog .ai-chip, html[data-theme] #ai-analyst-dialog #ai-analyst-new, html[data-theme] #ai-analyst-dialog #ai-analyst-stop, html[data-theme] #ai-analyst-dialog #ai-analyst-submit,
  html[data-theme] #ai-analyst-dialog #ai-analyst-form textarea, html[data-theme] #ai-analyst-dialog summary, html[data-theme] #ai-analyst-dialog .prov { min-height: 44px; }
  html[data-theme] #ai-analyst-dialog .ai-analyst-enter-option { min-height: 44px; }
  html[data-theme] #ai-analyst-dialog .ai-analyst-enter-option input { width: 20px; height: 20px; }
  html[data-theme] #ai-analyst-dialog .ai-message.user { max-width: 100%; }
}

/* The provenance popover is 300px wide and hangs from its chip's left edge (shell). Even closed it counts toward the page's
   scroll width, so a chip that lands in the last 300px of a row gave the page a sideways scrollbar (and clipped the open
   card). The sentence beside the chip is held back so the chip always has room; on phones the chip takes its own line. */
:is(#logs .lg-verdict, #traces .tr-verdict, #metrics .mx-verdict, #analytics .an-verdict) p { max-width: max(240px, calc(100% - 340px)); }
@media (max-width: 860px) {
  :is(#logs .lg-verdict, #traces .tr-verdict, #metrics .mx-verdict, #analytics .an-verdict) p { flex: 1 1 100%; max-width: none; }
}

/* phones: the summary tiles sit two to a row so the page leads with the table, not a stack of tiles */
@media (max-width: 640px) {
  :is(#logs, #traces, #metrics) .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :is(#logs, #traces, #metrics) .kpi-strip .kpi-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :is(#logs, #traces, #metrics) .kpi-strip .kpi-tile { padding: 10px 12px; }
  :is(#logs, #traces, #metrics) .kpi-strip .kpi-tile-value { font-size: 20px; }
  :is(#logs, #traces, #metrics) .kpi-strip .kpi-tile-label { font-size: 12px; }
}

/* /assets/next/pages/settings.css */
/* ==========================================================================
   Onyx Next: settings pages.
   Connect data (onboarding wizard), Team, Governance, Usage & Billing, System, the Data sources pages
   (data-observability, connectors, connector-detail, integrations, template-builder), Admin and the
   Onyx Internal pages. Page-specific layout only: tokens, the shell, panels, buttons, forms, tables,
   .status / .callout / .tabs / .nx-code live in ../next.css and ../ui.js.

   Rules for this file: tokens only (no hex or rgba), no !important, no shadows for depth, every
   selector scoped by a page id or by an st-/onb- class that only these pages use.
   ========================================================================== */

/* ---------- Shared settings primitives ----------
   .st-group   a panel whose header, rows and footer are separated by hairlines (settings as grouped panels)
   .st-head    title + one-line description on the left, actions on the right
   .st-row     a label / value-or-control row inside a group
   .st-table   a table that sits flush inside a group and becomes stacked cards on phones
   .st-danger  the danger zone: set apart, crit-tinted edge */
.panel.st-group { padding: 0; gap: 0; }
.st-group > :first-child { border-radius: calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0; }
.st-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--hairline);
}
.st-head-text { min-width: 0; flex: 1 1 320px; }
.st-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.st-head p { margin-top: 2px; color: var(--ink-3); font-size: 13px; line-height: 1.5; max-width: 72ch; }
.st-head-aside { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-body { padding: 16px 20px; display: grid; gap: 16px; min-width: 0; }
.st-body > *, .st-group > * { min-width: 0; }
.st-foot {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 20px;
  border-top: 1px solid var(--hairline); background: var(--s2); border-radius: 0 0 calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px);
}
.st-group > .st-head + .st-body, .st-group > .st-head + .st-rows { border-top: 0; }
.st-rows { display: flex; flex-direction: column; min-width: 0; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 20px; border-top: 1px solid var(--hairline); }
.st-row:first-child { border-top: 0; }
.st-row-main { min-width: 0; flex: 1 1 280px; }
.st-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 550; color: var(--ink); }
.st-row-main p, .st-row-main .small-meta { margin-top: 2px; color: var(--ink-3); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.st-row-aside { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex: none; }
.st-empty { padding: 20px; color: var(--ink-3); font-size: 13.5px; }
.st-note { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.st-table-wrap { overflow-x: auto; max-width: 100%; }
.st-table-wrap > table { min-width: 560px; }
.st-group .st-table th:first-child, .st-group .st-table td:first-child { padding-left: 20px; }
.st-group .st-table th:last-child, .st-group .st-table td:last-child { padding-right: 20px; }
.st-table thead th { position: sticky; top: 0; }
.st-table .num, .st-table td.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 13px; }
.st-table td .small-meta, .st-table th[scope="row"] .small-meta { display: block; margin-top: 1px; }
.st-table-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
/* The first cell of a Team or Governance row is its row header (th scope="row"): it reads like the cells beside it, not like a column head. */
:is(#team, #governance) .st-table tbody th[scope="row"] { text-align: left; font-weight: 400; font-size: inherit; color: var(--ink); white-space: normal; background: transparent; padding: 10px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
:is(#team, #governance) .st-table tbody tr:last-child th[scope="row"] { border-bottom: 0; }
:is(#team, #governance) .st-group .st-table tbody th[scope="row"]:first-child { padding-left: 20px; }
:where(.content) :is(#team, #governance) .st-table tbody tr:hover th[scope="row"] { background: var(--s2); }
.st-danger { border-color: color-mix(in srgb, var(--crit) 40%, var(--hairline)); }
.st-danger .st-head h3 { color: var(--crit); }

/* A small button for actions inside a table row or a list row. */
.st-btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.st-btn-danger { color: var(--crit); }
.st-btn-danger:hover { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 45%, var(--hairline-strong)); color: var(--crit); }

/* Neutral provider / protocol marks: one surface and one ink, never a third-party brand colour. */
.provider-badge { box-shadow: none; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-ctl); display: inline-grid; place-items: center;
  background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
}
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge svg { width: 20px; height: 20px; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge svg [fill="#fff"] { fill: currentColor; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge svg [stroke="#fff"] { stroke: currentColor; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge.large { width: 48px; height: 48px; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge.large svg { width: 26px; height: 26px; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .provider-badge.otlp { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ==========================================================================
   Connect data (onboarding wizard)
   A vertical progress rail on the left, the step card on the right, one primary action per step.
   The rail never claims success before data arrives: it turns "done" only when the first-data API says so.
   ========================================================================== */
#onboarding-wizard .onb-shell {
  max-width: none; width: 100%; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px 40px; align-items: start;
}
/* Classic Connect data keeps its header markup. The section is the one card, so the heading is not a separate box. */
#onboarding-wizard.section.active:has(> .section-hero.page-header) {
  background: var(--s1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: 20px 24px 24px;
  gap: 16px;
}
#onboarding-wizard.section.active:has(> .section-hero.page-header) > .section-hero.page-header {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--hairline);
}
#onboarding-wizard.section.active:has(> .section-hero.page-header) .section-hero.page-header p {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  max-width: none;
  height: auto;
}
#onboarding-wizard.section.active:has(> .section-hero.page-header) .ob-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}
#onboarding-wizard .onb-side { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
#onboarding-wizard .onb-stage { grid-column: 2; min-width: 0; }
#onboarding-wizard .onb-compact { display: none; }

/* Progress rail */
#onboarding-wizard .onb-rail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#onboarding-wizard .onb-rail-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0 18px; }
#onboarding-wizard .onb-rail-step:last-child { padding-bottom: 0; }
#onboarding-wizard .onb-rail-step:not(:last-child)::before {
  content: ""; position: absolute; left: 13.5px; top: 38px; bottom: 2px; width: 1px; background: var(--hairline-strong);
}
#onboarding-wizard .onb-rail-step.is-done:not(:last-child)::before { background: var(--accent-line); }
#onboarding-wizard .onb-mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; border: 1.5px solid var(--hairline-hi); color: var(--ink-3); background: var(--canvas);
}
#onboarding-wizard .onb-mark .ph-fill { font-size: 28px; color: var(--accent); }
#onboarding-wizard .is-done > .onb-mark { border: 0; background: transparent; }
#onboarding-wizard .is-current > .onb-mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#onboarding-wizard .is-listening > .onb-mark { border-style: dashed; border-color: var(--accent-line); color: var(--accent); }
#onboarding-wizard .onb-rail-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
#onboarding-wizard .onb-rail-label { font-size: 14px; font-weight: 550; line-height: 1.3; color: var(--ink); }
#onboarding-wizard .is-todo .onb-rail-label { color: var(--ink-2); }
#onboarding-wizard .onb-rail-sub { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Before you start */
#onboarding-wizard .onb-aside { padding: 0; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding-top: 16px; gap: 8px; }
#onboarding-wizard .onb-aside h3 { color: var(--ink); font-size: 13.5px; font-weight: 600; }
#onboarding-wizard .onb-checklist, #onboarding-wizard .onb-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

/* Step card */
#onboarding-wizard .ob-card { padding: 0; gap: 0; }
#onboarding-wizard .ob-head { padding: 20px 24px 0; }
#onboarding-wizard .ob-head p { margin-top: 4px; color: var(--ink-3); font-size: 14px; line-height: 1.5; max-width: 64ch; }
#onboarding-wizard .onb-heading { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin: 0; }
#onboarding-wizard .ob-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
#onboarding-wizard .ob-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 24px;
  border-top: 1px solid var(--hairline); background: var(--s2); border-radius: 0 0 calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px);
}
#onboarding-wizard .onb-body { display: block; }
#onboarding-wizard .onb-main { gap: 0; }

/* Platform tiles */
#onboarding-wizard .onb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#onboarding-wizard .onb-card {
  position: relative; min-height: 64px; flex-direction: row; align-items: center; gap: 14px; padding: 12px 44px 12px 14px;
  background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); color: var(--ink);
}
#onboarding-wizard .onb-card:hover { border-color: var(--hairline-hi); background: var(--s2); }
#onboarding-wizard .onb-card.selected { border: 1px solid var(--accent-line); background: var(--accent-soft); box-shadow: none; }
#onboarding-wizard .onb-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#onboarding-wizard .onb-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#onboarding-wizard .onb-card-text strong { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
#onboarding-wizard .onb-card-text .small-meta { font-size: 12.5px; }
#onboarding-wizard .onb-card-check { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--accent); opacity: 0; }
#onboarding-wizard .onb-card.selected .onb-card-check { opacity: 1; }
/* Platform marks: one 40px tile for every platform, here and on Data sources. A host or cluster shows a Phosphor
   glyph, a language shows its capital letters (platformMark in app.js). Selected = the accent, as the Figma Choice. */
#onboarding-wizard .onb-monogram,
#data-observability .insights-platform-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-ctl); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); letter-spacing: 0.04em; line-height: 1;
}
#onboarding-wizard .onb-monogram .ph, #data-observability .insights-platform-icon .ph { font-size: 22px; line-height: 1; }
#onboarding-wizard .onb-card.selected .onb-monogram, #onboarding-wizard .onb-platform-head .onb-monogram,
#data-observability .insights-platform-card.selected .insights-platform-icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
#data-observability .insights-platform-card {
  min-height: 64px; gap: 14px; padding: 12px 14px; background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); color: var(--ink);
}
#data-observability .insights-platform-card:hover { border-color: var(--hairline-hi); background: var(--s2); }
#data-observability .insights-platform-card.selected { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: none; }
#data-observability .insights-platform-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Selection footer */
#onboarding-wizard .onb-selection { background: var(--s2); border: 0; border-top: 1px solid var(--hairline); border-radius: 0 0 calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px); scroll-margin: 24px; }
#onboarding-wizard .onb-selection-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
#onboarding-wizard .onb-selection-text strong { font-weight: 600; }
#onboarding-wizard .onb-selection-links { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
#onboarding-wizard :is(.primary-btn, .secondary-btn, .ghost-btn, .link-btn, a.onb-docs-link, .copy-btn) { min-height: 44px; }
#onboarding-wizard :is(.link-btn, a.onb-docs-link) { display: inline-flex; align-items: center; }
#onboarding-wizard .onb-docs-link { white-space: normal; }
#onboarding-wizard #onboarding-sdk-heading { margin: 28px 0 12px; }
#onboarding-wizard .onb-selection-text a, #onboarding-wizard .onb-docs-link { color: var(--accent); font-weight: 500; white-space: nowrap; }
#onboarding-wizard .onb-selection-text a:hover, #onboarding-wizard .onb-docs-link:hover { color: var(--accent-hover); }
#onboarding-wizard .onb-selection-flash { animation: onb-flash 900ms ease-out; }
@keyframes onb-flash { from { background: var(--accent-soft); } to { background: var(--s2); } }

/* Setup view: platform head, endpoint, steps */
#onboarding-wizard .onb-platform-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#onboarding-wizard .onb-platform-text { flex: 1 1 260px; min-width: 0; }
#onboarding-wizard .onb-platform-head p { margin-top: 2px; }
#onboarding-wizard .onb-endpoint-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 16px;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel);
}
#onboarding-wizard .onb-endpoint-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
#onboarding-wizard .onb-endpoint-text code { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onb-steps, :is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-steps { gap: 0; list-style: none; margin: 0; padding: 0; }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 0 0 28px; }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step:last-child { padding-bottom: 0; }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step:not(:last-child)::before { left: 13.5px; top: 32px; width: 1px; background: var(--hairline-strong); }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step-num {
  width: 28px; height: 28px; background: var(--s3); color: var(--ink); border: 1px solid var(--hairline-strong); font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step-body { gap: 10px; padding-top: 3px; }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step-body h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step-body > .small-meta, :is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step-body p.small-meta { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
:is(#onboarding-wizard, #governance, #connectors, #template-builder) .onboarding-step-body code { color: var(--ink); background: var(--s3); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
#onboarding-wizard .onb-notes { color: var(--ink-3); }

/* Code blocks: a name bar with Copy, then the snippet on the canvas */
#onboarding-wizard .onb-code.nx-code { overflow: hidden; font-size: 13px; line-height: 1.65; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel); }
#onboarding-wizard .onb-code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 14px; background: var(--s2); border-bottom: 1px solid var(--hairline);
}
#onboarding-wizard .onb-code-label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#onboarding-wizard .onb-code .copy-btn { min-height: 44px; padding: 0 12px; font-size: 13px; background: var(--s1); }
#onboarding-wizard .onb-code .copy-btn.is-copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--hairline-strong)); }
#onboarding-wizard .onb-code-pre { margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); padding: 12px 14px; max-height: 420px; font-size: 12.5px; line-height: 1.65; white-space: pre; tab-size: 2; }
#onboarding-wizard .onb-code-pre code { color: inherit; font-size: inherit; background: none; padding: 0; display: block; max-width: none; overflow-wrap: normal; }
#onboarding-wizard .onb-code-pre:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Token controls */
#onboarding-wizard .onb-token-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#onboarding-wizard .onb-token-row > p { flex: none; }
#onboarding-wizard .onb-token-note { border-left: 0; padding: 12px 14px; font-size: 13px; line-height: 1.5; background: var(--warn-soft); border-radius: var(--r-panel); }
#onboarding-wizard .onb-token-note p { margin: 0; color: var(--ink); }
#onboarding-wizard .onb-token-actions { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }

/* First-data status: waiting, then received. Never green before data arrives. */
#onboarding-wizard .onb-status {
  flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--r-panel);
  border: 1px solid var(--hairline-strong); background: var(--s2);
}
#onboarding-wizard .onb-status-icon { display: inline-flex; flex: none; font-size: 22px; line-height: 1; margin-top: 1px; color: var(--ink-2); }
#onboarding-wizard .onb-status-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
#onboarding-wizard .onb-status-title { font-size: 15px; line-height: 1.4; color: var(--ink); }
#onboarding-wizard .onb-status-title strong { font-weight: 600; letter-spacing: -0.01em; }
#onboarding-wizard .onb-status[data-tone="waiting"] { border-style: dashed; }
#onboarding-wizard .onb-status[data-tone="waiting"] .onb-status-icon { color: var(--accent); }
#onboarding-wizard .onb-status[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
#onboarding-wizard .onb-status[data-tone="ok"] .onb-status-icon { color: var(--ok); }
#onboarding-wizard .onb-status[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
#onboarding-wizard .onb-status[data-tone="warn"] .onb-status-icon { color: var(--warn); }
#onboarding-wizard .onb-status-error { color: var(--warn); }
#onboarding-wizard .onb-status-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
#onboarding-wizard .onb-ghost { display: grid; grid-template-columns: 1.2fr 1fr 0.6fr; gap: 12px; padding-top: 6px; }
#onboarding-wizard .onb-ghost .skeleton { height: 10px; }
.onb-spin { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .onb-spin { animation: onb-spin 1s linear infinite; } }
@keyframes onb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #onboarding-wizard .onb-spin { display: none; }
  #onboarding-wizard .onb-ghost .skeleton { animation: none; }
}
#onboarding-wizard .onb-details { border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); padding: 0; background: var(--s1); }
#onboarding-wizard .onb-details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; font-weight: 550; font-size: 13.5px; border-radius: var(--r-panel);
}
#onboarding-wizard .onb-details > summary::-webkit-details-marker { display: none; }
#onboarding-wizard .onb-details > summary::after { content: "\e136"; font-family: "Phosphor"; margin-left: auto; color: var(--ink-3); font-size: 14px; }
#onboarding-wizard .onb-details[open] > summary::after { transform: rotate(180deg); }
#onboarding-wizard .onb-details[open] { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
#onboarding-wizard .onb-details[open] > summary { border-bottom: 1px solid var(--hairline); border-radius: var(--r-panel) var(--r-panel) 0 0; }
#onboarding-wizard .onb-details > :not(summary) { margin-left: 14px; margin-right: 14px; }

/* Phone: compact stepper replaces the rail */
@media (max-width: 900px) {
  #onboarding-wizard .onb-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #onboarding-wizard .onb-side { position: static; order: 3; }
  #onboarding-wizard .onb-rail { display: none; }
  #onboarding-wizard .onb-stage { grid-column: 1; order: 2; }
  #onboarding-wizard .onb-compact {
    display: flex; flex-direction: column; gap: 8px; order: 1; padding: 10px 14px; min-height: 44px; justify-content: center;
    background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel);
  }
  #onboarding-wizard .onb-compact-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
  #onboarding-wizard .onb-compact-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
  #onboarding-wizard .onb-compact-label { font-weight: 550; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #onboarding-wizard .onb-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  #onboarding-wizard .onb-segs span { height: 4px; border-radius: 2px; background: var(--hairline-strong); }
  #onboarding-wizard .onb-segs span.is-done { background: var(--accent-line); }
  #onboarding-wizard .onb-segs span.is-current { background: var(--accent); }
}
@media (max-width: 640px) {
  #onboarding-wizard .ob-head { padding: 16px 16px 0; }
  #onboarding-wizard .ob-body { padding: 16px 16px 20px; gap: 16px; }
  #onboarding-wizard .ob-foot { padding: 12px 16px; }
  #onboarding-wizard .onb-grid { grid-template-columns: minmax(0, 1fr); }
  #onboarding-wizard .onb-card { min-height: 56px; }
  #onboarding-wizard .onb-selection .primary-btn { width: 100%; }
  #onboarding-wizard .onboarding-step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  #onboarding-wizard .onb-status { flex-wrap: wrap; padding: 12px 14px; }
  #onboarding-wizard .onb-status-actions .primary-btn, #onboarding-wizard .onb-status-actions .secondary-btn { flex: 1 1 140px; }
  #onboarding-wizard .onb-endpoint-summary .copy-btn { width: 100%; }
  #onboarding-wizard .onb-token-actions .primary-btn, #onboarding-wizard .onb-token-actions .secondary-btn { width: 100%; }
  #onboarding-wizard .onb-code .copy-btn { min-height: 44px; }
  #onboarding-wizard .onb-details > summary { min-height: 48px; }
}

/* ==========================================================================
   Shared by Team, Governance, Usage, System, Data sources
   ========================================================================== */
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-strip { margin-bottom: 0; gap: 12px; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile { padding: 14px 16px; gap: 2px; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-value { font-size: 26px; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-bar { background: var(--s3); height: 6px; margin: 8px 0 4px; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-bar-fill { background: var(--accent); }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-bar-fill.warn { background: var(--warn); }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-bar-fill.bad { background: var(--crit); }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-delta.warn { color: var(--warn); }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .kpi-tile-delta.bad { color: var(--crit); }

/* The first line under the page header: the verdict, then the numbers behind it. */
.st-verdict { margin: -4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; }
.st-verdict strong { color: var(--ink); font-weight: 600; }

.st-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.st-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .st-split, .st-two { grid-template-columns: minmax(0, 1fr); } }

.st-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
.st-avatar.is-pending { background: transparent; border: 1px dashed var(--hairline-hi); color: var(--ink-3); }
.st-person-text { display: flex; flex-direction: column; min-width: 0; }
.st-person-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 550; color: var(--ink); }
.st-person-text .small-meta { overflow-wrap: anywhere; font-size: 12.5px; }
.a15-you { font-size: 11.5px; font-weight: 500; color: var(--ink-2); padding: 0 7px; }
.st-cell-actions { text-align: right; }

/* A table that reads as stacked, labelled cards on a phone. */
@media (max-width: 640px) {
  .st-table-wrap > table { min-width: 0; }
  .st-stack-table, .st-stack-table tbody, .st-stack-table tr, .st-stack-table td { display: block; width: 100%; }
  .st-stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .st-stack-table tr { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
  .st-stack-table tbody tr:last-child { border-bottom: 0; }
  .st-stack-table td, .st-group .st-stack-table td:first-child, .st-group .st-stack-table td:last-child {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right;
  }
  .st-stack-table td[data-label]::before { content: attr(data-label); flex: none; color: var(--ink-3); font-size: 12.5px; text-align: left; }
  .st-stack-table td[data-label="Member"], .st-stack-table td[data-label="Invitee"], .st-stack-table td[data-label="Name"] { justify-content: flex-start; text-align: left; }
  .st-stack-table td[data-label="Member"]::before, .st-stack-table td[data-label="Invitee"]::before, .st-stack-table td[data-label="Name"]::before { display: none; }
  .st-stack-table td[data-label="Actions"]::before { display: none; }
  .st-stack-table td .small-meta { text-align: right; }
  .st-stack-table .st-table-actions { justify-content: flex-start; width: 100%; }
  :is(#team, #governance) .st-stack-table th[scope="row"], :is(#team, #governance) .st-group .st-stack-table th[scope="row"]:first-child {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 5px 0; border: 0; text-align: left; background: transparent;
  }
  :is(#team, #governance) .st-stack-table th[scope="row"]::before { display: none; }
  :is(#team, #governance) .st-stack-table th[scope="row"] .small-meta { text-align: left; }
  :where(.content) :is(#team, #governance) .st-stack-table tbody tr:hover th[scope="row"] { background: transparent; }
  :where(.content) .st-stack-table tbody tr:hover td { background: transparent; }
}

/* Drawer: detail and forms that do not need a page of their own. A native <dialog>, so focus is
   trapped while it is open, Escape closes it, and focus returns to the button that opened it. */
dialog.st-drawer {
  margin: 0 0 0 auto; padding: 0; height: 100vh; height: 100dvh; max-height: none; width: min(440px, 100vw); max-width: 100vw;
  border: 0; border-left: 1px solid var(--hairline-strong); border-radius: 0; background: var(--s1); color: var(--ink); overflow: hidden;
}
dialog.st-drawer[open] { display: flex; flex-direction: column; }
dialog.st-drawer::backdrop { background: var(--scrim); }
@media (prefers-reduced-motion: no-preference) {
  dialog.st-drawer[open] { animation: st-drawer-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes st-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.st-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hairline); }
.st-drawer-head h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.st-drawer-head p { margin-top: 4px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.st-drawer-close { min-width: 36px; padding: 0 8px; flex: none; }
.st-drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; align-content: start; }
.st-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
@media (max-width: 640px) {
  dialog.st-drawer { width: 100vw; border-left: 0; }
  .st-drawer-close { min-height: 44px; min-width: 44px; }
}

/* Radio / checkbox options that read as selectable rows */
:is(#team, #governance, #admin) .a15-scope-set { border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); padding: 4px 14px; margin: 0; gap: 0; background: var(--s1); }
:is(#team, #governance, #admin) .a15-scope-set legend { padding: 0 6px; margin-left: -6px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
:is(#team, #governance, #admin) .a15-scope-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hairline); cursor: pointer; }
:is(#team, #governance, #admin) .a15-scope-option:first-of-type { border-top: 0; }
:is(#team, #governance, #admin) .a15-scope-option.is-static { grid-template-columns: minmax(0, 1fr); cursor: default; }
:is(#team, #governance, #admin) .a15-scope-option input { margin-top: 3px; width: 16px; height: 16px; }
:is(#team, #governance, #admin) .a15-scope-option strong { font-weight: 550; color: var(--ink); }
:is(#team, #governance, #admin) .a15-scope-option .small-meta { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
:is(#team, #governance, #admin) .a15-scope-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-ctl); }
:is(#team, #governance, #admin) .a15-scope-option input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* the ring a browser without :has() still gets */
.st-roles { border: 0; padding: 0; background: none; }

/* Forms on these pages: one input style, labels above, errors in crit */
:is(#team, #governance, #admin, #connectors, #template-builder) .a15-form { gap: 14px; }
:is(#team, #governance, #admin) .a15-form input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
:is(#team, #governance, #admin) .a15-form select,
:is(#team, #governance, #admin) .a15-form textarea,
:is(#team, #governance, #admin) .a15-mono-input {
  min-height: 36px; padding: 7px 12px; background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 13.5px;
}
:is(#team, #governance, #admin) .a15-form select { max-width: 280px; background-color: var(--s1); }
:is(#team, #governance, #admin) .a15-form input:hover, :is(#team, #governance, #admin) .a15-form select:hover, :is(#team, #governance, #admin) .a15-form textarea:hover { border-color: var(--hairline-hi); }
:is(#team, #governance, #admin) .a15-form input:focus-visible, :is(#team, #governance, #admin) .a15-form select:focus-visible, :is(#team, #governance, #admin) .a15-form textarea:focus-visible,
:is(#team, #governance, #admin) .a15-mono-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
:is(#team, #governance, #admin) .a15-form input[readonly], :is(#team, #governance, #admin) .a15-mono-input[readonly] { background: var(--s2); color: var(--ink-2); }
:is(#team, #governance, #admin) .a15-mono-input { font-family: var(--font-mono); font-size: 12.5px; }
.a15-error { color: var(--crit); min-height: 0; font-size: 13px; }
.a15-error:empty { display: none; }
.a15-status-msg { color: var(--ink-2); min-height: 0; font-size: 13px; }
.a15-status-msg:empty { display: none; }
:is(#team, #governance, #admin) .ui-field-hint, :is(#team, #governance, #admin, #connectors, #template-builder) .ui-field .ui-field-hint { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
:is(#team, #governance, #admin, #connectors, #template-builder) .ui-field-optional { color: var(--ink-3); font-weight: 400; }

/* Copy rows: a read-only value with its Copy button */
.a15-copy-row { display: flex; gap: 8px; align-items: center; }
.a15-copy-row .a15-mono-input { flex: 1; min-width: 0; }
.st-result { border-color: color-mix(in srgb, var(--ok) 40%, var(--hairline)); background: var(--s1); }
.st-result .st-head { background: var(--ok-soft); }
.st-result .a15-invite-result-title { display: flex; align-items: center; gap: 8px; }
.st-result .a15-invite-result-title .ph-fill { color: var(--ok); font-size: 18px; }
.st-result .a15-invite-result { margin: 0; padding: 0; border: 0; background: none; }

@media (max-width: 640px) {
  .a15-copy-row { flex-direction: column; align-items: stretch; }
  .st-head, .st-row, .st-body, .st-foot { padding-left: 16px; padding-right: 16px; }
  .st-group .st-table th:first-child, .st-group .st-table td:first-child { padding-left: 0; }
  .st-verdict { font-size: 14px; }
}

/* ==========================================================================
   Governance: API tokens, audit trail, single sign-on, two-step verification
   ========================================================================== */
#governance .st-pad { padding: 0 20px 16px; }
#governance .a15-token-prefix { display: inline-block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); background: none; padding: 0; }
#governance .a15-token-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
#governance .a15-token-row .a15-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#governance .st-table .a15-token-row :is(td, th[scope="row"]) { vertical-align: top; padding-top: 12px; padding-bottom: 12px; } /* .st-table: out-weighs the row-header rule above */
#governance .a15-token-row .small-meta { display: block; margin-top: 2px; max-width: 46ch; }
#governance .a15-token-retired { border-top: 1px solid var(--hairline); }
#governance .a15-token-retired > summary { list-style: none; cursor: pointer; padding: 12px 20px; min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
#governance .a15-token-retired > summary::-webkit-details-marker { display: none; }
#governance .a15-token-retired > summary::after { content: "\e136"; font-family: "Phosphor"; color: var(--ink-3); margin-left: auto; }
#governance .a15-token-retired[open] > summary::after { transform: rotate(180deg); }

/* The one-time secret: loud on purpose, because it is shown once */
.st-secret { margin: 16px 20px; padding: 14px 16px; display: grid; gap: 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); background: var(--s2); }
.st-secret.is-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.st-secret.is-info { border-color: var(--accent-line); background: var(--accent-soft); }
.st-secret p { margin: 0; }
.st-secret .a15-invite-result-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.st-secret .a15-invite-result-title .ph-fill { font-size: 18px; }
.st-secret.is-warn .a15-invite-result-title .ph-fill { color: var(--warn); }
.st-secret.is-info .a15-invite-result-title .ph-fill { color: var(--accent); }
.st-secret .action-row { justify-content: flex-start; }
.st-secret .a15-mono-input { background: var(--canvas); }

/* The two creation forms sit side by side under the list, separated by a hairline */
#governance .st-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
#governance .st-forms > form { padding: 20px; min-width: 0; align-content: start; margin: 0; border: 0; }
#governance .st-forms > form + form { border-left: 1px solid var(--hairline); }
#governance .a15-token-form h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
#governance .a15-token-form .action-row { justify-content: flex-start; }
@media (max-width: 1000px) {
  #governance .st-forms { grid-template-columns: minmax(0, 1fr); }
  #governance .st-forms > form + form { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* Audit trail: one event per row */
#governance .st-rows .st-row { align-items: flex-start; }
#governance .a15-row-time { white-space: nowrap; font-size: 12.5px; color: var(--ink-3); flex: none; }

/* Single sign-on: header with the protocol mark, steps, protocol tiles */
.st-head .template-builder-header { padding: 0; margin: 0; border: 0; gap: 14px; align-items: center; }
.st-head .template-builder-header-text h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.st-head .template-builder-header-text p { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.sso-protocol-icon, :is(#governance, #connectors) .sso-protocol-icon.oidc, :is(#governance, #connectors) .sso-protocol-icon.saml {
  background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); box-shadow: none; border-radius: var(--r-ctl);
}
:is(#governance, #connectors) .sso-protocol-icon svg [stroke="#fff"] { stroke: currentColor; }
:is(#governance, #connectors) .sso-protocol-icon svg [fill="#fff"] { fill: currentColor; }
#governance .sso-protocol-icon.large { width: 44px; height: 44px; flex: none; border-radius: var(--r-ctl); }
#governance .sso-protocol-icon.large svg { width: 24px; height: 24px; }
#governance .sso-protocol-icon.large.oidc, #governance .sso-protocol-card.selected .sso-protocol-icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
#governance .sso-protocol-grid { gap: 10px; }
#governance .sso-protocol-card {
  padding: 12px 14px; gap: 12px; background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); color: var(--ink);
}
#governance .sso-protocol-card:hover { border-color: var(--hairline-hi); background: var(--s2); }
#governance .sso-protocol-card.selected { border: 1px solid var(--accent-line); background: var(--accent-soft); }
#governance .sso-protocol-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#governance .team-role-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#governance .team-role-card-text strong { font-weight: 600; }
#governance .team-role-card-text .small-meta { font-size: 12.5px; line-height: 1.45; }
#governance .a15-fields { gap: 14px; }
#governance .a15-fields input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #governance .a15-fields select, #governance .a15-fields textarea { width: 100%; max-width: none; }
#governance .a15-inline { gap: 10px; }
#governance .st-sso-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
#governance #sso-read-notice { flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
#governance #sso-read-notice p { flex: 1 1 240px; margin: 0; }
#governance .a15-inline input[type="file"] { min-height: 36px; padding: 5px 8px; max-width: 100%; min-width: 0; }
#governance .onboarding-step-body, #governance .a15-fields, #governance .ui-field { min-width: 0; } /* a native file input otherwise holds the whole SAML form at its own width on a phone */
#governance .onboarding-steps.a15-form { gap: 0; display: flex; }

/* Service provider details */
#governance .a15-keys { display: grid; gap: 14px; }
#governance .a15-key-row { padding: 0; border: 0; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
#governance .a15-key-label strong { font-weight: 550; white-space: normal; }
#governance .a15-key-label .small-meta { margin: 0; font-size: 12.5px; }
#governance .a15-key-value { display: flex; align-items: stretch; gap: 8px; justify-content: space-between; min-width: 0; }
#governance .a15-key-code, #governance #governance-tenant-url-panel .a15-key-code {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: 8px 12px; letter-spacing: normal; background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-ctl); font-size: 12.5px;
}
#governance #governance-tenant-url-panel .a15-copy-row { align-items: stretch; }

/* Two-step verification */
#governance .security-toggle { min-height: 36px; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
#governance .security-toggle input { width: 18px; height: 18px; }
#governance #governance-mfa-status:empty { display: none; }
#governance .st-foot .a15-status-msg { flex: 1 1 200px; margin: 0; }
#governance .auth-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* ==========================================================================
   Usage & Billing: plan band, meters, data received, plan cards, notifications
   ========================================================================== */
#usage .st-pad { padding: 0 20px 16px; }
#usage .st-plan-group { gap: 0; }
#usage .st-plan-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 20px;
  background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0;
}
#usage .st-plan-hero.is-warn { background: var(--warn-soft); }
#usage .st-plan-hero.is-crit { background: var(--crit-soft); }
#usage .st-plan-hero-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 360px; }
#usage .st-plan-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin: 0; }
#usage .a06-plan-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
#usage .st-plan-hero .small-meta { max-width: 66ch; font-size: 13.5px; line-height: 1.5; }
#usage .st-plan-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
#usage .st-plan-group > .kpi-strip { margin: 0; padding: 16px 20px 18px; gap: 12px; }
#usage .st-plan-group > .kpi-strip .kpi-tile { background: var(--s2); }

#usage .a06-table-wrap { margin: 0; }
#usage .a06-table th[scope="row"] { font-weight: 550; color: var(--ink); font-size: 13.5px; background: transparent; border-bottom: 1px solid var(--hairline); padding: 10px 16px; text-align: left; white-space: normal; }
#usage .a06-table tbody tr:last-child th { border-bottom: 0; }
#usage .a06-table th[scope="row"]:first-child { padding-left: 20px; }
#usage .a06-footnote { font-size: 12.5px; line-height: 1.5; max-width: 90ch; }

#usage .st-plans-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
#usage .st-plans-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
#usage .st-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: stretch; }
#usage .st-plan-card { gap: 0; align-content: start; grid-template-rows: auto 1fr auto; }
#usage .st-plan-card.is-current { border-color: var(--accent-line); background: var(--s1); }
#usage .st-plan-card-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--hairline); display: grid; gap: 4px; }
#usage .st-plan-card-head h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
#usage .st-plan-price { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
#usage .st-features { list-style: none; margin: 0; padding: 14px 20px; display: grid; gap: 10px; align-content: start; }
#usage .st-features li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); border: 0; padding: 0; }
#usage .st-features .a06-feature-check { color: var(--ok); margin-top: 2px; font-size: 14px; }
#usage .st-plan-card-foot { padding: 14px 20px 18px; display: flex; }
#usage .st-plan-card-foot .primary-btn { width: 100%; }

#usage .paywall-inline-alert { margin: 0; border-radius: var(--r-panel); justify-content: space-between; flex-wrap: wrap; background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); color: var(--ink); font-weight: 500; }
#usage .paywall-inline-warning { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
#usage .paywall-inline-alert strong { font-weight: 600; }
#usage .a06-billing-message:empty { display: none; }
#usage #billing-checkout-notice { margin: 0; padding: 14px 16px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-panel); display: grid; gap: 8px; }
#usage #billing-checkout-notice p { margin: 0; }
#usage #billing-checkout-notice .action-row { justify-content: flex-start; }
#usage .st-rows .st-row-aside .small-meta { text-align: right; }
@media (max-width: 640px) {
  #usage .st-plan-hero { padding: 16px; }
  #usage .st-plan-hero-actions .primary-btn, #usage .st-plan-hero-actions .secondary-btn { width: 100%; }
  #usage .st-plan-group > .kpi-strip { padding: 12px 16px 16px; }
  #usage .a06-table th[scope="row"] { border: 0; padding: 0 0 4px; font-size: 14px; }
  #usage .st-stack-table th[scope="row"] { display: block; width: 100%; text-align: left; }
  #usage .st-stack-table th[scope="row"]::before { display: none; }
}

/* ---------- Paywall overlay and the trial banner ---------- */
#paywall-overlay .paywall-backdrop { background: var(--scrim); backdrop-filter: none; }
#paywall-overlay .paywall-modal {
  background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-frame); box-shadow: var(--shadow-pop); color: var(--ink);
  padding: 28px 28px 24px; max-width: 440px; text-align: left;
}
#paywall-overlay .paywall-icon {
  width: 44px; height: 44px; margin: 0 0 16px; border-radius: var(--r-ctl); display: grid; place-items: center; font-size: 24px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
#paywall-overlay .paywall-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); }
#paywall-overlay .paywall-msg { font-size: 14px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.55; }
#paywall-overlay .paywall-actions { flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
#paywall-overlay .paywall-actions > * { flex: 0 1 auto; }
@media (max-width: 640px) {
  #paywall-overlay .paywall-modal { padding: 22px 18px 18px; width: calc(100% - 24px); }
  #paywall-overlay .paywall-actions { flex-direction: column; }
  #paywall-overlay .paywall-actions > * { width: 100%; min-height: 44px; }
}
.content > .trial-banner { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--ink); }
.content > .trial-banner-critical { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.content > .trial-banner .trial-banner-link { color: var(--ink); font-weight: 600; text-decoration: underline; }
.content > .trial-banner .trial-banner-close { color: var(--ink-2); }

/* ==========================================================================
   System: ingestion health. Verdict first, then evidence, then detail.
   ========================================================================== */
#system .panel + .panel { margin-top: 0; }
.st-verdict-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-actions-start { justify-content: flex-start; }
:is(#system, #usage) .a06-table { font-size: 13.5px; }
:is(#system, #usage) .a06-table th, :is(#system, #usage) .a06-table td { padding: 10px 16px; border-bottom: 1px solid var(--hairline); }
:is(#system, #usage) .a06-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--s1); white-space: nowrap; }
:is(#system, #usage) .a06-table tbody th { font-weight: 550; color: var(--ink); text-align: left; white-space: normal; }
:is(#system, #usage) .a06-table tbody tr:last-child th, :is(#system, #usage) .a06-table tbody tr:last-child td { border-bottom: 0; }
:is(#system, #usage) .a06-table th:first-child, :is(#system, #usage) .a06-table td:first-child { padding-left: 20px; }
:is(#system, #usage) .a06-table th:last-child, :is(#system, #usage) .a06-table td:last-child { padding-right: 20px; }
:is(#system, #usage) .a06-table td { white-space: nowrap; color: var(--ink); }
#system .st-group > .st-table-wrap { margin: 0; }
#system .st-body .kpi-strip { margin: 0; }
#system .st-body > .a06-throughput { margin-top: 4px; }
#system .st-body .a06-table-wrap { border: 1px solid var(--hairline); border-radius: var(--r-panel); margin: 0; overflow-x: auto; }
#system .st-body .a06-table th:first-child, #system .st-body .a06-table td:first-child { padding-left: 16px; }
#system .st-body .a06-table th:last-child, #system .st-body .a06-table td:last-child { padding-right: 16px; }
#system .system-gw-splits { margin-top: 0; gap: 16px; }
#system .system-gw-subhead { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
#system .system-gw-window { color: var(--ink-3); font-size: 12.5px; gap: 8px; }
#system .system-gw-window select { min-height: 32px; padding: 4px 28px 4px 10px; font-size: 13px; border-radius: var(--r-ctl); border: 1px solid var(--hairline-strong); background-color: var(--s1); color: var(--ink); }
#system .a06-footnote { font-size: 12.5px; line-height: 1.5; max-width: 90ch; margin: 0; color: var(--ink-3); }
#system .st-rows .num { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Requests per bucket: accepted bars with the rejected share overlaid in crit */
#system .a06-throughput { height: 168px; gap: 4px; padding-top: 4px; }
#system .a06-bar-track { border-bottom: 1px solid var(--hairline-strong); }
#system .a06-bar { background: var(--accent-line); width: 78%; max-width: 28px; border-radius: 3px 3px 0 0; }
#system .a06-bar-error { background: var(--crit); }
#system .a06-bar-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
#system .a06-legend { color: var(--ink-3); font-size: 12px; margin-top: 8px; }
#system .a06-swatch { background: var(--accent-line); }
#system .a06-swatch-error { background: var(--crit); }
@media (max-width: 640px) {
  #system .a06-throughput { height: 132px; gap: 2px; }
  #system .st-body { padding: 14px 16px; }
  #system .st-stack-table th[scope="row"] { display: block; width: 100%; text-align: left; border: 0; padding: 0 0 4px; }
  #system .st-stack-table th[scope="row"]::before { display: none; }
  #system .st-split-table { overflow-x: auto; }
}

/* ==========================================================================
   Data sources: tabs, catalog rows, connectors, connector detail, integration templates, template builder
   ========================================================================== */
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .st-body { gap: 16px; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) code { color: var(--ink); background: var(--s3); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; overflow-wrap: anywhere; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .small-meta { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
#connector-detail .st-sync-notes p.small-meta:has(> strong:first-child) { border-left: 2px solid var(--warn); padding-left: 10px; }
#connector-detail .st-sync-notes p.small-meta:has(> strong:first-child) strong { color: var(--ink); }
#connector-detail .action-row { justify-content: flex-start; }

/* Tabs: the shared underline tabs, over the old settings-nav buttons */
#data-observability .tabs.settings-nav { gap: 20px; margin: 0; border-bottom: 1px solid var(--hairline); }
#data-observability .settings-nav-item {
  min-height: 40px; margin: 0; padding: 10px 2px 11px; border: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-3);
}
#data-observability .settings-nav-item:hover { color: var(--ink); }
#data-observability .settings-nav-item.active { color: var(--ink); font-weight: 500; border-bottom-color: transparent; }
@media (max-width: 640px) { #data-observability .settings-nav-item { min-height: 44px; } }

/* Catalog rows: provider mark, name + status + description, actions */
#data-observability .catalog-list.st-rows { gap: 0; }
.catalog-row.st-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-bottom: 0; border-top: 1px solid var(--hairline); }
.catalog-row.st-row:first-child { border-top: 0; }
.catalog-row.st-row .catalog-row-text { flex: 1 1 320px; gap: 4px; }
.catalog-row.st-row .small-meta { max-width: 78ch; }
.catalog-row.st-row .st-row-aside { align-self: center; }
:is(#team, #governance, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
:is(#team, #governance, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) .title-row strong { font-weight: 550; color: var(--ink); }
.a15-otel-row { background: var(--accent-soft); border-radius: 0; padding-left: 20px; padding-right: 20px; }
.a15-status { color: inherit; }
:is(#data-observability, #connectors, #connector-detail, #integrations, #template-builder) .status { font-size: 12px; }
@media (max-width: 640px) {
  .catalog-row.st-row { flex-wrap: wrap; padding: 14px 16px; }
  .catalog-row.st-row .st-row-aside { width: 100%; justify-content: flex-start; }
  .catalog-row.st-row .st-row-aside .primary-btn, .catalog-row.st-row .st-row-aside .ghost-btn, .catalog-row.st-row .st-row-aside .secondary-btn { flex: 1 1 140px; }
}

/* Rows built from the older dashboard-item class sit flush in a group */
.st-rows > .dashboard-item.st-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; transform: none;
}
.st-rows > .dashboard-item.st-row:first-child { border-top: 0; }
.st-rows > .dashboard-item.st-row:hover { background: var(--s2); transform: none; border-color: var(--hairline); }
.st-connector-row .st-row-main, .st-store-row .st-row-main, .st-endpoint-row .st-row-main, .st-agent-row .st-row-main { flex: 1 1 320px; display: grid; gap: 3px; align-content: start; }
.st-connector-row .st-row-aside, .st-store-row .st-row-aside, .st-endpoint-row .st-row-aside, .st-agent-row .st-row-aside { justify-content: flex-end; align-self: flex-start; }
.st-store-row .st-row-aside, .st-endpoint-row .st-row-aside, .st-agent-row .st-row-aside { display: grid; justify-items: stretch; gap: 8px; min-width: 132px; }
.st-row-title .chip { font-weight: 400; }
.st-payload code { display: block; background: var(--canvas); border: 1px solid var(--hairline); padding: 8px 10px; border-radius: var(--r-ctl); line-height: 1.55; }
.st-empty { padding: 20px; }
.st-snippet { margin-top: 4px; }
.st-snippet > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; font-weight: 500; min-height: 28px; }
.st-snippet > summary::-webkit-details-marker { display: none; }
.st-snippet > summary::after { content: "\e136"; font-family: "Phosphor"; font-size: 12px; }
.st-snippet[open] > summary::after { transform: rotate(180deg); }
.st-snippet .nx-code { margin-top: 6px; }
.st-snippet .nx-code pre { margin: 0; padding: 12px 14px; color: var(--ink); background: transparent; border: 0; border-radius: 0; font-size: 12.5px; line-height: 1.65; white-space: pre; max-height: 320px; overflow: auto; }
.st-agent-form { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 10px; align-items: end; }
.st-agent-form input, .st-agent-form select { background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); padding: 7px 12px; min-height: 36px; font-size: 13.5px; color: var(--ink); width: 100%; }
.st-agent-form button { min-height: 36px; align-self: end; }
@media (max-width: 640px) {
  .st-rows > .dashboard-item.st-row { flex-wrap: wrap; padding: 14px 16px; }
  .st-connector-row .st-row-aside, .st-store-row .st-row-aside, .st-endpoint-row .st-row-aside, .st-agent-row .st-row-aside { width: 100%; justify-content: flex-start; display: flex; flex-wrap: wrap; }
  .st-connector-row .st-row-aside > *, .st-store-row .st-row-aside > *, .st-endpoint-row .st-row-aside > *, .st-agent-row .st-row-aside > * { flex: 1 1 140px; }
  .st-agent-form { grid-template-columns: minmax(0, 1fr); }
  .st-agent-form button { width: 100%; min-height: 44px; }
  .st-agent-form input, .st-agent-form select { min-height: 44px; }
}

/* Connector rows: sync summary and errors */
#connectors .connector-error, #connector-detail .connector-error {
  margin: 4px 0 0; padding: 8px 12px; border-radius: var(--r-ctl); border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); background: var(--crit-soft); color: var(--ink); line-height: 1.5;
}
#connectors .connector-error strong, #connector-detail .connector-error strong { color: var(--crit); font-weight: 600; }
#connectors .connector-error .muted, #connector-detail .connector-error .muted { color: var(--ink-3); }
#connector-detail > .connector-error { margin: 0; }
#connectors .onboarding-status-row { display: inline-flex; }

/* Source picker and guided setup */
#connectors .st-picker { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
#connectors .st-picker .onboarding-card {
  flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; min-height: 64px; background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); color: var(--ink);
}
#connectors .st-picker .onboarding-card:hover { background: var(--s2); border-color: var(--hairline-hi); }
#connectors .st-picker .onboarding-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#connectors .onb-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#connectors .onb-card-text strong { font-weight: 600; }
#connectors .onb-card-go { color: var(--ink-3); flex: none; }
#connectors .onboarding-body { display: block; }
#connectors .st-note { font-size: 13px; }
#connectors .connector-setup-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 0; }
#connectors .connector-setup-side { top: calc(var(--topbar-h) + 16px); }
#connectors .onboarding-info-panel, #template-builder .onboarding-info-panel {
  padding: 16px; background: var(--s2); border: 1px solid var(--hairline); border-radius: var(--r-panel); gap: 8px;
}
#connectors .onboarding-info-panel h3 { color: var(--ink); font-size: 14.5px; font-weight: 600; }
#connectors .onboarding-info-panel p { color: var(--ink-3); font-size: 13px; line-height: 1.55; }
#connectors .st-info-head { display: flex; align-items: center; gap: 10px; }
#connectors .setup-method-card { border: 1px solid var(--accent-line); border-radius: var(--r-panel); overflow: hidden; margin-bottom: 20px; background: var(--s1); }
#connectors .setup-method-primary { background: var(--accent-soft); padding: 12px 14px; }
#connectors .setup-method-primary .check-icon { color: var(--accent); font-size: 18px; width: auto; display: inline-flex; }
#connectors .setup-method-primary strong { color: var(--ink); font-weight: 600; }
#connectors .setup-method-advanced-select { background-color: var(--s1); color: var(--ink-2); border-top: 1px solid var(--hairline); border-radius: 0; padding: 10px 14px; min-height: 40px; font-size: 13px; width: 100%; }
#connectors .builder-row, #template-builder .builder-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: start; }
#connectors .builder-row > button, #template-builder .builder-row > button { justify-self: start; }
#connectors .onboarding-step-body .builder-row:has(> .primary-btn) { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#connectors, #template-builder) .ui-field { gap: 4px; grid-template-columns: minmax(0, 1fr); }
:is(#connectors, #template-builder) .ui-field-hint { overflow-wrap: anywhere; } /* an ARN in a hint must not widen the form past a phone */
:is(#connectors, #template-builder) input:not([type="checkbox"]):not([type="radio"]), :is(#connectors, #template-builder) select, :is(#connectors, #template-builder) textarea { width: 100%; max-width: 100%; }
:is(#connectors, #template-builder) .connector-schema-fields { display: grid; gap: 14px; }
:is(#connectors, #template-builder) .connector-form-status { min-height: 0; }
:is(#connectors, #template-builder) .connector-form-status:empty { display: none; }
:is(#connectors, #template-builder) .connector-toggle-list { border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); background: var(--s1); overflow: hidden; }
:is(#connectors, #template-builder) .connector-toggle-row { padding: 12px 14px; border-bottom: 1px solid var(--hairline); min-height: 44px; }
:is(#connectors, #template-builder) .connector-toggle-row:hover { background: var(--s2); }
:is(#connectors, #template-builder) input.toggle-input { width: 38px; height: 22px; padding: 0; min-height: 0; background: var(--s4); border: 1px solid var(--hairline-strong); border-radius: 99px; flex: none; }
:is(#connectors, #template-builder) input.toggle-input::before { background: var(--ink); box-shadow: none; top: 1px; left: 1px; width: 18px; height: 18px; }
:is(#connectors, #template-builder) input.toggle-input:checked { background: var(--accent); border-color: var(--accent); }
:is(#connectors, #template-builder) input.toggle-input:checked::before { background: var(--accent-ink); transform: translateX(16px); }
:is(#connectors, #template-builder) input.toggle-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 900px) { #connectors .connector-setup-grid { grid-template-columns: minmax(0, 1fr); } #connectors .connector-setup-side { position: static; } }

/* Integration templates */
#integrations .st-integrations { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
#integrations .integration-card { padding: 16px; gap: 10px; align-content: start; grid-template-rows: auto 1fr auto auto; background: var(--s1); }
#integrations .integration-card:hover { background: var(--s2); }
#integrations .integration-card > p { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0; }
#integrations .st-integration-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
#integrations .st-integration-name strong { font-weight: 600; letter-spacing: -0.01em; }
#integrations .st-integration-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#integrations .integration-card .secondary-btn { justify-self: start; }
@media (max-width: 640px) { #integrations .integration-card .secondary-btn { width: 100%; } }

/* Connector detail and template builder */
#connector-detail .st-detail-body { display: grid; gap: 8px; align-content: start; }
#connector-detail .st-detail-body > p, #connector-detail .st-detail-body > .small-meta { margin: 0; }
#connector-detail .st-sync-notes strong { color: var(--ink); font-weight: 600; }
#connector-detail .st-kv { width: 100%; }
#connector-detail .st-kv th, #connector-detail .st-kv td { padding: 9px 0; text-align: left; border-bottom: 1px solid var(--hairline); font-size: 13.5px; vertical-align: top; text-transform: none; letter-spacing: 0; }
#connector-detail .st-kv th { width: 38%; color: var(--ink-3); font-weight: 400; padding-right: 16px; font-size: 13px; background: transparent; white-space: normal; }
#connector-detail .st-kv tr:last-child th, #connector-detail .st-kv tr:last-child td { border-bottom: 0; }
#connector-detail .st-body .sa-table:not(.st-kv) { min-width: 520px; }
#connector-detail .st-body:has(.sa-table:not(.st-kv)) { overflow-x: auto; }
#connector-detail .sa-table:not(.st-kv) th, #connector-detail .sa-table:not(.st-kv) td { padding: 9px 12px; text-transform: none; letter-spacing: 0; font-size: 13px; }
#connector-detail .sa-table:not(.st-kv) th { font-weight: 500; color: var(--ink-3); }
#connector-detail .sa-table:not(.st-kv) th:first-child, #connector-detail .sa-table:not(.st-kv) td:first-child { padding-left: 0; }
#connector-detail .aws-setup-doc { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--hairline); }
#connector-detail .aws-setup-doc:first-child { border-top: 0; padding-top: 0; }
#connector-detail .cloud-setup-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
#connector-detail .cloud-setup-params input { width: 100%; max-width: 100%; }
#connector-detail .cloud-setup-params input[aria-invalid="true"] { border-color: var(--crit); }
#connector-detail .aws-setup-doc .title-row { justify-content: space-between; align-items: center; }
#connector-detail .aws-setup-doc .action-row { flex-wrap: wrap; }
#connector-detail .cloud-setup-warning { border-left: 2px solid var(--warn); padding-left: 10px; }
@media (max-width: 640px) {
  #connector-detail .cloud-setup-params { grid-template-columns: minmax(0, 1fr); }
  #connector-detail .aws-setup-doc .title-row { align-items: stretch; }
  #connector-detail .aws-setup-doc .action-row { width: 100%; }
  #connector-detail .aws-setup-doc .action-row .ghost-btn { flex: 1 1 120px; min-height: 44px; }
  #connector-detail .page-header-actions { flex-wrap: wrap; }
  #connector-detail .code-block { font-size: 11.5px; }
}
#connector-detail .code-block, #connectors .code-block, #template-builder .code-block { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel); color: var(--ink); font-size: 12.5px; line-height: 1.65; padding: 12px 14px; }
#connector-detail .st-detail-grid { align-items: start; }
.st-foot-note { flex: 1 1 260px; margin: 0; }
#template-builder .st-foot .primary-btn { order: 0; }

/* ==========================================================================
   Admin (platform super admins): grouped forms, tenant rows, lists
   ========================================================================== */
#admin .st-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; align-items: start; }
#admin .st-form-grid .ui-field { min-width: 0; }
#admin .st-form-grid input:not([type="checkbox"]):not([type="radio"]), #admin .st-form-grid select { width: 100%; max-width: none; }
#admin .st-body-tight { padding-top: 0; }
#admin .st-body-tight .small-meta { color: var(--ink-3); font-size: 13px; }
#admin #admin-invite-result:not(.hidden) { margin-top: 8px; }
#admin .st-rows > .dashboard-item.st-row, #admin .st-rows > .insight-item.st-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0;
}
#admin .st-rows > .st-row:first-child { border-top: 0; }
#admin .st-rows > .st-row:hover { background: var(--s2); }
#admin .st-tenant-row .st-row-main { display: grid; gap: 6px; }
#admin .st-actions-start { justify-content: flex-start; margin-top: 4px; }
#admin .st-ordered { list-style: none; margin: 0; padding: 0; }
#admin .st-index {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 600;
  background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); font-variant-numeric: tabular-nums;
}
#admin code { color: var(--ink); background: var(--s3); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
@media (max-width: 640px) {
  #admin .st-rows > .st-row { flex-wrap: wrap; padding: 14px 16px; }
  #admin .st-rows > .st-row .st-row-aside { width: 100%; justify-content: flex-start; }
  #admin .st-foot .primary-btn { width: 100%; }
}

/* ==========================================================================
   Onyx Internal pages: they only need to look right in the new language
   ========================================================================== */
.internal-badge { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-weight: 600; letter-spacing: 0.06em; font-size: 11.5px; padding: 2px 9px; }
.internal-env-staging { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.internal-env-production { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.internal-env-unknown { background: var(--low-soft); color: var(--ink-2); border: 1px dashed var(--hairline-hi); }
.internal-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; font-size: 12px; font-weight: 500; text-transform: capitalize; border: 1px solid transparent; }
.internal-pill::before { font-family: "Phosphor"; font-size: 14px; line-height: 1; text-transform: none; }
.internal-pill-healthy { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.internal-pill-healthy::before { content: "\e184"; }
.internal-pill-degraded { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.internal-pill-degraded::before { content: "\e4e0"; }
.internal-pill-down { color: var(--crit); background: var(--crit-soft); border-color: transparent; }
.internal-pill-down::before { content: "\e4f8"; }
.internal-pill-unknown { color: var(--ink-3); background: transparent; border: 1px dashed var(--hairline-strong); }
.internal-pill-unknown::before { content: "\e3e8"; }
.internal-summary { margin: 0 0 4px; }
.internal-stale { color: var(--warn); font-weight: 500; font-size: 13px; }
.internal-notice { padding: 12px 14px; border-radius: var(--r-panel); margin: 0 0 12px; border: 1px solid var(--hairline-strong); background: var(--s2); color: var(--ink); }
.internal-notice-error { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: var(--crit-soft); }
.internal-body { display: grid; gap: 12px; align-content: start; }
.internal-signal-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.internal-signal { padding: 14px 16px; gap: 6px; }
.internal-signal-head strong { font-weight: 550; }
.internal-signal-value { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--ink); }
.internal-filters { margin: 0 0 12px; gap: 8px; align-items: center; }
.internal-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--s1); }
.internal-table th, .internal-table td { padding: 10px 16px; border-bottom: 1px solid var(--hairline); }
.internal-table th { font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.internal-table tbody tr:last-child td { border-bottom: 0; }
.internal-pager { margin: 4px 0 0; }
@media (max-width: 640px) {
  .internal-filters > * { flex: 1 1 100%; }
  .internal-table th, .internal-table td { padding: 10px 12px; }
}

/* ---------- Polish: table cell text, connector detail notes ---------- */
.st-table td .small-meta, .st-table th .small-meta { font-size: 12.5px; }
#governance .a15-token-row .small-meta { font-size: 12.5px; }
#governance .a15-token-row :is(td, th[scope="row"]) { font-size: 13.5px; }

#onboarding-wizard .onb-aside .small-meta { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
#onboarding-wizard .onb-selection-text a, #onboarding-wizard .onb-docs-link { text-decoration: none; }
#onboarding-wizard .onb-selection-text a:hover, #onboarding-wizard .onb-docs-link:hover { text-decoration: underline; }
.internal-body > .a15-row { background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: 12px 16px; }

/* ---------- Phones: 44px touch targets for everything these pages add on top of the shared controls ---------- */
@media (max-width: 640px) {
  .st-btn-sm, .a15-small-btn { min-height: 44px; padding: 0 14px; }
  :is(#onboarding-wizard, #team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) :is(.link-btn, .auth-link) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  :is(#onboarding-wizard, #team, #governance, #usage, #system, #data-observability, #connectors, #connector-detail, #integrations, #template-builder, #admin) select { min-height: 44px; }
  :is(#onboarding-wizard, #connectors) .onb-selection-text a, #onboarding-wizard .onb-docs-link { display: inline-flex; align-items: center; min-height: 44px; }
  :is(#governance, #connectors, #admin) textarea { min-height: 88px; }
  #connectors .st-snippet > summary, #governance .a15-token-retired > summary { min-height: 44px; }
  .internal-body :is(.primary-btn, .ghost-btn), .internal-filters :is(input, select, button) { min-height: 44px; }
}
@media (max-width: 640px) {
  :is(#team, #governance, #admin) .a15-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select),
  :is(#team, #governance, #admin) .a15-mono-input { min-height: 44px; }
  #governance .security-toggle { min-height: 44px; }
  #governance .a15-inline input[type="file"] { min-height: 44px; width: 100%; }
  #system .system-gw-window select { min-height: 44px; }
  #admin .st-form-grid :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; }
  #connectors .st-agent-form :is(input, select) { min-height: 44px; }
}
@media (max-width: 640px) {
  :is(#team, #governance, #usage, #system, #connector-detail, #admin) .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#team, #governance, #usage, #system, #connector-detail, #admin) .kpi-tile-value { font-size: 22px; }
  :is(#team, #governance, #usage, #system, #connector-detail, #admin) .kpi-tile { padding: 12px; }
  #usage .st-plan-group > .kpi-strip { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Confirmation dialog, toast and empty states used by these pages ---------- */
/* The confirmation dialog only. The two-step verification dialog (also .a15-dialog, .security-dialog) belongs to the
   sign-in and MFA flow, which this stylesheet leaves exactly as it was. */
.a15-dialog:not(.security-dialog) { background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-frame); box-shadow: var(--shadow-pop); width: min(460px, calc(100vw - 24px)); }
.a15-dialog:not(.security-dialog)::backdrop { background: var(--scrim); }
.a15-dialog:not(.security-dialog) .a15-dialog-body { padding: 20px 20px 18px; gap: 10px; }
.a15-dialog:not(.security-dialog) .a15-dialog-body h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.a15-dialog:not(.security-dialog) .a15-dialog-body p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.a15-dialog:not(.security-dialog) .a15-dialog-body input { background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); min-height: 36px; padding: 7px 12px; }
.a15-dialog:not(.security-dialog) .a15-dialog-actions { margin-top: 8px; }
.a15-danger-btn, .a15-danger-outline-btn { min-height: 36px; padding: 0 14px; border-radius: var(--r-ctl); font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; }
.a15-danger-btn { background: var(--crit); color: var(--canvas); border: 1px solid var(--crit); }
.a15-danger-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--crit) 88%, var(--ink)); }
.a15-danger-outline-btn { background: transparent; color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 55%, var(--hairline-strong)); }
.a15-danger-outline-btn:hover:not(:disabled) { background: var(--crit-soft); }
.a15-danger-zone { border: 1px solid color-mix(in srgb, var(--crit) 40%, var(--hairline)); border-radius: var(--r-panel); background: var(--s1); }
@media (max-width: 640px) {
  .a15-dialog:not(.security-dialog) .a15-dialog-actions { flex-direction: column-reverse; }
  .a15-dialog:not(.security-dialog) .a15-dialog-actions > * { width: 100%; min-height: 44px; }
  .a15-dialog:not(.security-dialog) .a15-dialog-body input { min-height: 44px; }
}
.app-toast { background: var(--s2); color: var(--ink); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); font-size: 13.5px; }
.app-toast.is-visible { border-color: color-mix(in srgb, var(--ok) 45%, var(--hairline-hi)); }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state {
  align-items: flex-start; text-align: left; gap: 6px; padding: 28px 24px;
}
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state-icon { opacity: 1; color: var(--ink-3); margin-bottom: 4px; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state-message { max-width: 52ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state-title { font-size: 15px; font-weight: 600; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state .primary-btn,
:is(#team, #governance, #usage, #system, #data-observability, #connectors, #integrations, #template-builder, #admin) .empty-state .ghost-btn { margin-top: 0; }

/* A long list scrolls inside its group, and is reachable from the keyboard */
.st-scroll { max-height: 520px; overflow-y: auto; }
.st-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#system .system-gw-splits { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
#system .st-split-table .a06-table th, #system .st-split-table .a06-table td { padding-left: 12px; padding-right: 12px; }
#system .st-split-table .a06-table th:first-child, #system .st-split-table .a06-table td:first-child { padding-left: 14px; }
#system .st-split-table .a06-table td:last-child, #system .st-split-table .a06-table th:last-child { padding-right: 14px; }
#system .st-split-table .a06-table tbody th { overflow-wrap: anywhere; }
#system .a06-bar-group { grid-template-columns: minmax(0, 1fr); }
#system .a06-bar-label { width: 0; overflow: visible; }
@media (max-width: 640px) { .st-stack-table td.num::before { font-family: var(--font-body); } }
@media (max-width: 640px) {
  .catalog-row.st-row .catalog-row-text, .st-connector-row .st-row-main { flex: 1 1 calc(100% - 56px); min-width: 0; }
}
@media (max-width: 640px) {
  .st-group .st-stack-table td[data-label="Token"] { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 2px; }
  .st-group .st-stack-table td[data-label="Token"]::before { display: none; }
  .st-group .st-stack-table td[data-label="Token"] .small-meta { text-align: left; }
}
.st-cell-stack { display: grid; gap: 1px; min-width: 0; }
.st-cell-stack .small-meta { margin: 0; }
@media (max-width: 640px) { .st-cell-stack { justify-items: end; text-align: right; } }
/* A page that could not read what it shows says so, with a way to try again; its forms are off until the read works */
.callout.st-notice { align-items: center; margin: 0 0 12px; }
.callout.st-notice > p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.5; }
.callout.st-notice > .secondary-btn { flex: none; }
.st-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.st-fieldset:disabled { opacity: .55; }
@media (max-width: 640px) { .callout.st-notice { flex-wrap: wrap; } .callout.st-notice > .secondary-btn { min-height: 44px; } }

/* /assets/next/layout-fit.css */
/* Keep long saved settings inside their own card, including the two-column laptop layout. */
#connector-detail .st-detail-grid,
#connector-detail .st-detail-grid > *,
#connector-detail .st-detail-body { min-width: 0; max-width: 100%; }
#connector-detail .st-kv { table-layout: fixed; }
#connector-detail .st-kv th,
#connector-detail .st-kv td { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
#connector-detail .st-detail-body :is(pre, .code-block) { max-width: 100%; overflow: auto; }
#connector-detail .st-detail-body :is(svg, canvas) { max-width: 100%; }
#connector-detail .page-header-actions { flex-wrap: wrap; }
.layout-resize-handle { display: none; }
.layout-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.layout-controls button { font-size: 12px; white-space: normal; }
.layout-restore-nav { display: none; }
@media (min-width: 1101px) {
  .app-shell { position: relative; }
  .layout-resize-handle { display: block; width: 10px; border: 0; padding: 0; background: transparent; cursor: col-resize; touch-action: none; z-index: 30; }
  .layout-resize-handle::after { content: ""; position: absolute; inset: 0 4px; background: var(--hairline); }
  .layout-resize-handle:hover::after, .layout-resize-handle:focus-visible::after { background: var(--accent); }
  .layout-resize-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  [data-layout-resize="nav"] { position: fixed; left: calc(var(--sidebar-w) - 5px); top: 0; height: 100dvh; }
  #connector-detail .st-detail-grid { position: relative; grid-template-columns: minmax(0, var(--detail-left, calc((100% - 16px) / 2))) minmax(0, 1fr); }
  [data-layout-resize="detail"] { position: absolute; left: calc(var(--detail-left, calc((100% - 16px) / 2)) + 3px); top: 0; height: 100%; }
  /* Hiding the sidebar removes it from the grid. A leftover 0px first track would then
     become the content column, so the page has one full-width track instead. */
  .layout-nav-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
  .layout-nav-collapsed .app-shell > .sidebar,
  .layout-nav-collapsed [data-layout-resize="nav"] { display: none; }
  .layout-nav-collapsed .layout-restore-nav { display: block; position: fixed; left: 8px; bottom: 12px; z-index: 40; background: var(--s1); border: 1px solid var(--hairline); padding: 8px; border-radius: 6px; }
  /* The account control lives in the sidebar. Park it on the header row while that sidebar is hidden. */
  .layout-nav-collapsed .shell-bar { flex-wrap: nowrap; min-width: 0; }
  .layout-nav-collapsed .shell-context { flex: 1 1 auto; min-width: 0; }
  .layout-nav-collapsed .shell-workspace-name { min-width: 0; }
  .layout-nav-collapsed .shell-actions { flex-wrap: nowrap; min-width: 0; }
  .layout-nav-collapsed .shell-actions .sidebar-account { margin: 0; padding: 0; border: 0; flex: 0 0 auto; }
  .layout-nav-collapsed .shell-actions .account-menu-trigger { width: auto; max-width: 220px; }
  .layout-nav-collapsed .shell-actions .account-menu-text strong,
  .layout-nav-collapsed .shell-actions .account-menu-text .small-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* 1280 at 150% zoom is an 853px layout. The title column's max-content (and a 100% action
   width from the respond sheet below 1280px) was dropping Docs / Skip / Continue
   under the title. Keep that row from 801px up and let the description shrink. */
@media (min-width: 801px) {
  .section-hero.page-header { flex-wrap: nowrap; }
  .section-hero.page-header > .section-hero-text,
  .section-hero.page-header > div:first-child { min-width: 0; flex: 1 1 0%; }
  .section-hero.page-header p { min-width: 0; }
  .section-hero.page-header > .page-header-aside { flex: 0 0 auto; width: auto; max-width: 100%; min-width: 0; }
  .section-hero.page-header .page-header-actions { flex: 0 0 auto; flex-wrap: nowrap; width: auto; max-width: 100%; }
}
@media (max-width: 1100px) {
  .layout-controls { display: none; }
  #connector-detail .st-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* /assets/next/pages/auth.css */
/* ==========================================================================
   Onyx Next: sign in and create account (#auth-overlay).
   A split screen. On the left, the stage: the product mark, four small characters (Logs, Metrics, Traces, Spans) that
   react to what the person is doing (assets/next/auth-stage.js), and what the product gives you. On the right, the same
   overlay, fields, tabs, SSO and social buttons, password meter and error handling as before, on the product's
   surface. The form side uses tokens only, so it follows the theme (light by default; dark when chosen or when the
   device asks for it, see theme-init.js). The stage is always the dark product family, in both themes, so the
   characters keep the same colours and contrast.
   Scoped by #auth-overlay, so nothing here reaches the app. Loaded after styles.css and next.css.
   ========================================================================== */

#auth-overlay {
  /* The edge of a field is what shows where to type, so it meets WCAG 1.4.11 (3:1) against the panel in both themes;
     the hairline tokens are for decoration and sit near 1.5:1. */
  --auth-field-edge: color-mix(in srgb, var(--ink-3) 75%, var(--s1));
  display: block; padding: 0; isolation: isolate;
  background: var(--s1); color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow-y: auto; overscroll-behavior: contain;
}

/* two halves, full height; the stage stays in view while a long form (Create account) scrolls on the right */
#auth-overlay .auth-modal {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
  width: 100%; min-height: 100dvh; max-height: none; margin: 0; padding: 0;
  overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* ---------- The stage: always dark ---------- */
#auth-overlay .auth-stage {
  --auth-stage-bg: #0a0d14;
  --auth-stage-ink: #eef1f6;
  --auth-stage-muted: #a3aec2;
  --auth-stage-line: rgba(255, 255, 255, 0.08);
  --auth-stage-accent: #8dbaff;
  --auth-c-metrics: #3f86e0;
  --auth-c-logs: #e9774b;
  --auth-c-trace: #28b681;
  --auth-c-spans: #e8ae2c;
  --auth-feature: #0d1118; /* eyes, mouths and marks drawn on the characters */
  --focus: #8dbaff;
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; height: 100dvh; min-width: 0; padding: 20px 40px 28px;
  color: var(--auth-stage-ink); overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(23, 102, 212, 0.16), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--auth-stage-bg);
  border-right: 1px solid var(--auth-stage-line);
}
#auth-overlay .auth-stage-center { flex: 1; min-height: 0; display: grid; place-items: center; align-content: center; gap: 14px; }
/* the drawing is 520 x 360; its width also yields to short windows so the points and the top row keep their room */
#auth-overlay .auth-characters { width: min(560px, 100%, calc((100dvh - 340px) * 1.444)); height: auto; overflow: visible; }
#auth-overlay .auth-stage-caption { min-height: 1.5em; margin: 0; text-align: center; font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.01em; color: var(--auth-stage-muted); }

/* ---------- Top row: product mark and the way back ---------- */
#auth-overlay .auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#auth-overlay .auth-lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
#auth-overlay .auth-lockup-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--auth-stage-ink); }
/* Emblem: a crop of the existing logo poster, the same one the app sidebar and the homepage use. */
#auth-overlay .auth-emblem {
  --em: 32px; width: var(--em); height: var(--em); flex: none; border-radius: var(--r-ctl); border: 1px solid var(--auth-stage-line);
  background: #03060c url("/assets/logo-onyx-insights.jpg") no-repeat;
  background-size: calc(var(--em) * 101 / 28) auto;
  background-position: calc(var(--em) * -37 / 28) calc(var(--em) * -13 / 28);
}
#auth-overlay .auth-overlay-back {
  position: static; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 -10px 0 0; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--auth-stage-muted);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0; cursor: pointer; transition: background 0.12s, color 0.12s;
}
#auth-overlay .auth-overlay-back:hover { background: rgba(255, 255, 255, 0.08); color: var(--auth-stage-ink); }
#auth-overlay .auth-overlay-back:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--auth-stage-ink); outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- The characters ---------- */
#auth-overlay .auth-ch { --auth-open: 1; --auth-body: var(--auth-c-metrics); }
#auth-overlay .auth-ch[data-ch="logs"] { --auth-body: var(--auth-c-logs); }
#auth-overlay .auth-ch[data-ch="traces"] { --auth-body: var(--auth-c-trace); }
#auth-overlay .auth-ch[data-ch="spans"] { --auth-body: var(--auth-c-spans); }
#auth-overlay .auth-ch-body { fill: var(--auth-body); }
#auth-overlay .auth-ch-detail { fill: none; stroke: var(--auth-feature); stroke-width: 4; stroke-linecap: round; opacity: 0.18; }
#auth-overlay .auth-ch[data-ch="spans"] .auth-ch-detail { stroke-width: 3; }
#auth-overlay .auth-ground { fill: rgba(0, 0, 0, 0.45); }
/* each eye is drawn around its own origin, so scaling it vertically closes the lid on its centre */
#auth-overlay .auth-eye { transform: scaleY(var(--auth-open)); transition: transform 0.12s ease-out; }
#auth-overlay .auth-sclera { fill: #fff; }
#auth-overlay .auth-pupil { fill: var(--auth-feature); transform: translate(calc(var(--auth-lx, 0) * 1px), calc(var(--auth-ly, 0) * 1px)); }
#auth-overlay .auth-lash { fill: none; stroke: var(--auth-feature); stroke-width: 2.5; stroke-linecap: round; opacity: calc((1 - var(--auth-open)) * 1.15); transition: opacity 0.12s; }
#auth-overlay .auth-mouth { fill: none; stroke: var(--auth-feature); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity 0.15s; }
#auth-overlay .auth-stage[data-mouth="smile"] .auth-mouth-smile,
#auth-overlay .auth-stage[data-mouth="flat"] .auth-mouth-flat { opacity: 1; }
#auth-overlay .auth-zzz { opacity: 0; font: 600 22px var(--font-mono); fill: var(--auth-stage-muted); }

/* each character's name appears when the pointer is on it (not on touch screens, which have no pointer to rest) */
#auth-overlay .auth-tag { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
#auth-overlay .auth-tag rect { fill: rgba(13, 17, 24, 0.92); stroke: rgba(255, 255, 255, 0.16); }
#auth-overlay .auth-tag text { fill: var(--auth-stage-ink); font: 500 12px var(--font-mono); text-anchor: middle; dominant-baseline: central; }
#auth-overlay .auth-ch:hover .auth-tag { opacity: 1; }
@media (hover: none) { #auth-overlay .auth-tag { display: none; } }

/* lids: asleep, password showing (eyes shut), and a blink */
#auth-overlay .auth-stage[data-state="asleep"] .auth-ch,
#auth-overlay .auth-stage[data-state="reveal"] .auth-ch,
#auth-overlay .auth-ch.is-blink { --auth-open: 0.06; }
#auth-overlay .auth-stage[data-state="asleep"] .auth-zzz { opacity: 1; animation: auth-z-float 2.6s ease-in-out infinite; }
@keyframes auth-z-float { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -14px); opacity: 0; } }
@keyframes auth-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@keyframes auth-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
#auth-overlay .auth-ch.is-hop { animation: auth-hop 0.38s ease-out; }
#auth-overlay .auth-stage[data-state="error"] .auth-characters { animation: auth-shake 0.5s ease-in-out; }

/* ---------- What you get, quietly, under the characters (when the window is tall enough to hold it) ---------- */
#auth-overlay .auth-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--auth-stage-muted); font-size: 13.5px; line-height: 1.45; }
#auth-overlay .auth-points li { display: flex; align-items: flex-start; gap: 10px; }
#auth-overlay .auth-points li::before { content: "\e182"; flex: none; font-family: "Phosphor"; font-size: 15px; line-height: 1.35; color: var(--auth-stage-accent); }
@media (max-height: 759px) { #auth-overlay .auth-points { display: none; } }

/* ---------- The form side: the same card, now flat on the panel ---------- */
#auth-overlay .auth-panel { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; padding: 28px 40px; background: var(--s1); }
#auth-overlay .auth-card {
  display: grid; align-content: start; gap: 18px; width: min(400px, 100%); margin: auto; padding: 24px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
#auth-overlay .auth-head { gap: 6px; }
#auth-overlay .auth-head h2 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
#auth-overlay .auth-head .muted { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

/* segmented Sign in | Start 14-day free trial, the same control as .seg */
#auth-overlay .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; background: var(--s2); border: 1px solid var(--hairline); border-radius: 10px; }
#auth-overlay .auth-tab {
  min-height: 36px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); box-shadow: none;
  font-size: 13.5px; font-weight: 500; line-height: 1.25; cursor: pointer; transition: background 0.12s, color 0.12s;
}
#auth-overlay .auth-tab:hover { color: var(--ink); }
#auth-overlay .auth-tab[aria-selected="true"] { background: var(--s4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
#auth-overlay .auth-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------- Fields ---------- */
#auth-overlay .auth-form { display: grid; gap: 14px; }
#auth-overlay .auth-form .ui-field { gap: 6px; }
#auth-overlay .auth-form .ui-field-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
#auth-overlay .ui-field-optional { color: var(--ink-3); }
#auth-overlay .auth-form .ui-field-hint, #auth-overlay .auth-required-note { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
#auth-overlay .ui-field-required { color: var(--crit); }
#auth-overlay .auth-form input,
#auth-overlay .auth-form select {
  width: 100%; height: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--auth-field-edge); border-radius: var(--r-ctl);
  background-color: var(--canvas); color: var(--ink); box-shadow: none; font-size: 15px;
}
#auth-overlay .auth-form input::placeholder { color: var(--ink-3); }
#auth-overlay .auth-form input:hover, #auth-overlay .auth-form select:hover { border-color: var(--ink-3); }
#auth-overlay .auth-form input:focus, #auth-overlay .auth-form select:focus {
  outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; box-shadow: none;
}
#auth-overlay .auth-form select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 19px, calc(100% - 14px) 19px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
#auth-overlay .auth-form select:invalid, #auth-overlay .auth-form select option[value=""] { color: var(--ink-3); }
#auth-overlay .auth-form select option { color: var(--ink); background: var(--s2); }
#auth-overlay #mfa-code { letter-spacing: 0.2em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

#auth-overlay .auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#auth-overlay .auth-link {
  font-size: 13.5px; font-weight: 500; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--accent-line);
}
#auth-overlay .auth-link:hover { text-decoration-color: currentColor; }
#auth-overlay .auth-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Show / hide fills the right end of the field, so the tap target is the field's full height */
#auth-overlay .auth-password { position: relative; }
#auth-overlay .auth-form .auth-password input { padding-right: 72px; }
#auth-overlay .auth-password-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; height: auto; min-width: 64px; padding: 0 14px; transform: none;
  border: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 500; cursor: pointer;
}
#auth-overlay .auth-password-toggle:hover { color: var(--ink); background: var(--s3); }
#auth-overlay .auth-password-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#auth-overlay .auth-password-meter { height: 4px; background: var(--s3); border-radius: 99px; overflow: hidden; }

/* ---------- Actions ---------- */
#auth-overlay .auth-submit { width: 100%; min-height: 44px; margin-top: 2px; border-radius: var(--r-ctl); font-size: 15px; }
#auth-overlay .auth-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
#auth-overlay .sso-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); background: var(--s2); color: var(--ink); font-size: 14px; font-weight: 500;
}
#auth-overlay .sso-btn:hover { background: var(--s3); border-color: var(--hairline-hi); }
#auth-overlay .sso-btn[data-sso-provider="google"]::before,
#auth-overlay .sso-btn[data-sso-provider="microsoft"]::before { font-family: "Phosphor"; font-size: 18px; line-height: 1; color: var(--ink-2); }
#auth-overlay .sso-btn[data-sso-provider="google"]::before { content: "\e292"; }
#auth-overlay .sso-btn[data-sso-provider="microsoft"]::before { content: "\e692"; }
#auth-overlay #onyx-sso-options { display: grid; gap: 10px; }
#auth-overlay .sso-divider { color: var(--ink-3); font-size: 12.5px; }
#auth-overlay .sso-divider::before, #auth-overlay .sso-divider::after { background: var(--hairline); }
#auth-overlay .social-login-note { color: var(--ink-3); font-size: 12.5px; }
#auth-overlay .auth-form-intro { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#auth-overlay .auth-switch { margin: 2px 0 0; text-align: center; font-size: 14px; color: var(--ink-3); }
#auth-overlay .auth-switch .auth-link { font-size: inherit; }
#auth-overlay .auth-consent { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
#auth-overlay .auth-consent a { color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#auth-overlay .auth-consent a:hover { color: var(--ink); }

/* two-step verification method switch: the same pill the account security dialog uses, on this surface */
#auth-overlay .mfa-method-switch { gap: 6px; }
#auth-overlay .mfa-method {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: 99px; background: var(--s2); color: var(--ink-2);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
#auth-overlay .mfa-method:hover { background: var(--s3); color: var(--ink); }
#auth-overlay .mfa-method[aria-checked="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
#auth-overlay .small-meta { color: var(--ink-3); font-size: 12.5px; }

/* set a new password (the page an emailed reset link opens): the two fields and the button are one group, so a dead link
   can take them away together and leave only "Request a new link" */
#auth-overlay #set-password-fields { display: grid; gap: 14px; }
#auth-overlay #set-password-form input[aria-invalid="true"] { border-color: var(--crit); }
#auth-overlay #set-password-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Messages: icon, tint and words, never colour alone ---------- */
/* the notice and the error sit between the tabs and the fields, where a person is looking, not below the fold */
#auth-overlay .auth-card > .auth-error, #auth-overlay .auth-card > .auth-success { order: 1; }
#auth-overlay .auth-card > .auth-form { order: 2; }
#auth-overlay .auth-error:not(:empty) {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); border-radius: var(--r-ctl);
}
#auth-overlay .auth-error:not(:empty)::before { content: "\e4e2"; flex: none; font-family: "Phosphor-Fill"; font-size: 18px; line-height: 1.1; color: var(--crit); }
/* app.js shows this one with style.display = "block", which beats a stylesheet display, so the icon is placed
   absolutely and the layout does not depend on flex */
#auth-overlay .auth-success {
  position: relative; margin: 0; padding: 10px 12px 10px 40px; text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: var(--r-ctl);
}
#auth-overlay .auth-success::before { content: "\e184"; position: absolute; top: 10px; left: 12px; font-family: "Phosphor-Fill"; font-size: 18px; line-height: 1.1; color: var(--ok); }
#auth-overlay .auth-join-hint {
  margin: 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-ctl);
}

/* ---------- Narrow windows: one column, the stage a compact band above the form ---------- */
@media (max-width: 860px) {
  #auth-overlay .auth-modal { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  #auth-overlay .auth-stage { position: relative; height: auto; padding: 10px 16px 12px; gap: 0; border-right: 0; border-bottom: 1px solid var(--auth-stage-line); }
  #auth-overlay .auth-stage-center { padding: 0; gap: 6px; }
  #auth-overlay .auth-characters { width: min(232px, 66%); }
  #auth-overlay .auth-points { display: none; }
  #auth-overlay .auth-panel { min-height: 0; padding: 20px 20px 32px; }
  #auth-overlay .auth-card { padding: 4px 0 0; }
}

/* ---------- Phone: 44px targets, 16px text in fields (no zoom on focus) ---------- */
@media (max-width: 640px) {
  #auth-overlay .auth-overlay-back { min-height: 44px; }
  #auth-overlay .auth-tab { min-height: 44px; }
  #auth-overlay .mfa-method { min-height: 44px; }
  #auth-overlay .auth-form input, #auth-overlay .auth-form select { font-size: 16px; }
  /* small inline buttons keep their place in the text; the padding only widens the hit area to 44px */
  #auth-overlay .auth-link { padding: 12px 6px; margin: -12px -6px; }
  #auth-overlay .auth-head h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #auth-overlay .auth-eye, #auth-overlay .auth-lash, #auth-overlay .auth-mouth, #auth-overlay .auth-tag { transition: none; }
  #auth-overlay .auth-ch.is-hop, #auth-overlay .auth-stage[data-state="error"] .auth-characters, #auth-overlay .auth-stage[data-state="asleep"] .auth-zzz { animation: none; }
  #auth-overlay .auth-stage[data-state="asleep"] .auth-zzz { opacity: 1; }
}

/* /assets/next/pages/about.css */
/* ==========================================================================
   Onyx Next: About Onyx Insights (OI-25).
   The account menu entry ("About Onyx Insights", under "Docs") and the small modal dialog it opens: the
   product version, the build and the commit the server reports, for support requests. The dialog is a native
   <dialog> (#about-dialog), so the page behind it is inert and Tab stays inside; initAboutDialog() in app.js does the
   rest. Tokens only (no hex or rgba), no !important, so both themes follow. Loaded after next.css and auth.css.
   ========================================================================== */

/* ---------- The entry: one more row in the account menu's list ---------- */
.account-menu-links { display: flex; flex-direction: column; }
.about-open-btn {
  width: 100%; margin: 0; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent;
  text-align: left; cursor: pointer;
}

/* ---------- The dialog ---------- */
.about-dialog {
  width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: auto;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-frame); background: var(--s1); color: var(--ink); box-shadow: var(--shadow-pop);
}
.about-dialog::backdrop { background: var(--scrim); }
/* No padding on the dialog itself: a click on the backdrop must land on the dialog element, the card fills the rest. */
.about-card { padding: 20px; min-width: 0; }
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.about-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.about-purpose { margin-bottom: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.about-body { display: grid; gap: 14px; min-width: 0; }

/* Version, Build and Commit: a label and a value per row, on one well. A missing value says so in words, in the
   muted ink, so it never reads as a value. */
.about-facts { display: grid; margin: 0; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--s2); }
.about-row { display: grid; grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 14px; }
.about-row + .about-row { border-top: 1px solid var(--hairline); }
.about-row dt { color: var(--ink-3); font-size: 13px; }
.about-row dd { margin: 0; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.about-value { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.about-missing { color: var(--ink-3); }
.about-state { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.about-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Always in the page (a live region that is created later is not announced); it only takes room once it says something. */
.about-copy-status { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.about-copy-status:not(:empty) { margin-top: 10px; }

/* ---------- Touch: 44px targets, as the rest of the shell. Both rows of the menu's list, so they match. ---------- */
@media (max-width: 640px), (pointer: coarse) {
  .account-menu-links .account-menu-link, .about-btn { min-height: 44px; }
}

/* /marketing/onyx-motion.css */
/* Onyx motion — shared. Theme-agnostic (opacity/transform only). Selectors for
   both product sites; a selector that matches nothing is harmless. Content is
   never hidden without JS (the hidden state is gated on `.has-motion`). */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.has-motion .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Header shadow once the page leaves the top (styling only; positioning untouched). */
.topbar,
.lending-site-topbar {
  transition: box-shadow .35s ease, backdrop-filter .35s ease;
}
.is-scrolled .topbar,
.is-scrolled .lending-site-topbar {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  backdrop-filter: saturate(1.3) blur(10px);
}

/* Hero entrance */
@keyframes onyx-rise {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .has-motion .hero h1,
  .has-motion .lst-hero h1,
  .has-motion .site-hero h1 { animation: onyx-rise .9s cubic-bezier(.22, .61, .36, 1) both; }
  .has-motion .hero .lead,
  .has-motion .lst-hero .lst-hero-lead,
  .has-motion .site-hero .hero-lead { animation: onyx-rise .9s cubic-bezier(.22, .61, .36, 1) .16s both; }
  .has-motion .hero .hero-actions,
  .has-motion .lst-hero .lst-cta-row,
  .has-motion .site-hero .hero-cta-row { animation: onyx-rise .9s cubic-bezier(.22, .61, .36, 1) .3s both; }
  .has-motion .hero .signal-strip,
  .has-motion .lst-hero .lst-tagline,
  .has-motion .site-hero .hero-tagline { animation: onyx-rise .9s cubic-bezier(.22, .61, .36, 1) .44s both; }
  .has-motion .site-hero .site-hero-visual { animation: onyx-rise 1s cubic-bezier(.22, .61, .36, 1) .3s both; }
}

/* Hover micro-interactions */
.cta-link, .ghost-link,
.lst-btn-primary, .lst-btn-secondary, .lst-btn-cta, .lst-btn-outline, .lst-btn-ghost,
.btn-primary, .btn-secondary {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.cta-link:hover, .ghost-link:hover,
.lst-btn-primary:hover, .lst-btn-secondary:hover, .lst-btn-cta:hover, .lst-btn-outline:hover,
.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-3px);
}
.showcase-card, .product-card, .info-card,
.feature-card-mkt, .audience-card-mkt, .problem-item {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.showcase-card:hover, .product-card:hover, .info-card:hover,
.feature-card-mkt:hover, .audience-card-mkt:hover, .problem-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .22);
}
.showcase-image, .card-visual-image, .hero-photo, .cinematic-photo {
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.showcase-card:hover .showcase-image,
.product-card:hover .card-visual-image { transform: scale(1.05); }
.cinematic-band:hover .cinematic-photo { transform: scale(1.04); }