/* The Deals screen (D2 Task 19): the Desk's deal list and the Queue's table. Copied from Desk.dc.html (section.list) and Queue.dc.html, in
   the work colours Yanky approved on 06/11 (docs/mockups/2026-11-06-desk-color.html): each stage of a deal owns one colour, and it is the
   same everywhere on this screen: the dot of a segment or tab, the count beside it, the initials of a deal, its chip, and the ring of
   the chosen deal. Every colour is a token (tokens.css); this sheet holds no literal colour. It is linked by the served page (STYLESHEETS in src/web/routes-pages.js), after the page's
   own sheets. The screen is light; the side menu beside it is the shell's. */

/* ---- A stage's colour: set on an element, read by the parts inside it ------------------------------------------------------------------ */
.t-new { --tone-bg: var(--status-new-bg); --tone-mid: var(--status-new-mid); --tone-ink: var(--status-new-ink); }
.t-missing { --tone-bg: var(--status-missing-bg); --tone-mid: var(--status-missing-mid); --tone-ink: var(--status-missing-ink); }
.t-ready { --tone-bg: var(--status-ready-bg); --tone-mid: var(--status-ready-mid); --tone-ink: var(--status-ready-ink); }
.t-declined { --tone-bg: var(--status-declined-bg); --tone-mid: var(--status-declined-mid); --tone-ink: var(--status-declined-ink); }
.t-closed { --tone-bg: var(--info-bg); --tone-mid: var(--ink-4); --tone-ink: var(--info-ink); }

.dlDot { flex: none; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--tone-mid, var(--ink-4)); }
.dlCount, .qCount { padding: 0 7px; border-radius: var(--r-pill); background: var(--tone-bg, var(--info-bg)); color: var(--tone-ink, var(--info-ink)); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.dChip { margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tone-bg); color: var(--tone-ink); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.dAv { grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--tone-bg); color: var(--tone-ink); font: 600 12.5px var(--font-head); box-shadow: var(--sh-inset); }
.qAv { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-lg); background: var(--tone-bg); color: var(--tone-ink); font: 600 13px var(--font-head); box-shadow: var(--sh-inset); transition: transform var(--t-ui) var(--ease-pop); }
.dMuted { color: var(--ink-3); }

/* ---- The Desk's list column (Desk.dc.html section.list) ---------------------------------------------------------------------------------- */
.dealsCol { overflow: hidden; }   /* the list scrolls under its heading, not the heading with it */
.dlHead { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 12px; }
.dlTitle { display: flex; align-items: center; gap: 10px; }
.dlTitle h1 { flex: 1; font: 600 var(--fs-h1) var(--font-head); letter-spacing: -.01em; }
.btn.dlUpload { min-height: 36px; padding: 0 14px; border-radius: var(--r-md); font-size: 13px; }
.dlSearch, .qSearch { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-3); transition: border-color var(--t-ui), box-shadow var(--t-ui); }
.dlSearch:focus-within, .qSearch:focus-within { border-color: var(--brand-line); box-shadow: var(--sh-ring); }
.dlSearchInput, .qSearchInput { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 13.5px; }
.dlSearchInput::placeholder, .qSearchInput::placeholder { color: var(--ink-3); }
.dlNote { color: var(--ink-3); font-size: var(--fs-sm); }
.dlSegs .seg { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; font-family: inherit; }
.dlSegs .segOn { background: var(--surface); color: var(--ink); box-shadow: var(--sh-seg); }

