/* Responsive layer: overview (Highland 2026-10-20 "compatible with various screen sizes").
   Loaded after app-shell.css. Tiers: wide >=1600, standard 1280-1599, compact 1024-1279,
   tablet 744-1023, phone <=743 (phone layout lives in styles.css/workspace.css). */

/* Elements that only appear in some layouts (shown by the container queries below).
   Phones and the Horizontal Display headers keep the full labels. */
.day-label-short,
.capacity-pill-short,
.chip-label-short,
.th-label-short,
.card-note-count,
.chip-glyph,
.compact-order-address-inline,
.badge-icon { display: none; }
.day-capacity .capacity-pill span,
.week-day header > strong > span { color: inherit; font-size: inherit; }
.card-note .icon-action-icon { flex: 0 0 auto; width: 14px; height: 14px; }
/* Order details segments (app.js detailSegmentsMarkup, 2026-10-23): a wrapping details line breaks
   between "Freight | Flat Pack | Pieces: 0" segments, never inside one. */
.detail-part { white-space: nowrap; }

/* Rescheduled / Sync issue on Production Cards, phones included (2026-10-21): an 18px icon badge
   after the invoice instead of a word pill that pushed the customer name to another line (and
   was cut to "Re..." / "Sy..." on phones). The words stay for screen readers; the title has the
   detail ("Rescheduled from Oct 16, 2026", the sync error). */
