/* Display density (User Settings > Appearance; Highland 2026-10-23, product owner: "create
   appropriate variations of each page/display to match each of these settings").
   Loaded last. applyUserPreferences (app.js) puts density-compact, density-normal or
   density-large on <body>.

   - Normal is the baseline written in the other stylesheets; nothing below changes it. Its token
     values document that baseline and drive the Normal sample in Settings.
   - Compact fits more on each screen: tighter rows, paddings and gaps, 13px text (never under
     12px), shorter Production Cards.
   - Large is for reading from a distance (warehouse TV) or for low vision: 16px text, 48px table
     rows, 44px controls, taller Production Cards with a second details line, more spacing.

   Every rule consumes the tokens. Production Cards stay one fixed size within a density and day
   column width (2026-10-21 rule: height = min-height = max-height in every container tier).
   Phones (<= 743px) keep their card layouts; density only changes text size and spacing there. */

/* ---------- Tokens ---------- */
body,
.density-sample-normal {
  --density-fs: 14px;            /* body and table text */
  --density-fs-sm: 12px;         /* captions, meta lines, chips */
  --density-fs-title: 19px;      /* page title (the shell scales 17-20px) */
  --density-fs-nav: 13px;        /* sidebar pages */
  --density-cell-py: 5px;        /* table cell padding */
  --density-cell-px: 6px;
  --density-row-h: 36px;         /* table row height (content may grow it) */
  --density-control-h: 36px;     /* buttons, inputs, selects */
  --density-icon-btn: 24px;      /* row and card icon buttons */
  --density-gap: 8px;            /* page sections */
  --density-pad: 12px;           /* panels */
  --density-card-gap: 6px;       /* between Production Cards */
  --density-card-h: 100px;       /* Production Card, day columns under 440px */
  --density-card-h-wide: 88px;   /* Production Card, day columns from 440px */
  --density-card-lines: 1;       /* details lines on a card */
  --density-clamp: 2;            /* lines a wrapping table cell may take */
}
body.density-compact,
.density-sample-compact {
  --density-fs: 13px;
  --density-fs-sm: 12px;
  --density-fs-title: 17px;
  --density-fs-nav: 12px;
  --density-cell-py: 3px;
  --density-cell-px: 5px;
  --density-row-h: 32px;
  --density-control-h: 30px;
  --density-icon-btn: 24px;
  --density-gap: 6px;
  --density-pad: 8px;
  --density-card-gap: 4px;
  --density-card-h: 82px;
  --density-card-h-wide: 66px;
  --density-card-lines: 1;
  --density-clamp: 1;
}
body.density-large,
.density-sample-large {
  --density-fs: 16px;
  --density-fs-sm: 14px;
  --density-fs-title: 23px;
  --density-fs-nav: 15px;
  --density-cell-py: 6px;
  --density-cell-px: 10px;
  --density-row-h: 48px;
  --density-control-h: 44px;
  --density-icon-btn: 32px;
  --density-gap: 12px;
  --density-pad: 16px;
  --density-card-gap: 8px;
  --density-card-h: 160px;
  --density-card-h-wide: 116px;
  --density-card-lines: 2;
  --density-clamp: 2;
}

