/* desk.css: page-specific styles for the operator desk. Use ex2.css components first. */

/* The desk is wide tables: a wider page, and each section's label above it rather than beside it */
body.desk { --max: 1400px; }
@media (min-width: 960px) {
  .desk .part { grid-template-columns: minmax(0, 1fr); }
  .desk .part > .part__side { flex-direction: row; align-items: baseline; flex-wrap: wrap; }
}
.desk .part__side .part__note { flex-basis: auto; }

.desk-links { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.875rem; }
.desk-links a { color: var(--muted); }
.desk-links a:hover { color: var(--ink); }
.desk-table__problem td:first-child { box-shadow: inset 2px 0 0 var(--loss); padding-left: 12px; }

/* On a phone a member is one row: who, their equity and their state. The rest is one tap away. */
@media (max-width: 640px) {
  .desk-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .desk-table td, .desk-table td.num, .desk-table td.cell-text { display: block; width: auto; text-align: left; padding: 0; }
  .desk-table td::before, .desk-table td.cell-text::before { content: none; }
  .desk-table td[data-label="Equity"] { grid-column: 2; grid-row: 1; text-align: right; font-weight: 500; }
  .desk-table td[data-label="State"] { grid-column: 1 / -1; }
  .desk-table td[data-label="Login"], .desk-table td[data-label="Today"], .desk-table td[data-label="Copied this month"],
  .desk-table td[data-label="Size"], .desk-table td[data-label="Updated"] { display: none; }
  .desk-table__problem td:first-child { box-shadow: none; padding-left: 0; }
}

.event-list { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums lining-nums; }
.event-list li { padding: 8px 0; border-top: 1px solid var(--hair); }
.event-list li:first-child { border-top: 0; padding-top: 0; }
/* an open alert reads like a problem row in the members table (audit E2) */
.alert-list__open a, .alert-list__open .alert-list__text { color: var(--loss); }

.desk-confirm { border-top: 1px solid var(--hair); padding-top: 12px; }
.desk-confirm .check { font-size: 0.8125rem; color: var(--muted); }

.missing-list { margin: 8px 0 0; padding-left: 1.2em; font-size: 0.875rem; }
.missing-list li + li { margin-top: 4px; }

.inline-form { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.inline-form input[type="text"] { min-height: 34px; padding: 4px 10px; font-size: 0.8125rem; min-width: 0; }
.inline-form .button { white-space: nowrap; }

/* the styleguide's swatches: a colour token and its name */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.swatch { font-size: 0.8125rem; color: var(--muted); }
.swatch::before { content: ""; display: block; height: 56px; border-radius: var(--r-small); margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--rule); }
.swatch--ground::before { background: var(--ground); }
.swatch--card::before { background: var(--card); }
.swatch--card-2::before { background: var(--card-2); }
.swatch--ink::before { background: var(--ink); }
.swatch--muted::before { background: var(--muted); }
.swatch--faint::before { background: var(--faint); }
.swatch--signal::before { background: var(--signal); }
.swatch--gain::before { background: var(--gain); }
.swatch--loss::before { background: var(--loss); }
.swatch--warn::before { background: var(--warn); }
.type-scale > * + * { margin-top: 20px; }