.work-week .order-card .card-title > :is(.order-icon, .sync-attention-badge) {
  position: relative; /* contains the visually hidden .badge-label below */
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 5px;
}
.work-week .order-card :is(.order-icon, .sync-attention-badge)::before { content: none; }
.work-week .order-card :is(.order-icon, .sync-attention-badge) > .badge-icon { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.work-week .order-card :is(.order-icon, .sync-attention-badge) > .badge-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 744px) {
  /* ---- Week grid (O9) ----
     Five fluid day columns. When five 216px columns no longer fit (under about 1104px of room,
     so 1280px windows still show the whole week), the columns stop shrinking and the week
     scrolls sideways inside #workWeek with one snap point per day, instead of the old 3 + 2
     layout that hid Thursday and Friday below the longest of Monday-Wednesday.
     updateWeekScrollHint (app.js) fades the edge that has more days behind it and makes the
     scroller a named, focusable region while it scrolls. */
  .work-week:not(.horizontal-work-week):not(.assembly-week-sections) {
    grid-template-columns: repeat(5, minmax(216px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .work-week:not(.horizontal-work-week):not(.assembly-week-sections) > .week-day { scroll-snap-align: start; container: day / inline-size; }
  .work-week.week-scrolls-left:not(.horizontal-work-week),
  .work-week.week-scrolls-right:not(.horizontal-work-week) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--week-fade-left, 0px), #000 calc(100% - var(--week-scrollbar, 0px) - var(--week-fade-right, 0px)), transparent calc(100% - var(--week-scrollbar, 0px)), #000 calc(100% - var(--week-scrollbar, 0px)));
    mask-image: linear-gradient(to right, transparent 0, #000 var(--week-fade-left, 0px), #000 calc(100% - var(--week-scrollbar, 0px) - var(--week-fade-right, 0px)), transparent calc(100% - var(--week-scrollbar, 0px)), #000 calc(100% - var(--week-scrollbar, 0px)));
  }
  .work-week.week-scrolls-left { --week-fade-left: 40px; }
  .work-week.week-scrolls-right { --week-fade-right: 40px; }
  .work-week[role="region"]:focus-visible { outline: 3px solid #2f6fb2; outline-offset: -3px; }

  /* ---- Day header (O1, O2, O8) ----
     The date has its own line and never gets an ellipsis; the totals line sits under it and may
     wrap; the three capacity pills are always one row of three equal pills. Wide columns put the
     date and totals on one line. Everything adapts to the day column (container "day"), not the
     window.
     2026-10-21: every header has the same height, so the pills and the first cards line up across
     the week: the totals line always takes two lines' room in narrower columns (one day's totals
     wrapping while the next day's do not made the columns start at different heights) and one
     line from 340px up, where they always fit. */
  .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "date" "count" "pills";
    align-items: start;
    gap: 2px 8px;
    min-height: 0;
    padding: 7px 8px 8px;
  }
  .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > strong { position: relative; grid-area: date; min-width: 0; overflow: visible; font-size: 14px; line-height: 18px; text-overflow: clip; white-space: nowrap; }
  .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .week-day-count { grid-area: count; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; max-width: none; height: 30px; overflow: hidden; font-size: 12px; line-height: 15px; text-align: left; text-overflow: clip; white-space: normal; }
  .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .week-day-chevron { display: none; }
  .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .day-capacity { grid-area: pills; margin-top: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  /* Capacity pills (2026-10-21): quiet outlined pills on the navy header, the same shape as the
     status chips, instead of solid white buttons. Available = hollow green dot; at capacity = a
     tinted pill with a filled red dot (the words stay in the accessible name and the title). */
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill {
    display: block;
    position: relative;
    min-width: 0;
    min-height: 24px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: transparent;
    color: #eef3f9;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill.is-full { border-color: #f4a39b; background: rgba(244, 163, 155, 0.2); color: #ffe7e4; }
  .work-week:not(.horizontal-work-week) .week-day-header button.capacity-pill:hover { background: rgba(255, 255, 255, 0.12); }
  .work-week:not(.horizontal-work-week) .week-day-header button.capacity-pill.is-full:hover { background: rgba(244, 163, 155, 0.3); }
  .work-week:not(.horizontal-work-week) .week-day-header button.capacity-pill:focus-visible { outline: 2px solid #9cc3f5; outline-offset: 1px; box-shadow: none; }
  /* Compact pills: the type and a hollow (available) or filled (at capacity) dot. The full
     "Delivery Available" stays in the accessible name and the title. */
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-short { display: inline; }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-abbr { display: none; }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-short::after { content: "\00a0\25CB"; }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill.is-full .capacity-pill-short::after { content: "\00a0\25CF"; }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill.is-open .capacity-pill-short::after { color: #8fdcb0; }
  .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill.is-full .capacity-pill-short::after { color: #ff9f96; }

  /* ---- Production card (O3-O7; one standard size 2026-10-21) ----
     Every card in a day column has the same fixed height, whatever its badges, detail mode
     (Details or Address) or text length (product owner 2026-10-21: "do not allow order cards to be
     resized and larger than a standard order card"; PR #35's content-height cards ran 65-105px).
     Three one-line rows, every one cut with an ellipsis and complete in its title:
     Row 1 (20px): invoice and customer name, then the status chip pinned at the top right.
       Rescheduled and Sync issue are 16px icons after the invoice (the words stay the accessible
       name, the title gives the detail), so they never push the name to a second line.
     Row 2 (16px): order details or address.
     Row 3 (24px): notes button on the left, then the assembly / modification chip and the
       file / details / more icons on the right. */
  .work-week .week-cards { align-content: start; grid-auto-rows: max-content; gap: 6px; padding: 6px; }
  .work-week .order-card {
    display: grid;
    grid-template-columns: minmax(24px, 1fr) auto auto;
    grid-template-rows: 20px 16px 24px;
    grid-template-areas: "top top top" "meta meta meta" "note asm actions";
    align-content: space-between;
    align-items: center;
    gap: 0 4px;
    box-sizing: border-box;
    height: 84px;
    min-height: 84px;
    max-height: 84px;
    padding: 6px 6px 6px 8px;
    overflow: hidden;
    border-radius: 6px;
    font-size: 12px;
    resize: none;
  }
  .work-week .order-card .card-meta-row,
  .work-week .order-card .card-footer-row { display: contents; }
  .work-week .order-card .card-top {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 20px;
    overflow: hidden;
    font-size: 13px;
    line-height: 20px;
  }
  .work-week .order-card .card-top > .selection-check { order: 0; flex: 0 0 auto; margin: 0; }
  .work-week .order-card .card-top > .card-title { order: 1; }
  .work-week .order-card .card-top > .status {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 60%;
    height: 20px;
    min-height: 20px;
    margin: 0 0 0 auto;
    padding: 0 7px;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The status chip keeps its full width and the customer name takes what is left, but never
     less than about six characters: when the invoice, its icons and that much of the name do not
     fit beside the chip, the chip gets the ellipsis (the title attribute keeps the full status). */
  .work-week .order-card .card-title { display: flex; flex: 1 1 0; align-items: center; gap: 5px; min-width: auto; overflow: visible; white-space: nowrap; }
  .work-week .order-card .card-title > strong { flex: 0 0 auto; margin: 0; font-weight: 800; }
  .work-week .order-card .card-title > .card-customer { display: block; flex: 1 1 0; width: 0; min-width: 3.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .work-week .order-card .card-meta-row > small {
    grid-area: meta;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .work-week .order-card .assembly-status-slot { grid-area: asm; display: flex; align-items: center; min-width: 0; min-height: 0; overflow: hidden; }
  .work-week .order-card .assembly-status-slot:not(:has(.assembly-status-chip)) { display: none; }
  .work-week .order-card .assembly-status-chip { display: block; min-width: 0; max-width: 100%; height: 20px; min-height: 20px; padding: 0 7px; overflow: hidden; font-size: 12px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .work-week .order-card .card-note {
    grid-area: note;
    position: relative;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 4px;
    min-width: 24px;
    max-width: 100%;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 6px 0 5px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
  }
  .work-week .order-card .card-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .work-week .order-card .card-actions { grid-area: actions; display: flex; align-items: center; gap: 3px; }
  /* Assembly chip: "Asm: In Progress" in most columns, "Asm" + the status glyph in the narrowest
     and the full "Assembly: In Progress" in wide ones. The full text is always the title and the
     accessible text. */
  .work-week .order-card .chip-label-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .work-week .order-card .chip-label-short { display: inline; }
  .work-week .order-card .assembly-status-chip { position: relative; }
  .card-note-count { position: absolute; top: 0; right: 0; min-width: 14px; padding: 0 3px; border-radius: 999px; background: #b42318; color: #fff; font-size: 12px; font-weight: 800; line-height: 14px; text-align: center; pointer-events: none; }
  body.dark-mode .card-note-count { background: #ffb4ab; color: #3b0b07; }

  /* ---- Day column width tiers (container "day") ---- */
  /* Very narrow column: "Mon 10/19" instead of "Mon, Oct 19, 2026" (the full date stays readable
     by screen readers). Unused at the 216px minimum; a safety net, never an ellipsis. */
  @container day (max-width: 199px) {
    .work-week:not(.horizontal-work-week) .week-day-header .day-label-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .work-week:not(.horizontal-work-week) .week-day-header .day-label-short { display: inline; }
  }
  /* Pills read "Del / Asm / Frt" + dot below 300px ("Assembly ○" no longer fits the outlined
     pill there, 2026-10-21). */
  @container day (max-width: 299px) {
    .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-word { display: none; }
    .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-abbr { display: inline; }
  }
  /* Columns under 440px (every window up to ~2200px) get a four-row card of one fixed 100px
     height (2026-10-21 follow-up): beside the status chip a customer name had about six
     characters left, and the product owner had asked before for names that can be read.
     Row 1: invoice + Rescheduled / Sync issue icons, status chip at the right.
     Row 2: the customer name on its own full-width line (ellipsis; full text in the title).
     Rows 3 and 4: details or address; notes, assembly chip and icons, as in wider columns.
     The title wrapper steps aside (display: contents) and the title row becomes a two-line grid:
     selection check, invoice and icons in the first columns, the status chip in the last one
     (it gets the ellipsis if it must, it never wraps), the name across the second line. */
  @container day (max-width: 439px) {
    .work-week .order-card { grid-template-rows: 40px 16px 24px; height: 100px; min-height: 100px; max-height: 100px; }
    .work-week .order-card .card-top { display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr); grid-template-rows: 20px 18px; align-content: space-between; align-items: center; gap: 0; height: 40px; }
    .work-week .order-card .card-top > .card-title { display: contents; }
    .work-week .order-card .card-top > .selection-check,
    .work-week .order-card .card-title > :is(strong, .order-icon, .sync-attention-badge) { grid-row: 1; margin-right: 5px; }
    .work-week .order-card .card-top > .status { grid-row: 1; grid-column: 5; justify-self: end; max-width: 100%; }
    .work-week .order-card .card-title > .card-customer { grid-row: 2; grid-column: 1 / -1; width: auto; min-width: 0; line-height: 18px; }
  }
  /* Narrow column (1280-1440px windows, sideways-scrolling week): the assembly chip reads "Asm" +
     the status glyph. */
  @container day (max-width: 259px) {
    .work-week .order-card .assembly-status-chip:has(.chip-glyph) .chip-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .work-week .order-card .assembly-status-chip .chip-glyph { display: inline; }
    /* "Asm ▸", not "▸ Asm ▸": the glyph after the label replaces the bubble's leading glyph. */
    .work-week .order-card .assembly-status-chip:has(.chip-glyph)::before { content: none; }
  }
  /* Between the two, "Asm: In Progress" needs the room: the notes button shows its icon and
     unread count only (the note text stays its accessible name and title). */
  @container day (min-width: 260px) and (max-width: 299px) {
    .work-week .order-card:has(.assembly-status-chip) .card-note { justify-content: center; padding: 0; }
    .work-week .order-card:has(.assembly-status-chip) .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; }
    .work-week .order-card:has(.assembly-status-chip) .card-note-count { display: block; }
  }
  /* Wide column: the day totals fit on one line. */
  @container day (min-width: 340px) {
    .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .week-day-count { -webkit-line-clamp: 1; height: 15px; }
  }
  /* Very wide column (2560px windows, O10): date and totals on one line, full pill words,
     slightly larger card text. */
  @container day (min-width: 440px) {
    .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "date count" "pills pills"; }
    .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header > .week-day-count { text-align: right; }
    .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
    .work-week:not(.horizontal-work-week) .week-day-header .capacity-pill-short { display: none; }
    .work-week:not(.horizontal-work-week) > .week-day > header.week-day-header { grid-template-rows: auto auto; }
    .work-week .order-card { grid-template-rows: 22px 18px 24px; height: 88px; min-height: 88px; max-height: 88px; }
    /* Full assembly label ("Modification: In Progress"); narrower columns keep "Mod: ..." so
       the notes button keeps room for its text. */
    .work-week .order-card .chip-label-long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
    .work-week .order-card .chip-label-short { display: none; }
    .work-week .order-card .card-top { height: 22px; font-size: 14px; line-height: 22px; }
    .work-week .order-card .card-meta-row > small { font-size: 13px; line-height: 18px; }
  }

  /* ---- Horizontal Display (H1-H3) ----
     The table fills its day section; columns give way by priority as the section narrows
     (container "htable"): under 1100px the Address column folds into a second line of Order
     Details, under 900px Communications becomes an icon with the unread count. Header and body
     cells are always hidden together. Only under 640px does the table scroll sideways, with
     Invoice / Customer and Actions kept in view. */
  .horizontal-table-shell { container: htable / inline-size; overflow-x: auto; }
  .horizontal-orders-table { width: 100%; min-width: 640px; table-layout: fixed; }
  .horizontal-orders-table th:nth-child(1) { width: 21%; }
  .horizontal-orders-table th:nth-child(2) { width: 20%; }
  .horizontal-orders-table th:nth-child(3) { width: 19%; }
  .horizontal-orders-table th:nth-child(4) { width: 15%; }
  .horizontal-orders-table th:nth-child(5) { width: 10%; }
  .horizontal-orders-table th:nth-child(6) { width: 9%; }
  .horizontal-orders-table th:nth-child(7) { width: 92px; }
  .horizontal-orders-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
  .horizontal-orders-table :is(th, td):last-child { position: sticky; right: 0; z-index: 1; box-shadow: inset 1px 0 0 var(--line); }
  .horizontal-orders-table :where(td:first-child, td:last-child) { background-color: inherit; }
  /* Real table cells (they were flex boxes, which left unpainted strips under taller rows and
     cannot be sticky). 2026-10-21: the identity cell stacks the invoice (with its Rescheduled /
     Sync issue icons) over a one-line customer name (full name in its title), with no float, so
     it reads the same whether the table cells are left-aligned or centered. */
  tr.horizontal-order-row td.compact-order-identity,
  tr.horizontal-order-row td.card-actions { display: table-cell; }
  tr.horizontal-order-row td.card-actions .row-edit-actions { display: flex; justify-content: center; gap: 6px; }
  tr.horizontal-order-row .compact-order-identity > strong { line-height: 16px; }
  tr.horizontal-order-row .compact-order-identity > .compact-order-customer { display: block; overflow: hidden; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
  tr.horizontal-order-row .compact-order-details > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  tr.horizontal-order-row .compact-order-address-inline { display: none; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
  .horizontal-orders-table th { position: relative; white-space: normal; line-height: 1.2; }
  tr.horizontal-order-row .card-note { position: relative; display: flex; align-items: center; gap: 4px; min-height: 24px; }
  tr.horizontal-order-row .card-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  tr.horizontal-order-row .assembly-status-chip { display: inline-block; max-width: 100%; vertical-align: middle; white-space: normal; overflow-wrap: break-word; }
  tr.horizontal-order-row .status { min-width: 0; max-width: 100%; padding: 3px 6px; }
  /* One line for the department status only; the assembly chip wraps (rule above). */
  tr.horizontal-order-row .status:not(.assembly-status-chip) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 2026-10-21: every row has the same height (two 16px text lines). The assembly chip wraps to at
     most two lines as a rounded box (full text in its title); Rescheduled and Sync issue are 16px
     icons beside the invoice, as on the cards, so they no longer push the customer name aside. */
  tr.horizontal-order-row > td { height: 44px; }
  tr.horizontal-order-row .assembly-status-chip { display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-block: 1px; border-radius: 9px; line-height: 16px; }
  tr.horizontal-order-row .compact-order-identity > :is(.order-icon, .sync-attention-badge) { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0 0 0 5px; padding: 0; border-radius: 4px; vertical-align: -3px; }
  tr.horizontal-order-row :is(.order-icon, .sync-attention-badge)::before { content: none; }
  tr.horizontal-order-row :is(.order-icon, .sync-attention-badge) > .badge-icon { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  tr.horizontal-order-row :is(.order-icon, .sync-attention-badge) > .badge-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @container htable (max-width: 1099px) {
    .horizontal-orders-table :is(th, td):nth-child(3) { display: none; }
    .horizontal-orders-table th:nth-child(1) { width: 26%; }
    .horizontal-orders-table th:nth-child(2) { width: 28%; }
    .horizontal-orders-table th:nth-child(4) { width: 16%; }
    .horizontal-orders-table th:nth-child(5) { width: 13%; }
    .horizontal-orders-table th:nth-child(6) { width: 12%; }
    tr.horizontal-order-row:not(.order-type-cpu) .compact-order-address-inline { display: -webkit-box; }
    /* With the address folded under it, Order Details takes one line so the row keeps its height. */
    tr.horizontal-order-row:not(.order-type-cpu) .compact-order-details > span { -webkit-line-clamp: 1; }
  }
  @container htable (max-width: 899px) {
    .horizontal-orders-table th:nth-child(1) { width: 25%; }
    .horizontal-orders-table th:nth-child(2) { width: 26%; }
    .horizontal-orders-table th:nth-child(4) { width: 56px; }
    .horizontal-orders-table th:nth-child(5) { width: 12%; }
    .horizontal-orders-table th:nth-child(6) { width: 13%; }
    .horizontal-orders-table th:nth-child(7) { width: 84px; }
    .horizontal-orders-table .th-label-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .horizontal-orders-table .th-label-short { display: inline; }
    tr.horizontal-order-row .card-note { justify-content: center; width: 32px; margin-inline: auto; padding: 0; }
    tr.horizontal-order-row .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; }
    tr.horizontal-order-row .card-note-count { display: inline-block; }
  }
  /* H3: the day title stays on one line; the totals take the remaining width. */
  .horizontal-day-toggle { grid-template-columns: auto minmax(0, 1fr) 22px; }
  .horizontal-day-toggle > strong { white-space: nowrap; }
  .horizontal-day-toggle > .week-day-count { text-align: right; }
}

/* Phones keep the status chip after the title (it comes first in the markup so it can float
   at the top right on desktop). */
@media (max-width: 743px) {
  .work-week .order-card .card-top > .status { order: 2; }
  .work-week .order-card .card-top > .card-title { order: 1; }
  .work-week .order-card .card-top > .selection-check { order: 0; }
}