/* Large: a wider sidebar so page names keep to one or two lines at 15px. */
@media (min-width: 1280px) {
  body.density-large { --sidebar-w: 150px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.density-large { --sidebar-w: 128px; }
}

/* The second details line (Large only; app.js orderCard writes it for every card). */
.order-card .card-meta-row > small.card-meta-extra { display: none; }

/* ---------- Base text ---------- */
body:is(.density-compact, .density-large) :is(#app, dialog) { font-size: var(--density-fs); }
body:is(.density-compact, .density-large) .workspace { gap: var(--density-gap); }
body:is(.density-compact, .density-large) .workspace .muted { font-size: max(var(--density-fs-sm), 12px); }

/* ---------- Desktop and tablet (744px and wider) ---------- */
@media (min-width: 744px) {
  /* Sidebar pages. */
  body:is(.density-compact, .density-large) .sidebar nav button { font-size: var(--density-fs-nav); }
  body.density-compact .sidebar nav button { padding-block: 6px; }
  body.density-large .sidebar nav button { min-height: var(--density-control-h); padding-block: 8px; line-height: 1.2; }
  body.density-large .sidebar .bottom-nav > button:not(.theme-toggle) { min-height: var(--density-control-h); font-size: var(--density-fs-nav); }
  /* 44px pages do not all fit a 768px-tall window: the sidebar scrolls rather than hiding Sign Out. */
  body.density-large .sidebar { overflow-y: auto; }

  /* Page header: title and tools. */
  body:is(.density-compact, .density-large) .topbar h1 { font-size: var(--density-fs-title); }
  body:is(.density-compact, .density-large) .topbar #pageSubtitle { font-size: var(--density-fs-sm); }
  body:is(.density-compact, .density-large) .topbar :is(button, .workspace-actions > summary) { min-height: var(--density-control-h); font-size: var(--density-fs); }
  body:is(.density-compact, .density-large) .topbar :is(#newOrderBtn, #newSpecialOrderBtn) { min-height: var(--density-control-h); font-size: var(--density-fs); }
  body:is(.density-compact, .density-large) .topbar .view-mode-buttons button,
  body:is(.density-compact, .density-large).overview-density .overview-view-toggle button { min-height: var(--density-control-h); font-size: var(--density-fs); }
  body:is(.density-compact, .density-large) .topbar .page-tools-bar > button { min-height: var(--density-control-h); font-size: var(--density-fs); }
  body:is(.density-compact, .density-large) .topbar .notification-center-button,
  body:is(.density-compact, .density-large).overview-density .notification-center-button { flex-basis: var(--density-control-h); width: var(--density-control-h); min-width: var(--density-control-h); height: var(--density-control-h); min-height: var(--density-control-h); }
  body.density-compact .topbar :is(button, .workspace-actions > summary) { padding-block: 3px; }
  /* Two-button toggles (Details | Address, Production Cards | Horizontal Display). */
  body:is(.density-compact, .density-large) .topbar :is(.card-detail-toggle, .overview-view-toggle) { width: auto; height: var(--density-control-h); }
  body:is(.density-compact, .density-large) .topbar :is(.card-detail-toggle, .overview-view-toggle) button,
  body:is(.density-compact, .density-large).overview-density .topbar .overview-view-toggle button { height: calc(var(--density-control-h) - 2px); min-height: 0; padding-block: 0; }
  body.density-compact .topbar,
  body.density-compact.overview-density .topbar { min-height: 42px; padding-block: 3px; }

  /* Filter bar: app.js (filterBarFit) reads these widths to decide what stays in the row. */
  body.density-compact #overviewContent > .page-filter-bar { --fb-control-h: var(--density-control-h); --fb-gap: 5px; padding-block: 4px; }
  body.density-large #overviewContent > .page-filter-bar {
    --fb-control-h: var(--density-control-h);
    --fb-gap: 8px;
    --fb-day: 330px;
    --fb-filter: 118px;
    --fb-filter-wide: 132px;
    --fb-search-min: 260px;
    --fb-sort: 468px;
    --fb-panel: 140px;
    padding-block: 8px;
  }
  body.density-large #overviewContent > .page-filter-bar .labeled-filter { grid-template-rows: 18px var(--fb-control-h); }
  body.density-large #overviewContent > .page-filter-bar .week-arrow-stack,
  body.density-large #overviewContent > .page-filter-bar #pageSortWrap { grid-template-rows: 18px var(--fb-control-h); }
  body.density-large #overviewContent > .page-filter-bar .labeled-filter::before { font-size: 14px; line-height: 18px; }
  body.density-large #overviewContent > .page-filter-bar .date-filter-label { width: 48px; font-size: 14px; line-height: 18px; }
  body.density-large #overviewContent > .page-filter-bar .week-arrow-stack,
  body.density-large #overviewContent > .page-filter-bar .week-arrow-stack .icon-btn { width: 48px; min-width: 48px; }
  body.density-large #overviewContent > .page-filter-bar .day-switcher .icon-btn { width: 44px; }
  body.density-large #overviewContent > .page-filter-bar :is(button:not(:where(.search-clear, .search-suggestions *)), select, summary, label.search input, .current-date-label) { font-size: var(--density-fs); }
  body.density-large #overviewContent > .page-filter-bar #pageSortWrap { width: 156px; }
  body.density-large #overviewContent > .page-filter-bar #pageSortWrap select { font-size: var(--density-fs); }
  body.density-large #overviewContent > .page-filter-bar #pageSortDirection { width: 112px; font-size: var(--density-fs-sm); }
  body.density-large #overviewContent > .page-filter-bar #savePageViewBtn { width: 176px; font-size: var(--density-fs-sm); }
  body.density-compact #overviewContent > .page-filter-bar label.search input { font-size: var(--density-fs); }

  /* Totals strip. */
  body:is(.density-compact, .density-large).fixed-header-page #stats .stat strong { font-size: calc(var(--density-fs) + 2px); }
  body:is(.density-compact, .density-large).fixed-header-page #stats .stat span { font-size: var(--density-fs-sm); }
  body.density-compact.fixed-header-page #overviewContent > .stats { padding-block: 3px; }
  body.density-large.fixed-header-page #overviewContent > .stats { padding-block: 8px; }

  /* ---------- Production Cards (Shaker Overview, My Orders) ----------
     Compact, columns under 440px (82px): invoice + status / name / details / notes and icons,
     the four rows of Normal at 18 / 16 / 16 / 24px with 12px text.
     Compact, columns from 440px (66px): invoice, name and status / details / notes and icons.
     Large, columns under 440px (160px): invoice + status / name / details (up to two lines) /
     address (or the details when the card shows the address) / notes and 32px icons, 16px names.
     Large, columns from 440px (116px): the same with invoice, name and status on one line. */
  body:is(.density-compact, .density-large) .work-week .week-cards { gap: var(--density-card-gap); padding: var(--density-card-gap); }
  body:is(.density-compact, .density-large) .work-week .order-card {
    height: var(--density-card-h-wide);
    min-height: var(--density-card-h-wide);
    max-height: var(--density-card-h-wide);
  }
  body.density-compact .work-week .order-card { grid-template-rows: 18px 16px 24px; padding: 3px 5px 3px 7px; }
  body.density-compact .work-week .order-card .card-top { height: 18px; font-size: 12px; line-height: 18px; }
  body.density-compact .work-week .order-card .card-top > .status { height: 18px; min-height: 18px; font-size: 12px; line-height: 18px; padding-inline: 6px; }
  body.density-compact .work-week .order-card .card-meta-row > small { font-size: 12px; line-height: 16px; }

  body.density-large .work-week .order-card {
    grid-template-rows: 24px 20px 20px 32px;
    grid-template-areas: "top top top" "meta meta meta" "extra extra extra" "note asm actions";
    gap: 0 6px;
    padding: 8px 8px 8px 10px;
  }
  body.density-large .work-week .order-card .card-top { height: 24px; gap: 8px; font-size: 16px; line-height: 24px; }
  body.density-large .work-week .order-card .card-top > .status,
  body.density-large .work-week .order-card .assembly-status-chip { height: 24px; min-height: 24px; padding-inline: 6px; font-size: 14px; line-height: 24px; }
  body.density-large .work-week .order-card .card-meta-row > small,
  body.density-large .work-week .order-card .card-meta-extra { font-size: 14px; line-height: 20px; }
  body.density-large .work-week .order-card .card-meta-extra {
    grid-area: extra;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.density-large .work-week .order-card .card-note { height: 32px; min-height: 32px; max-height: 32px; padding-inline: 8px 10px; font-size: 14px; line-height: 20px; }
  body.density-large .work-week .order-card .card-note .icon-action-icon { width: 16px; height: 16px; }
  body.density-large .work-week .order-card .card-actions { gap: 6px; }
  body.density-large.overview-density .work-week .order-card .card-actions .icon-action-btn,
  body.density-large.overview-density .work-week .order-card .card-actions .card-overflow > summary.icon-action-btn,
  body.density-large .work-week .order-card .card-actions .icon-action-btn { width: var(--density-icon-btn); min-width: var(--density-icon-btn); height: var(--density-icon-btn); min-height: var(--density-icon-btn); }
  body.density-large .work-week .order-card .card-title > :is(.order-icon, .sync-attention-badge) { width: 22px; height: 22px; }
  body.density-large .work-week .order-card :is(.order-icon, .sync-attention-badge) > .badge-icon { width: 15px; height: 15px; }
  body.density-large .work-week .order-card .card-note-count { min-width: 16px; font-size: 12px; line-height: 16px; }

  /* Day header. */
  body.density-large .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > strong { font-size: 17px; line-height: 22px; }
  body.density-large .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .week-day-count { height: 36px; font-size: 14px; line-height: 18px; }
  body.density-large .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill { min-height: 28px; font-size: 14px; line-height: 22px; }
  body.density-compact .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header { padding: 5px 7px 6px; }
  body.density-compact .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .week-day-count { -webkit-line-clamp: 1; height: 15px; text-overflow: ellipsis; white-space: nowrap; display: block; }
  body.density-compact .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .day-capacity { margin-top: 2px; }

  /* Horizontal Display rows: one height per density (Normal 44px). */
  body.density-compact tr.horizontal-order-row > td { height: 36px; padding-block: 2px; font-size: 13px; }
  body.density-compact tr.horizontal-order-row .compact-order-details > span { -webkit-line-clamp: 1; }
  body.density-large tr.horizontal-order-row > td { height: 64px; padding-block: 6px; font-size: var(--density-fs); }
  body.density-large tr.horizontal-order-row :is(.compact-order-identity > strong, .compact-order-identity > .compact-order-customer, .compact-order-details > span, .compact-order-address-inline, .card-note) { font-size: var(--density-fs); line-height: 22px; }
  body.density-large tr.horizontal-order-row .compact-order-address-inline { font-size: var(--density-fs-sm); line-height: 20px; }
  body.density-large tr.horizontal-order-row .assembly-status-chip { line-height: 20px; }
  body.density-large .horizontal-orders-table th { font-size: var(--density-fs-sm); }
  /* Three 32px row icons (BO/OC rows add File) fit the Actions column. */
  body.density-large .horizontal-orders-table th:nth-child(7) { width: 124px; }
  body.density-large .horizontal-day-toggle { min-height: var(--density-control-h); font-size: var(--density-fs); }
}

/* Production Card tiers by day column width (container "day", responsive-overview.css). */
@media (min-width: 744px) {
  @container day (max-width: 439px) {
    body:is(.density-compact, .density-large) .work-week .order-card {
      height: var(--density-card-h);
      min-height: var(--density-card-h);
      max-height: var(--density-card-h);
    }
    body.density-compact .work-week .order-card { grid-template-rows: 34px 16px 24px; }
    body.density-compact .work-week .order-card .card-top { grid-template-rows: 18px 16px; height: 34px; }
    body.density-compact .work-week .order-card .card-title > .card-customer { line-height: 16px; }
    body.density-large .work-week .order-card { grid-template-rows: 48px 40px 20px 32px; }
    /* The order details may take two lines here ("Delivery | Assembled: 6 (Mods: 2) | Pieces: 31"
       no longer fits one line at 14px); the row keeps its fixed 40px. */
    body.density-large .work-week .order-card .card-meta-row > small:not(.card-meta-extra) { display: -webkit-box; align-self: end; -webkit-box-orient: vertical; -webkit-line-clamp: var(--density-card-lines); white-space: normal; overflow-wrap: anywhere; }
    body.density-large .work-week .order-card .card-top { grid-template-rows: 24px 24px; gap: 0; height: 48px; }
    body.density-large .work-week .order-card .card-top > .selection-check,
    body.density-large .work-week .order-card .card-title > :is(strong, .order-icon, .sync-attention-badge) { margin-right: 6px; }
    body.density-large .work-week .order-card .card-title > .card-customer { line-height: 24px; }
    /* The 32px icons need the row: the notes button shows its icon and unread count (the note
       text stays its accessible name and title, as in the narrowest Normal columns). */
    body.density-large .work-week .order-card .card-note { justify-content: center; min-width: var(--density-icon-btn); padding: 0; }
    body.density-large .work-week .order-card .card-note-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    body.density-large .work-week .order-card .card-note-count { display: block; }
  }
}

/* ---------- Tables (desktop and tablet) ---------- */
@media (min-width: 744px) {
  body:is(.density-compact, .density-large) .workspace table:not(.horizontal-orders-table) :is(th, td) {
    padding: var(--density-cell-py) var(--density-cell-px);
    font-size: var(--density-fs);
  }
  body:is(.density-compact, .density-large) .workspace table:not(.horizontal-orders-table) th { font-size: var(--density-fs-sm); }
  body:is(.density-compact, .density-large) .workspace table:not(.horizontal-orders-table) > tbody > tr > td { height: var(--density-row-h); }
  body:is(.density-compact, .density-large) .workspace :is(#ordersTable, .assembly-day-table) .cell-text-clamp { -webkit-line-clamp: var(--density-clamp); }
  body:is(.density-compact, .density-large) .workspace td .status { font-size: var(--density-fs-sm); }
  body.density-compact .workspace td .status { min-height: 20px; padding-block: 1px; }
  body.density-large .workspace td .status { min-height: 26px; padding: 3px 10px; }
  /* Large text no longer fits some fixed columns on one line: headers and status pills wrap
     (two lines at most in practice) instead of cutting words ("Pickup Dura...", "Needs Resc..."). */
  body.density-large .workspace table:not(.horizontal-orders-table) th { white-space: normal; line-height: 1.2; text-overflow: clip; }
  body.density-large .workspace td .status:not(select) { white-space: normal; line-height: 1.2; overflow-wrap: break-word; }
  body:is(.density-compact, .density-large) .workspace td :is(.cell-btn, select:not(.status), input:not([type=checkbox]):not([type=radio])) { font-size: var(--density-fs); }
  body.density-compact .workspace td select { min-height: 26px; height: 26px; padding-block: 0; }
  body.density-large .workspace td select:not(.status) { min-height: 40px; }
  body.density-large .workspace td select.status { min-height: 30px; }
  body.density-large .workspace td .icon-action-btn { width: var(--density-icon-btn); min-width: var(--density-icon-btn); height: var(--density-icon-btn); min-height: var(--density-icon-btn); }
  body.density-large .workspace td .row-edit-actions.icon-actions { gap: 6px; }

  /* Row icons are 32px in Large: the actions columns grow to fit them (responsive-tables.css
     reads these widths); the other columns keep their widths and the text wraps. */
  body.density-large #ordersTable { --cpu-actions-w: 84px; }
  body.density-large #ordersTable:has(td.row-edit-cell [data-remove-window]) { --cpu-actions-w: 122px; }
  body.density-large .assembly-day-table { --asm-actions-w: 84px; }
  @container assembly-table (width >= 1100px) {
    body.density-large .assembly-day-table { --asm-date-w: 126px; --asm-count-w: 92px; }
  }
  @container assembly-table (width < 1100px) {
    body.density-large .assembly-day-table { --asm-date-w: 118px; }
  }
  @container cpu-table (width < 1300px) {
    body.density-large #ordersTable { --cpu-window-w: 108px; --cpu-type-w: 84px; }
  }
  body.density-large .assembly-day-table.has-row-labels { --asm-actions-w: 122px; }
  body.density-large th.checkin-action-col,
  body.density-large .assembly-day-table th.assembly-action-col { width: 84px; }
  body.density-large #ordersTable:has(td.row-edit-cell [data-remove-window]) th.checkin-action-col,
  body.density-large .assembly-day-table.has-row-labels th.assembly-action-col { width: 122px; }
}

/* Back Orders / Order Corrections filter row. */
@media (min-width: 744px) {
  body:is(.density-compact, .density-large) #specialOrdersPanel .special-filter-grid :is(input, select, summary, button:not(.search-clear, .search-suggestions *)) { height: var(--density-control-h); min-height: var(--density-control-h); font-size: var(--density-fs); }
  body:is(.density-compact, .density-large) #specialOrdersPanel .special-filter-grid :is(summary, button:not(.search-clear, .search-suggestions *)) { padding-block: 0; }
  body.density-compact #specialOrdersPanel .special-orders-toolbar { padding-block: 5px; }
  body.density-large #specialOrdersPanel .special-orders-toolbar { padding: 10px 12px; }
  body.density-large #specialOrdersPanel .special-filter-grid > .special-sort-control { font-size: var(--density-fs-sm); }
  body.density-large #specialOrdersPanel .special-sort-control select { width: 176px; }
  body.density-large #specialOrdersPanel .special-filter-grid #saveSpecialViewBtn { flex-basis: auto; font-size: var(--density-fs-sm); }
}

/* ---------- Panels, forms and dialogs ---------- */
body:is(.density-compact, .density-large) .workspace :is(.admin-card, .rpt-card) { padding: var(--density-pad); }
body:is(.density-compact, .density-large) .admin-section-nav button { font-size: var(--density-fs); }
body.density-large .admin-section-nav button { min-height: var(--density-control-h); }
body.density-large :is(.workspace, dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea) { min-height: var(--density-control-h); font-size: var(--density-fs); }
body.density-large :is(.workspace, dialog) :is(button.primary, button.secondary, button.danger) { min-height: var(--density-control-h); }
body.density-compact :is(.workspace, dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select) { padding-block: 5px; }
body:is(.density-compact, .density-large) dialog :is(label, legend) { font-size: var(--density-fs); }

/* Team Chat (expanded): message text and the message box. The collapsed bar keeps its height. */
body:is(.density-compact, .density-large) #globalChatDock:not(.collapsed) :is(.chat-messages, textarea, input) { font-size: var(--density-fs); }
/* Q&A (2026-10-24): question and answer text follow the density; the hover preview with Large. */
body.density-compact #globalChatDock:not(.collapsed) :is(.qa-question-text, .qa-answer-text) { font-size: var(--density-fs-sm); }
body.density-large #globalChatDock:not(.collapsed) :is(.qa-question-text, .qa-answer-text) { font-size: var(--density-fs-sm); }
body.density-large #globalChatDock:not(.collapsed) :is(.qa-question-meta, .qa-answer-body small, .qa-category-filter) { font-size: 13px; }
body.density-large .qa-preview-text { font-size: var(--density-fs-sm); }
/* Compact Q&A rows (2026-10-25) stay about one text line tall in every density (24px minimum target). */
body.density-compact #globalChatDock .qa-row { font-size: 12px; line-height: 17px; padding-block: 3px; }
body.density-large #globalChatDock .qa-row { min-height: 26px; font-size: 14px; line-height: 20px; }
body.density-large #globalChatDock :is(.qa-row-count, .qa-row-time) { font-size: 12px; }

/* ---------- Phones (743px and narrower): text size and spacing only ----------
   The phone card layouts (workspace.css, already tuned for density on phones) are unchanged;
   Large raises their text by about two pixels; Compact keeps the phone layout as it is. */
@media (max-width: 743px) {
  body.density-large .work-week .order-card .card-top { font-size: 16px; }
  body.density-large .work-week .order-card .card-top > .status,
  body.density-large #ordersTable .mobile-cpu-meta .status { font-size: 13px; }
  body.density-large .work-week .order-card .mobile-order-meta small,
  body.density-large #ordersTable .mobile-cpu-meta,
  body.density-large #ordersTable .mobile-cpu-meta small,
  body.density-large #ordersTable .mobile-cpu-line .mobile-cpu-pieces { font-size: 14px; }
  body.density-large #ordersTable .mobile-cpu-line { font-size: 16px; }
  body.density-large #ordersTable .mobile-cpu-quick-actions > button { font-size: 15px; }
  body.density-large #ordersTable .mobile-cpu-details dl { font-size: 15px; }
}

/* Daily Assembly Limit (James 2026-10-26/27): day text, pill, tooltip, popover and notices follow
   the density tokens. */
body.density-compact .asm-cap-meter { font-size: var(--density-fs-sm); }
body.density-compact .dal-pill { height: 24px; padding: 0 8px; }
body.density-compact .asm-cap-queue-item { padding: 4px 8px; }
body.density-compact .dal-popover .asm-cap-queue-item { padding: 5px 0; }
body.density-compact .dal-popover { gap: 10px; padding: 12px 14px; }
body.density-compact .asm-cap-order-notice { padding: 8px 10px; }
body.density-large .asm-cap-meter { font-size: var(--density-fs-sm); }
body.density-large .dal-pill { height: 32px; padding: 0 11px; border-radius: 16px; font-size: var(--density-fs-sm); }
body.density-large .dal-pill strong { font-size: 15px; }
body.density-large .dal-pill-unit { font-size: var(--density-fs-sm); }
body.density-large .dal-tooltip { width: min(340px, calc(100vw - 16px)); font-size: var(--density-fs-sm); }
body.density-large .dal-popover { width: min(380px, calc(100vw - 16px)); font-size: var(--density-fs); }
body.density-large .dal-tip-title { font-size: 15px; }
body.density-large .dal-pop-heading strong { font-size: 16px; }
body.density-large :is(.dal-pop-summary, .dal-set-help, .dal-set-grid label, .dal-set-limit span, .dal-link, .dal-set-status, .dal-empty, .dal-popover .asm-cap-queue-meta) { font-size: var(--density-fs-sm); }
body.density-large .dal-set input,
body.density-large :is(.dal-popover .dal-change, .dal-pop-foot button, .dal-popover .asm-cap-queue-item > button),
body.density-large .asm-cap-actions button,
body.density-large .asm-cap-queue-item > button,
body.density-large .asm-cap-room-day { min-height: var(--density-control-h); }
body.density-large .dal-set input { height: var(--density-control-h); }
body.density-large .dal-set #dalLimitInput { width: 96px; }
body.density-large .dal-set-grid { grid-template-columns: 100px minmax(0, 1fr); }
body.density-large .sync-attention-badge.asm-cap-badge { font-size: 12px; }
body.density-compact .asm-cap-pending-banner { gap: 6px; padding: 8px 10px; }
body.density-compact .asm-cap-pending-item { padding: 5px 8px; gap: 2px 10px; }
body.density-compact .asm-cap-pending-actions button { min-height: 28px; padding: 0 10px; }
body.density-compact .asm-cap-pending-title { font-size: 14px; }
body.density-large .asm-cap-pending-title { font-size: 17px; }
body.density-large :is(.asm-cap-pending-note, .asm-cap-pending-wait) { font-size: var(--density-fs-sm); }
body.density-large :is(.asm-cap-pending-customer, .asm-cap-pending-meta, .asm-cap-pending-status) { font-size: var(--density-fs); }
body.density-large .asm-cap-pending-invoice { font-size: 16px; }
body.density-large .asm-cap-pending-actions button,
body.density-large .asm-cap-review-btn { min-height: var(--density-control-h); }
body.density-large .asm-cap-chip { height: 20px; font-size: 12px; }
body.density-large .nav-count-badge { min-width: 20px; height: 20px; font-size: 12px; }