/* The desktop's panes and centre extras (increment L; MOCKUP.html:165-188).
 *
 * What is INSIDE the two <aside class="pane"> second mounts — the left
 * pane's month grid, "Planned today · N" and "Pending by customer", and the
 * right pane's Tray and context sections — and, since L step 2, the CENTRE's
 * desk sections (desk-centre.js): `Today · derived`, Close day inline and
 * "about earlier today". The three-pane grid itself is views.css's (the
 * shell is widened there; app.css is frozen).
 *
 * Since increment S the LEFT pane is also the side column of 720px to
 * 1099px (views.css; desktop-spec.js paneTier): its blocks, its month and
 * its two lists are drawn by the rules below at both widths, in whichever
 * type scale tokens.css gives that width. The right pane's rules and the
 * centre's are still the desk's alone — desktop.js mounts neither below
 * 1100px — and under 720px, and on a phone at any width, none of this is on
 * the page at all.
 *
 * Consumes tokens.css and restates nothing: no colour literal, no second
 * --touch. The month grid reuses calendar.css's own classes (mountMonth
 * draws the same component as the Calendar tab); the tray cards reuse
 * tray.css's. createElement and textContent fill all of it (CSP). */

/* ------------------------------------------------------------- the blocks */

/* One recipe for a desk block, in a pane or in the centre (L step 2). */
.pane__block,
.desk-block {
  margin: 0 0 var(--space-6);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The wireframe's h5s: small caps in the structural green, as the Settings
 * groups' labels are. An h3 under the page's h2, like every card title. */
.pane__title,
.desk-title {
  margin: 0 0 var(--space-2);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- the month (left) */

/* The pane's grid wears the tab's clothes one size down. The key is the
 * tab's to teach (the wireframe's desk pane draws none), and on a mouse the
 * cells drop to the drawn density — a touch desktop keeps the 44px row. */
.pane .cal__head {
  margin: 0 0 var(--space-1);
}

.pane .cal__title {
  margin: 0;
  font-size: var(--text-base);
}

.pane .cal__key {
  display: none;
}

@media (pointer: fine) {
  .pane .cal__day {
    min-height: 2.25rem;
    height: 2.25rem;
    font-size: var(--text-sm);
  }
}

/* -------------------------------------- planned and pending-by-customer */

.pane__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pane__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--text-md);
}

.pane__row:last-child {
  border-bottom: 0;
}

.pane__row--late {
  color: var(--warn-ink);
}

/* The wireframe's kv row: the name, then the count in orange. The count is
 * TEXT carrying the open number, so it wears --warn-ink (5.57:1 on white) —
 * tokens.css reserves --emphasis (2.52:1 in light mode) for a border or an
 * icon, never for words (fix round 1). The wireframe's orange reads the
 * same; only the shade deepens in the light. */
.pane__count {
  color: var(--warn-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pane__empty {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

.pane__more {
  margin: var(--space-1) 0 0;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* --------------------------------------------------- the tray (right) */

/* tray.css draws the cards; the pane only keeps them off its walls. The
 * sheet's copy caps its own height — here the PANE is the scrollport. */
.pane__tray .tray__list {
  max-height: none;
}

/* ------------------------------------------------- the context (right) */

/* The set page and the customer page come in whole (set-page.js,
 * party-page.js — the same drawers as #/entities). Their type scales down a
 * step so the 132fr column reads like the wireframe's pane. */
.pane__context {
  font-size: var(--text-base);
}

.pane__context .view__title,
.pane__context h3,
.pane__context h4 {
  font-size: var(--text-base);
}

.pane__context img {
  max-width: 100%;
  height: auto;
}

/* --------------------------- the centre's `Today · derived` (L step 2) */

/* MOCKUP:178: under the timeline, above Close day. The five tables share
 * the centre's width in columns that wrap as they need. */
.desk-derived {
  margin-top: var(--space-4);
}

.desk-derived__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3) var(--space-6);
  align-items: start;
}

/* The expense table spans the row: three columns need the room. */
.desk-cell[data-part="expenses"] {
  grid-column: 1 / -1;
}

.desk-cell__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
}

.desk-cell__lead {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.desk-cell__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.desk-cell__row {
  padding: calc(var(--space-1) / 2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.desk-cell__row:last-child {
  border-bottom: 0;
}

/* The counts a table cannot name: "1 more in a private entry" (the header
 * list's own wording), muted like it. */
.desk-cell__row--note {
  color: var(--ink-faint);
}

.desk-derived__empty {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--text-md);
}

/* PLAN-v2's "the expense table": what · paid from · amount, then the total. */
.desk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.desk-table td {
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.desk-table__source {
  color: var(--ink-muted);
}

.desk-table__amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.desk-table__total td {
  border-bottom: 0;
  font-weight: 700;
}

/* ------------------------------- Close day inline (L step 2, MOCKUP:179) */

/* D's own body, mounted by close-day.js: its sheet classes (day.css) carry
 * the sections; only the frame and the answer row are the desk's. The body
 * never scrolls inside itself here — the centre column is the scrollport. */
.desk-close .close__body {
  padding: 0;
  overflow-y: visible;
}

.desk-close .close__summary {
  padding-inline: 0;
}

.desk-close__answers {
  margin-top: var(--space-3);
}

.desk-close__answer {
  min-height: var(--touch);
}

/* --------------------- "about earlier today" (L step 2, PLAN-v2 §3.3) */

/* In the dock, above the compose row like everything that comes and goes
 * there: the offer, and — once asked — the time it asks for. */
.desk-earlier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.desk-earlier__btn {
  min-height: var(--touch);
  font-size: var(--text-md);
}

.desk-earlier__ask {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.desk-earlier__label {
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.desk-earlier__time {
  width: auto;
  min-height: var(--touch);
}

.desk-earlier__hint {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}