/* A firm's intake on its dashboard (src/examples/ex-dashboard-intake.js), beside the dashboard engine's own
   stylesheet: the sheet for the project or sample a request refers to, ruled like the title block of a drawing;
   the list of what a work queue refers to; the things a request still lacks; the links under a count.
   Every colour, the radius and the display face are the business's own (--x-* on main#main).
   Phone first; widths in em, as the kit's are. */

/* Three summary cards leave a gap in a grid of two: on a narrow screen the first takes the row whenever the count is odd. */
@media (max-width: 37.49em) { .xd-intake-over .xd-tiles > :first-child:nth-last-child(odd) { grid-column: 1 / -1; } }

/* With a reader's text size doubled on a phone, the heading breaks inside a word and a long flag takes a second line: neither pushes the page sideways. */
.xd-intake-over .xd-top h1 { overflow-wrap: anywhere; }
@media (max-width: 37.49em) { .xd-intake-over .xd-row-side .x-pill { white-space: normal; } }

/* A list's last column holds a record's status and, beside it, what stands in its way. As a table, the two part onto
   two lines and a long flag breaks between its words, so that column gives way before the table outgrows its page. */
@media (min-width: 37.5em) {
  .xd-intake-desk .xd-records td:last-child .x-td-v { display: flex; flex-wrap: wrap; gap: 6px; }
  .xd-intake-desk .xd-records .xd-flag { white-space: normal; }
}

/* ---- what a request refers to: photograph, code line, name, figures in ruled cells --------------------- */
.xd-intake-sheet, .xd-intake-need { display: grid; gap: 10px; min-width: 0; }
.xd-intake-item { display: grid; gap: 12px; min-width: 0; padding-top: 12px; border-top: 2px solid var(--x-ink); }
.xd-intake-item .xd-intake-pic { width: 100%; max-width: 15rem; border-radius: var(--x-radius, 8px); }
.xd-intake-block { display: grid; align-content: start; gap: 4px; min-width: 0; }
.xd-intake-name { font-family: var(--x-display, var(--x-text)); font-size: 1.125rem; font-weight: var(--x-display-weight, 600); line-height: var(--x-lh-head); }
:lang(th) .xd-intake-name { font-weight: var(--x-th-display-weight, 600); }
.xd-intake-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; border-top: 1px solid var(--x-hair); }
.xd-intake-cell { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--x-hair); }
.xd-intake-cell dt { color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xd-intake-cell dd { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 30em) { .xd-intake-item { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; } }

/* ---- beside the work queue: each thing referred to, with the records that name it ---------------------- */
.xd-intake-refs { display: grid; }
.xd-intake-ref { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--x-hair); }
.xd-intake-ref:first-child { padding-top: 2px; border-top: 0; }
.xd-intake-ref .xd-intake-thumb { width: 4rem; border-radius: var(--x-radius, 8px); }
.xd-intake-refmain { display: grid; gap: 2px; min-width: 0; }
.xd-intake-ref .xd-intake-name { font-size: 1rem; }
.xd-intake-by { display: grid; gap: 2px; margin-top: 4px; }
.xd-intake-by li { min-width: 0; }

/* ---- what a request still lacks: a state, what it is, what would settle it ----------------------------- */
.xd-intake-need { padding: 14px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface-2); }
.xd-intake-needs { display: grid; }
.xd-intake-n { display: grid; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xd-intake-n:first-child { border-top: 0; }
.xd-intake-n-t { display: grid; gap: 2px; min-width: 0; }
.xd-intake-n-l { font-weight: 600; }
.xd-intake-need .x-hint { color: var(--x-ink); }
@media (min-width: 30em) { .xd-intake-n { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; } }

/* ---- under a count: one link for each kind of record it is made of ------------------------------------- */
.xd-intake-parts { display: flex; flex-wrap: wrap; gap: 0 18px; }
/* Where the links wrap, each line is a full touch target of its own: no link's pressable area reaches over the line above or below. */
.xd-intake-parts .x-link { margin-block: 0; padding-block: 10px; }