/* Business Management Dashboard, a retail label's pieces (xd-retail-): the fulfilment list with each order's
   colours and sizes, the products with the colours and sizes the shop offers, customers, and the pieces a
   customer asked to see at the showroom. Drawn in the business's tokens: the only colour that is not a token
   is a dye, set on its own small square beside the dye's name. Layout only; no figure lives here. */

/* A label's working screen keeps its paper: panels are ruled off with a line of ink where another business
   would tint a box, and a summary card is a figure under a rule. */
.xd-retail-frame .xd-box { --x-under: var(--x-bg); padding: 14px 0 4px; border: 0; border-top: 2px solid var(--x-ink); border-radius: 0; background: none; }
.xd-retail-frame .xd-box .x-table-wrap { --x-under: var(--x-bg); }
.xd-retail-frame .xd-tile { border: 0; border-top: 2px solid var(--x-ink); border-radius: 0; background: none; }
.xd-retail-frame .xd-tile .x-card-body { padding: 12px 0 6px; }
.xd-retail-frame .xd-tiles { gap: 16px 24px; }
.xd-retail-frame .xd-meter { border-radius: 0; }
.xd-retail-frame .xd-meter > span { background: var(--x-ink); }
@media (hover: hover) and (pointer: fine) { .xd-retail-frame .xd-tile.x-card--link:hover { border-color: var(--x-ink); } }

/* A list's last column holds the status and, for an order that is late or an appointment that is today, a second
   mark beside it: the two keep a gap at every width, and the second drops under the first where the column is narrow. */
.xd-retail-frame .xd-records td:last-child .x-td-v { display: flex; flex-wrap: wrap; gap: 6px; }

/* A mark that says something is wrong with a record (an order that is late, a sample that is not at the showroom)
   is filled, so it is told at once from a status drawn in the same tone beside it. Its sign and its words stay. */
.xd-retail-frame .x-pill--warn.xd-flag { background: var(--x-warn); color: var(--x-bg); }

/* The head of the overview: what the page is, and the table the orders are packed on. The picture leaves on a
   phone, where the figures should be the first thing in view. */
.xd-retail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.xd-retail-top > .xd-top { min-width: 0; }
.xd-retail-top-pic { flex: none; width: min(15rem, 26vw); }
@media (max-width: 44.99em) { .xd-retail-top-pic { display: none; } }

/* A dye beside its name. The border keeps a pale dye visible on white paper. */
.xd-retail-dye { display: inline-block; flex: none; width: .875rem; height: .875rem; border: 1px solid var(--x-line); }
.xd-retail-var, .xd-retail-colour { display: inline-flex; align-items: center; gap: 6px; }

/* An order's lines where a list shows them: how many, the piece, then its colour and size, which is what is checked. */
.xd-retail-lines { display: grid; gap: 4px; }
.xd-retail-line { display: grid; grid-template-columns: 2.25rem minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; gap: 2px 8px; }
.xd-retail-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.xd-retail-line .xd-retail-var { justify-self: start; font-weight: 600; }
@media (max-width: 29.99em) { .xd-retail-line { grid-template-columns: 2.25rem minmax(0, 1fr); } .xd-retail-line .xd-retail-var { grid-column: 2; } }

/* The fulfilment list: a heading for each stage, and under it one ruled entry for each order. */
.xd-retail-stage { display: grid; gap: 4px; }
:where(#main) .xd-retail-stage > h2 { padding-top: 12px; border-top: 2px solid var(--x-ink); font-size: 1.1875rem; }
.xd-retail-card { display: grid; gap: 8px; padding: 14px 0 16px; border-top: 1px solid var(--x-hair); }
.xd-retail-card:first-child { border-top: 0; }
.xd-retail-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 14px; }
.xd-retail-card-id { display: grid; gap: 2px; min-width: 0; }
.xd-retail-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xd-retail-card-tags .xd-mine { margin: 0; }
.xd-retail-card .xd-retail-lines { max-width: 40rem; }

/* One order, opened to be checked: the colour and the size of each line are what is read against the table, so they are set in ink. */
.xd-retail-check { color: var(--x-ink); font-weight: 600; }