/* The "Today" tiles, each in its stage's colour, and the mailbox line under the list (2026-11-06-desk-color.html .today and .inbox) */
.dlToday { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dlTile { display: grid; gap: 2px; padding: 11px 12px 12px; border-radius: var(--r-xl); background: var(--tone-bg); color: var(--tone-ink); }
.dlTileN { font: 600 24px var(--font-head); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dlTile span { font-size: var(--fs-xs); font-weight: 500; }
.dlSpeed { margin-top: -4px; color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dlInbox { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px 14px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: var(--fs-sm); }

.dlScroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.dlRows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dRow { margin: 0 10px; }
.deal { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--r-xl); color: var(--ink-2); text-decoration: none; cursor: pointer; transition: background var(--t-hover), box-shadow var(--t-ui), transform var(--t-ui) var(--ease-out); }
.deal:hover { background: var(--surface); box-shadow: var(--sh-ghost-hover); color: var(--ink-2); }
.dealOn, .dealOn:hover { background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1.5px var(--tone-mid); }
.dMain { display: flex; flex-direction: column; min-width: 0; }
.dTop { display: flex; align-items: baseline; gap: 8px; }
.dName { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dTime { color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dBroker { overflow: hidden; color: var(--ink-3); font-size: var(--fs-sm-2); white-space: nowrap; text-overflow: ellipsis; }
.dFoot { grid-column: 2; display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: var(--fs-sm-2); font-variant-numeric: tabular-nums; }
.dFoot b { color: var(--ink); font-weight: 600; }
.dlEmpty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 20px; color: var(--ink-3); }
.dlMore { display: flex; margin: 12px auto 4px; }

/* The Desk's pane: the deal file (deal.css) fills it; with no deal chosen the line stands in the middle */
.paneNote { margin: auto; padding: 28px; text-align: center; color: var(--ink-3); }

/* ---- The Queue below 1280px (Queue.dc.html) ---------------------------------------------------------------------------------------------- */
.dealsQueue { display: flex; flex-direction: column; gap: 20px; max-width: 1240px; margin: 0 auto; padding: 24px 24px 64px; }
.qHead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qTitle { display: flex; flex: 1 1 240px; flex-direction: column; gap: 2px; }
.qTitle h1 { font: 600 28px var(--font-head); letter-spacing: -.015em; }
.qSub { color: var(--ink-3); font-size: 13.5px; }
.qSearch { flex: 0 1 320px; height: 44px; padding: 0 12px; border-radius: var(--r-lg); }
.qTabs { display: flex; flex-wrap: wrap; gap: 8px; }
.qTabs .tab .qCount { font-size: var(--fs-sm-2); }
.qTabs .tabOn .qCount { background: color-mix(in srgb, var(--surface) 18%, transparent); color: var(--surface); }
.qCard { padding: 8px 8px 4px; }
.qScroll { overflow-x: auto; }
.qTable { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.qTable th { padding: 12px 8px; color: var(--ink-3); font-size: var(--fs-sm-2); font-weight: 500; text-align: left; }
.qTable th.num, .qTable td.num { text-align: right; }
.qTable .qBizHead { padding-left: 16px; }
.qRow { position: relative; border-top: 1px solid var(--line-soft); transition: background var(--t-hover); }
.qRow td { padding: 14px 8px; }
.qRow:hover { background: linear-gradient(90deg, var(--brand-soft), var(--surface-4)); }
.qBiz { padding-left: 16px; }
.qBizIn { display: flex; align-items: center; gap: 12px; }
.qName { min-width: 0; }
.qLink { color: var(--ink); font-weight: 600; text-decoration: none; }
.qLink:hover { color: var(--ink); }
.qLink::after { content: ""; position: absolute; inset: 0; }   /* the name's link covers its row */
.qLink:focus-visible { outline: none; }
.qLink:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-md); }
.qMeta { display: block; color: var(--ink-3); font-size: 13px; }
.qWhen { color: var(--ink-2); }
.qRev { font-weight: 600; }
.qArrow { padding-right: 16px; text-align: right; }
.qGo { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--r-lg); color: var(--ink-3); transition: transform var(--t-ui) var(--ease-out), color var(--t-ui), background var(--t-ui); }
.qMore { display: flex; justify-content: center; }
.qFoot { color: var(--ink-3); font-size: 13px; }

/* A hover that moves is for a person who has not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .deal:hover { transform: translateY(-1px); }
  .qRow:hover .qGo { transform: translateX(3px); color: var(--brand); background: var(--brand-soft); }
  .qRow:hover .qAv { transform: scale(1.08) rotate(-3deg); }
}