/* The site's design language on the quote pages. quote.css and upload.css are copies of
   Fabricator's own pages; this file loads after them and restyles them to match the home page:
   its paper background, Geist, square panels, the pellet-colored buttons, and the floating header
   the home page's logo and buttons catch into. Keep it last when re-syncing the copies.

   Moving between the home page and these pages is a cross-document view transition: the header
   card, the logo, and the buttons carry the same names here and on the home page, so they glide
   into place while the rest of the page crossfades. */

@font-face {
  font-family: "Geist";
  src: url("/quote/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* The home page is light only, so these pages are too. */
:root {
  --bg: #f7f7f5;
  --text: #111111;
  --muted: #76746f;
  --faint: #a3a19b;
  --panel: #efeee9;
  --stage: #e9e7e1;
  --card: #ffffff;
  --border: #d9d9d6;
  --hairline: #e4e3de;
  /* The pellet colors at the 70% saturation the home page shows them at. */
  --blue: #4677be;
  --blue-hover: #3e69a7;
  --blue-text: #3e69a7;
  --red: #c4554f;
  --orange: #b9772c;
  --green: #3f8a52;
  --pellet-red: #e94b42;
  --pellet-blue: #3479df;
  --pellet-yellow: #e8c52f;
  /* Log in / Account: the pellet yellow with white text, as on the home page (owner's choice). */
  --pellet-gold: var(--pellet-yellow);
  --glass: rgba(255, 255, 255, 0.6);
  --nav: transparent;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(17, 17, 17, 0.07), 0 2px 4px rgba(17, 17, 17, 0.03), 0 12px 32px rgba(17, 17, 17, 0.08);
  --font: "Geist", Arial, sans-serif;
  /* The home page's content column, and the header card's gap above and below it. */
  --gutter: max(4.25vw, calc(26.75vw - 300px));
  --bar: 66px;
  --nav-h: calc(var(--bar) + 24px);
  color-scheme: light;
}
@media (max-width: 600px) { :root { --gutter: 20px; } }

/* Keep room for the scrollbar even on a page too short to scroll, as the home page always has
   one: otherwise the page is wider and every piece of the header shifts sideways. */
html { scrollbar-gutter: stable; }
body { font-weight: 400; letter-spacing: -0.015em; }
::selection { background: rgba(52, 121, 223, 0.18); }

/* Header: the home page's caught header, a frosted card floating just below the top of the
   screen and inset from the edges by the content column. Every piece sits exactly where it
   catches on the home page (see app/CatchHeader.tsx and app/site-header.css), so nothing moves between
   pages: the logo at the column's edge, and the buttons aligned with the hero lead's longest line,
   one width (the widest label's), 38px tall with 13.2px labels. From 900px down the hero is one column,
   so the buttons catch on a row of their own under the logo and the card grows to hold them. At 600px and under it is the home page's phone
   bar (app/mobile-nav.css) with the menu button (site-menu.js). */
.nav { height: var(--nav-h); background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.nav-inner {
  position: relative;
  max-width: none;
  height: var(--bar);
  margin: 12px calc(var(--gutter) - 14px) 0;
  padding: 0 14px;
  gap: 16px;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.04);
  view-transition-name: site-bar;
}
/* The card's rim and sheen, as the home page's .catch-shade draws them. */
.nav-inner::before, .nav-inner::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.nav-inner::before { padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.nav-inner::after { inset: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 50%); }
.nav:has(+ .buy) .nav-inner { box-shadow: none; }
.logo { gap: 9px; font-size: 24px; letter-spacing: -0.04em; color: #111; view-transition-name: site-logo; }
.logo b { font-weight: 400; transform: translateY(-0.5px); }
/* The header's logo, as app/globals.css sizes it: a 26px mark beside 24px type (quote.css draws 24px). */
.logo-mark { width: 26px; height: 26px; flex-basis: 26px; }
.logo-mark img { width: 31.4px; height: 28.9px; left: -3px; top: -2.4px; }
.nav-note { margin-left: auto; font-size: 13.2px; }
.site-actions {
  position: absolute;
  top: calc((66px - 38px) / 2);
  /* header-layout.js aligns the row with the hero lead; use its column as the pre-script fallback. */
  left: var(--header-actions-left, calc((100% - 28px - 5vw) * 17 / 27 + 5vw + 14px));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}
.site-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 38px;
  padding: 0 15.4px;
  border: 1px solid;
  color: #fff;
  font-size: 13.2px;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  filter: saturate(0.7);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.site-actions .site-talk { border-color: color-mix(in srgb, var(--pellet-red) 70%, transparent); background: color-mix(in srgb, var(--pellet-red) 82%, transparent); view-transition-name: site-talk; }
.site-actions .site-talk:hover { border-color: color-mix(in srgb, color-mix(in srgb, var(--pellet-red) 88%, black) 75%, transparent); background: color-mix(in srgb, color-mix(in srgb, var(--pellet-red) 88%, black) 88%, transparent); }
.site-actions .site-quote { border-color: color-mix(in srgb, var(--pellet-blue) 70%, transparent); background: color-mix(in srgb, var(--pellet-blue) 82%, transparent); view-transition-name: site-quote; }
.site-actions .site-quote:hover, .site-actions .site-quote[aria-current="page"] { border-color: color-mix(in srgb, color-mix(in srgb, var(--pellet-blue) 88%, black) 75%, transparent); background: color-mix(in srgb, color-mix(in srgb, var(--pellet-blue) 88%, black) 88%, transparent); }
/* Log in or Account (site.js): the gold button with white text, as on the home page: solid, no filter, so
   the text keeps 5.9:1. Both labels are in the markup; html[data-session] shows one. */
.site-actions .site-account { color: #fff; border-color: var(--pellet-gold); background: var(--pellet-gold); filter: none; view-transition-name: site-account; }
.site-actions .site-account:hover { border-color: color-mix(in srgb, var(--pellet-gold) 88%, black); background: color-mix(in srgb, var(--pellet-gold) 88%, black); }
.account-in { display: none; }
html[data-session="in"] .account-in { display: inline; }
html[data-session="in"] .account-out { display: none; }
/* Tighter buttons where the right-hand column is narrow (as on the home page; see app/globals.css). */
@media (min-width: 901px) and (max-width: 1023px) {
  .site-actions { gap: 8px; }
  .site-actions a { padding: 0 8px; }
}
/* Between the buttons' column and the card's edge there is no room for the note until wide screens. */
@media (max-width: 1439px) { .nav-note { display: none; } }
@media (max-width: 900px) {
  :root { --bar: 108px; }
  .nav-inner { align-items: flex-start; }
  .logo { margin-top: 15px; }
  .nav-note { display: block; margin-top: 21.4px; }
  .site-actions { top: 56px; left: 14px; }
}
/* Phones: the home page's slim bar (app/mobile-nav.css): the logo and a menu button; the menu covers the
   screen with Docs and Talk with us large, and Get a quote and Log in as pills at its foot. */
.site-menu { display: none; }
@media (max-width: 600px) {
  :root { --bar: 62px; --nav-h: 62px; }
  .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); }
  .nav-inner { align-items: center; gap: 18px; height: 62px; margin: 0; padding: 0 8px 0 20px; background: rgba(247, 247, 245, 0.86); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 0.5px 0 rgba(17, 17, 17, 0.12); }
  .nav:has(+ .buy) .nav-inner { box-shadow: 0 0.5px 0 rgba(17, 17, 17, 0.12); }
  .nav-inner::before, .nav-inner::after { display: none; }
  .logo { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-size: 22px; }
  .logo-mark { width: 23px; height: 23px; flex-basis: 23px; }
  .logo-mark img { width: 27.4px; height: 25.2px; left: -2.5px; top: -1.9px; }
  .nav-note, .nav-inner .site-docs, .site-actions { display: none; }
  .site-menu { display: inline-grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .site-menu span { display: block; width: 24px; height: 1.5px; background: #111; transition: transform 0.2s ease; }
  .nav[data-open] .site-menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav[data-open] .site-menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  /* Open: a solid bar (no backdrop filter, so the menu's fixed pieces place against the screen) over
     the paper. */
  .nav[data-open]::after { content: ""; position: fixed; z-index: 0; inset: 0; background: #f7f7f5; pointer-events: auto; }
  .nav[data-open] .nav-inner { position: relative; z-index: 1; background: #f7f7f5; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .nav[data-open] .site-docs, .nav[data-open] .site-actions .site-talk { position: fixed; left: 20px; display: flex; align-items: center; height: 60px; margin: 0; padding: 0; border: 0; background: none; color: #111; font-size: 34px; line-height: 1.1; letter-spacing: -0.04em; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav[data-open] .site-docs { top: 102px; }
  .nav[data-open] .site-actions .site-talk { top: 162px; }
  .nav[data-open] .site-actions { position: fixed; top: auto; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); left: 20px; display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 10px; transform: none; }
  .nav[data-open] .site-actions .site-quote, .nav[data-open] .site-actions .site-account { height: 48px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav[data-open] .site-actions .site-quote { background: var(--pellet-blue); filter: saturate(0.7); }
}
@media (prefers-color-scheme: dark) { .logo-mark img { filter: none; } }

/* Content sits in the home page's column, with its square panels and lighter headings. */
.buy { max-width: none; padding-right: var(--gutter); padding-left: var(--gutter); }
.viewer, .tile, .rows, .callout, .problem, .summary, .skeleton span, .feature,
.option .card, .quantity, .field input, .field select, .face-button, .stepper input, .drop { border-radius: 0; }
.stage-badge, #toast, .scrubber, .chip { border-radius: 0; }
.viewer { background: radial-gradient(circle at 50% 35%, #f3f2ee, var(--stage)); }
h1 { font-weight: 400; letter-spacing: -0.04em; }
.block h2 { font-weight: 400; letter-spacing: -0.025em; }
.tile .v, .row .v, .card .name, .card .price, .total .k, .quantity label, .stepper input,
.problem strong, .jobs .row .k, .stage-status p, .drop-main { font-weight: 500; }
.total .v { font-weight: 400; letter-spacing: -0.03em; }
.eyebrow { color: var(--muted); }

/* Buttons in the page are pellet-blue pills, sized like the header's. */
.primary { filter: none; }
.secondary { border-color: var(--blue); color: var(--blue-text); }
.secondary:disabled { border-color: var(--border); color: var(--muted); }
.secondary:hover { background: rgba(70, 119, 190, 0.07); }
.primary:focus-visible, .secondary:focus-visible, .feature:focus-visible, .stepper button:focus-visible,
.stepper input:focus-visible, .field input:focus-visible, .option input:focus-visible + .card { outline-color: rgba(70, 119, 190, 0.45); }

/* Upload: the home page's hero layout, a large heading in the column's left half and the form in
   its right half; one column on narrow screens. */
.upload {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
  max-width: none;
  padding: clamp(40px, 7vw, 120px) var(--gutter) 120px;
}
.upload-intro { position: sticky; top: calc(var(--nav-h) + 24px); }
.upload h1 { margin: 0; font-size: clamp(44px, 4.6vw, 76px); line-height: 0.96; letter-spacing: -0.055em; }
.upload-lede { max-width: 30ch; margin: 22px 0 0; color: #84827d; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; letter-spacing: -0.02em; }
.upload form { gap: 14px; }
/* upload.html also loads quote.css, whose delivery-form .field and summary .row rules would
   otherwise split this form into two columns and pad its field row. */
.upload .field { grid-column: auto; }
.upload .row { padding: 0; border-top: 0; }
.drop { padding: 64px 20px; border: 1px dashed #c4c1b9; background: var(--panel); }
.drop:hover, .drop.over { border-color: var(--blue); background: #ebeae4; }
.field { color: var(--muted); }
.field input, .field select, .face-button { border-color: var(--border); }
.field input:focus, .field select:focus { outline-color: rgba(70, 119, 190, 0.45); }
.upload .primary { justify-self: start; align-self: flex-start; width: auto; min-width: 140px; font-size: 15px; padding: 10px 22px; }
@media (max-width: 900px) {
  .upload { grid-template-columns: minmax(0, 1fr); }
  .upload-intro { position: static; }
}

/* A guest quote seen signed in: save it to the account (site.js). */
.details-col { min-width: 0; }
.save-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 -16px; padding: 10px 14px; background: var(--panel); color: var(--muted); font-size: 14px; }
.save-line[hidden], .save-line .link[hidden] { display: none; }
.save-line .link { flex: none; font-size: 14px; }
@media (max-width: 834px) { .save-line { margin: 16px 0 -12px; } }

/* Docs link beside the logo, as on the home page (app/globals.css .docs-link). One block, so the rest
   of this file stays as it was. */
.nav-inner { justify-content: flex-start; }
.site-docs { display: inline-flex; align-items: center; margin-left: 6px; padding: 6px 0; color: #5f5f5f; font-size: 15.4px; line-height: 1; letter-spacing: -0.01em; text-decoration: none; transition: color 0.2s ease; view-transition-name: site-docs; }
.site-docs:hover { color: #111; }
@media (max-width: 900px) { .site-docs { margin-top: 15px; height: 26px; padding: 0; } }


/* Scale: the account pages' (app/ds.css), so a quote reads at the weight of the dashboard and the home
   page. Type from ds's steps, controls at its heights (34px buttons, ds field height for inputs and
   cards), and ds spacing between blocks. */
:root {
  --t-xs: clamp(12px, 0.1vw + 10.7px, 13px);
  --t-sm: clamp(13px, 0.16vw + 11px, 15px);
  --t-md: clamp(14px, 0.16vw + 12px, 16px);
  --t-lg: clamp(16px, 0.16vw + 14px, 18px);
  --t-xl: clamp(20px, 0.3vw + 16px, 24px);
  --t-2xl: clamp(26px, 0.6vw + 18px, 34px);
  --t-3xl: clamp(30px, 1vw + 21px, 46px);
  --field: clamp(40px, 0.3vw + 36px, 46px);
}
body { font-size: var(--t-md); line-height: 1.45; }
.buy { grid-template-columns: minmax(0, 1fr) clamp(340px, 22vw + 40px, 400px); gap: clamp(28px, 3vw, 56px); }
.stage { padding: 16px 0; }
.details { padding: 28px 0 96px; }
.eyebrow { font-size: var(--t-xs); }
h1 { font-size: var(--t-3xl); line-height: 1.05; }
.lede { margin-top: 8px; font-size: var(--t-md); }
.block { padding-top: clamp(28px, 1.6vw + 12px, 40px); }
.block h2 { margin-bottom: 12px; font-size: var(--t-xl); }
.note, .hold, .error, .status-line, .callout, .problem { font-size: var(--t-sm); }
.tiles { gap: 8px; }
.tile { padding: 10px 14px 12px; }
.tile .k { font-size: var(--t-xs); }
.tile .v { font-size: var(--t-lg); }
.tile .v small { font-size: var(--t-xs); }
.row { padding: 10px 14px; }
.row .k, .row .v { font-size: var(--t-sm); }
.row .v small { font-size: var(--t-xs); }
.materials, .colors { gap: 8px; }
.material .card, .color .card { display: flex; align-items: center; min-height: var(--field); padding: 0 12px; }
.material .card .name, .color .card .name { font-size: var(--t-sm); font-weight: 400; }
.color .card { gap: 8px; }
.color .swatch { width: 14px; height: 14px; }
.options { gap: 8px; }
.option .card { min-height: 0; padding: 12px 14px; }
.card .name, .card .price { font-size: var(--t-md); }
.card .when, .card .name .off { font-size: var(--t-xs); }
.quantity { min-height: var(--field); padding: 4px 4px 4px 14px; }
.quantity label { font-size: var(--t-md); font-weight: 400; }
.stepper button { width: 30px; height: 30px; font-size: 16px; }
.stepper input { height: 30px; font-size: var(--t-md); }
.field { font-size: var(--t-xs); }
.field input, .field select, .face-button { height: var(--field); padding: 0 12px; font-size: max(16px, var(--t-md)); }
.advanced summary h2 { font-size: var(--t-xl); }
.summary { padding: 18px 18px 16px; }
.total .k { font-size: var(--t-md); }
.total .v { font-size: var(--t-2xl); }
.total .v small { font-size: var(--t-xs); }
.primary { margin-top: 16px; padding: 8px 20px; font-size: var(--t-md); }
.secondary { font-size: var(--t-sm); }
.viewer { border-radius: 0; }
.upload h1 { font-size: clamp(36px, 2.8vw + 8px, 60px); }
.upload-lede { font-size: var(--t-lg); }
.drop { padding: 48px 20px; }
.drop-main { font-size: var(--t-lg); }
.drop-sub { font-size: var(--t-xs); }
@media (max-width: 834px) {
  .buy { grid-template-columns: 1fr; gap: 0; }
  .stage { height: 46vh; height: 46svh; min-height: 280px; padding: 8px 0 0; }
  .details { padding-top: 20px; }
  h1 { font-size: var(--t-3xl); }
}
@media (max-width: 480px) {
  :root { --field: 44px; }
  .secondary, .primary { min-height: 44px; }
  .stepper button, .icon { width: 44px; height: 44px; }
  .stepper input { height: 44px; }
}

/* Legal and contact links under the upload and quote pages. */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 12px; }
.site-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-foot a:hover { color: var(--text); }

/* The quote page in one window on a desktop (quote.css): the details column, with the save line and the
   footer at its end, scrolls by itself beside the preview, which stays put. Narrow screens stack them and
   the page scrolls. */
@media (min-width: 835px) {
  /* The header card's top margin stays inside the header, so it and the columns make exactly one window. */
  .nav:has(+ .buy) { display: flow-root; }
  .stage { padding: 16px 0 20px; }
  /* No visible scrollbar (as .details in quote.css; the owner's call): opening Advanced options must not
     narrow the column or show a bar. It still scrolls; never sideways. */
  .details-col { min-height: 0; margin: 0 -10px; padding: 0 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .details-col::-webkit-scrollbar { display: none; }
  .details { margin: 0; padding: 20px 0 28px; overflow: visible; }
  .block { padding-top: 24px; }
  .block h2, .advanced summary h2 { margin-bottom: 10px; font-size: var(--t-lg); }
  .details-col .site-foot { justify-content: flex-start; padding: 4px 0 20px; }
}
/* The details column scrolls on its own on a desktop: focusable so PageDown/Space reach it. */
.details-col:focus { outline: none; }
.details-col:focus-visible { outline: 2px solid rgba(0, 113, 227, 0.5); outline-offset: 2px; }

/* Dropdowns (select.js): a button and a menu in the page's style in place of the browser's popup. The
   native select stays in the form, hidden. */
.field .dropdown-native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.field { position: relative; }
.dropdown { position: relative; min-width: 0; }
.dropdown-button {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--field);
  padding: 0 36px 0 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: max(16px, var(--t-md));
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.dropdown-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease, margin 0.15s ease;
}
.dropdown-button[aria-expanded="true"]::after { margin-top: -2px; transform: rotate(-135deg); }
.dropdown-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dropdown-button:hover:not(:disabled), .dropdown-button[aria-expanded="true"] { border-color: #b9b7b1; }
.dropdown-button:focus-visible { outline: 4px solid rgba(70, 119, 190, 0.45); outline-offset: 1px; }
.dropdown-button:disabled { color: var(--muted); cursor: not-allowed; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-height: 280px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  outline: none;
}
.dropdown-menu.up { top: auto; bottom: calc(100% + 4px); }
.dropdown-menu[hidden] { display: none; }
.dropdown-menu li {
  position: relative;
  padding: 8px 12px 8px 30px;
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1.33;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown-menu li.active { background: var(--panel); }
.dropdown-menu li[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 4px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg);
}
.dropdown-menu li[aria-disabled="true"] { color: var(--muted); cursor: default; }