/* One order: the steps an order received this way goes through, with the one it is at. Weight and a rule mark it, not colour. */
.xd-retail-more { --x-gap: 14px; }
.xd-retail-path { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--x-muted); }
/* The arrow is a box of its own inside the step's line, so the rule under the current step stops at its last letter. */
.xd-retail-step { display: block; }
.xd-retail-step:not(:last-child)::after { content: "\2192"; display: inline-block; margin-inline: 8px; color: var(--x-muted); font-weight: 400; }
.xd-retail-step--now { color: var(--x-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Under a record's buttons: the way to the page its customer sees, and to the record on a page of its own. */
.xd-retail-way { display: grid; justify-items: start; gap: 2px; }

/* The ranking: the span of days sits under the heading, close above the list it narrows. */
.xd-retail-rank > .x-filter { margin: 2px 0 4px; }

/* Products: a ruled entry for each, a small picture, and its colours against its sizes. */
.xd-retail-products-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 8px 40px; }
.xd-retail-product { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; min-width: 0; padding: 16px 0 12px; border-top: 2px solid var(--x-ink); }
.xd-retail-product-head { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.xd-retail-thumb { flex: none; width: 3.75rem; }
.xd-retail-thumb .x-img { width: 100%; }
.xd-retail-product-id { display: grid; gap: 2px; min-width: 0; }
:where(#main) .xd-retail-product-id h2 { font-size: 1.1875rem; }
.xd-retail-grid { position: relative; width: 100%; max-width: 27rem; border-collapse: collapse; font-size: .9375rem; }
.xd-retail-grid th, .xd-retail-grid td { padding: 7px 4px; border-top: 1px solid var(--x-hair); text-align: center; vertical-align: middle; }
.xd-retail-grid thead th { border-top: 0; color: var(--x-muted); font-size: .8125rem; font-weight: 600; }
.xd-retail-grid th:first-child { padding-inline-start: 0; text-align: start; font-weight: 500; }
.xd-retail-cell { min-width: 2.125rem; }
.xd-retail-cell[data-state="none"], .xd-retail-cell[data-state="ended"] { color: var(--x-muted); }
.xd-retail-cell .x-icon, .xd-retail-key .x-icon { vertical-align: middle; }
.xd-retail-out { display: inline-block; padding: 0 4px; border: 1px solid var(--x-warn); color: var(--x-warn); font-size: .75rem; font-weight: 700; line-height: 1.5; }
/* Where a row of five sizes has no room (a very narrow screen, or text set much larger) each colour takes a block of
   its own: its name, then each size with the shop's answer beside it. The column headings stay for a screen reader. */
@media (max-width: 20em) {
  .xd-retail-grid, .xd-retail-grid tbody, .xd-retail-grid th, .xd-retail-grid td { display: block; }
  .xd-retail-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .xd-retail-grid tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
  .xd-retail-grid tbody th, .xd-retail-grid td { padding: 0; border: 0; }
  .xd-retail-grid tbody th { flex: 0 0 100%; }
  .xd-retail-grid td.xd-retail-cell { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
  .xd-retail-cell[data-size]::before { content: attr(data-size); color: var(--x-muted); font-size: .8125rem; font-weight: 600; }
  .xd-retail-product-head { flex-wrap: wrap; }
}
.xd-retail-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.xd-retail-key { display: inline-flex; align-items: center; gap: 6px; }
.xd-retail-one-cols { display: grid; gap: 24px; align-items: start; }
.xd-retail-one-cols > * { min-width: 0; }
.xd-retail-one-media { max-width: 12rem; }
@media (min-width: 45em) { .xd-retail-one-cols { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 40px; } .xd-retail-one-media { max-width: none; } }
:where(#main) .xd-retail-one h2, :where(#main) .xd-retail-customer h2 { font-size: 1.1875rem; }
.xd-retail-one .xd-join, .xd-retail-customer .xd-join { padding-top: 14px; border-top: 2px solid var(--x-ink); }
.xd-retail-one .xd-join > .x-hint { max-width: 60ch; }

/* Customers: the list keeps to a readable measure, and a customer's own page reads as a record does. */
.xd-retail-people { max-width: 60rem; }
/* The units column says in its heading what it leaves out: that heading may take two lines, so the columns beside it keep their room. */
.xd-retail-people thead th:nth-child(3) { width: 11.5rem; white-space: normal; }

/* The pieces a customer asked to see, on an appointment: each on a ruled line, with where its sample is beside it. */
.xd-retail-interest { justify-items: stretch; }
.xd-retail-pieces { display: grid; }
.xd-retail-piece-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xd-retail-piece-main { display: grid; flex: 1 1 13rem; gap: 2px; min-width: 0; }
.xd-retail-piece-main .xd-retail-var { font-weight: 600; }
.xd-retail-piece-side { flex: none; }

/* The head of the showroom's box on the overview: a small picture of the room, the heading, what is coming up. */
.xd-retail-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xd-retail-head > div:last-child { display: grid; gap: 2px; min-width: 0; }
.xd-retail-head-pic { flex: none; width: 3.5rem; }
.xd-retail-head-pic .x-img { width: 100%; }
:where(#main) .xd-retail-head h2 { font-size: 1.1875rem; }

/* Under the chart: the way to the same orders as a list. */
.xd-retail-chart { --x-gap: 2px; }