/* ── THE RICH TABLE, everywhere (Asa, 25 Sep 2026: "do rich design please" — the same look the Signals drills
   took from Canteens > Daily Order: small-caps headers, soft cream row rules, the figure that matters in a
   tinted column, categories as coloured chips and bands). Its own file, loaded after styles.css, because
   app.js and styles.css are edited by parallel sessions — this layer never touches them.

   SCREEN ONLY. Printed documents (run sheets, labels, invoices, place cards) keep their own print styles, and
   tables with a special job (the attendance grid, Digest, the run sheet) are left alone — the selector names
   what it restyles rather than reaching every table on the page. No coloured edge rails anywhere. */
@media screen {
  #view table.exp-table,
  #view table:not([class]) {
    border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 13px;
  }
  #view table.exp-table th,
  #view table:not([class]) th {
    background: #FBF9F4; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: #6F675D; padding: 7px 9px; border-bottom: 1px solid var(--line, #E1DCD7); white-space: nowrap;
  }
  #view table.exp-table td,
  #view table:not([class]) td {
    padding: 7px 9px; border-top: 1px solid #F3EEE8; border-bottom: 0; vertical-align: top;
  }
  #view table.exp-table tbody tr:first-child td,
  #view table:not([class]) tbody tr:first-child td { border-top: 0; }
  #view table.exp-table tbody tr:hover td,
  #view table:not([class]) tbody tr:hover td { background: #FCFAF6; }
  /* an open (expanded) row reads as open, by tint and weight — not by an edge stripe */
  #view table.exp-table tr.open td,
  #view table.exp-table tr.active td,
  #view table:not([class]) tr.open td { background: #F6F1E7; font-weight: 600; }
  /* the row a drill opens into sits on a tinted panel, its own content on white */
  #view tr.rich-drill > td { background: linear-gradient(180deg, #F6F1E7, #FBF8F2); }
  #view tr.rich-drill > td > * { background: #fff; border: 1px solid var(--line, #E1DCD7); border-radius: 12px; padding: 10px 12px; }

  /* category chips and bands (rich.js adds them from the menu's own colours) */
  .rich-cat { display: inline-flex; align-items: center; gap: 6px; background: var(--cb); color: var(--ct);
    border-radius: 999px; padding: 2px 10px 2px 3px; font-weight: 600; font-size: 12px; white-space: nowrap; }
  .rich-cat i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font-size: 9.5px; }
  #view tr.rich-band > td { background: var(--cb) !important; border-top: 0; }
  #view tr.rich-band > td:first-child { border-radius: 10px 0 0 10px; }
  #view tr.rich-band > td:last-child { border-radius: 0 10px 10px 0; }
  #view tr.rich-band b, #view tr.rich-band strong { color: var(--ct); }
  #view tr.rich-band + tr > td { border-top: 0; }
}