/* Client Usage (plans/platform-usage-plan.md Wave 2, CON-MTR-015..019).
   Linked from inside <main id="view-clientusage">; every rule is scoped to it.
   Tokens only (UI.md §2); no inline styles are set by platformusage.js — the
   sparkline's geometry is SVG attributes, not style.

   THE MONTH COLUMN IS TINTED ON PURPOSE. Widget spend is the one figure on the
   screen that is not for the week (it is month to date, because the widget's
   ceiling is monthly). A different period in an identical-looking column is a
   number somebody adds to the week's spend, so the column carries --warnbg in
   the header, the cells and the footer, and a dashed left edge. It is the only
   tint on the screen, which is what lets it be noticed. */

#view-clientusage .puhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-3)}
#view-clientusage .puhead p{max-width:80ch;margin:var(--s-1) 0 0}
#view-clientusage .puactions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-3);
  font-size:var(--text-sm)}
#view-clientusage .puactions label{display:flex;flex-direction:column;gap:var(--s-1)}
#view-clientusage select{font:inherit;font-size:var(--text-sm);padding:var(--s-1) var(--s-2);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--fg)}
#view-clientusage button{font:inherit;font-size:var(--text-sm);padding:var(--s-1) var(--s-3);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-border)}
#view-clientusage select:focus-visible,#view-clientusage button:focus-visible{
  outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}

#view-clientusage .puexportnote{max-width:80ch;margin:var(--s-2) 0 0}
#view-clientusage .pubad{color:var(--bad);border-left:3px solid var(--bad);padding:var(--s-1) var(--s-3);
  max-width:80ch}
#view-clientusage .puperiod{margin:var(--s-4) 0 var(--s-2);max-width:90ch}

#view-clientusage .puscroll{overflow-x:auto;max-width:100%}
#view-clientusage table{min-width:72rem}
#view-clientusage th,#view-clientusage td{vertical-align:top}
#view-clientusage .num{text-align:right;font-variant-numeric:tabular-nums}
#view-clientusage .pusub{display:block;font-size:var(--text-xs);color:var(--muted);
  font-weight:var(--weight-normal);text-transform:none;letter-spacing:normal}
#view-clientusage .pulist{list-style:none;margin:0;padding:0}
#view-clientusage .pulist li{white-space:nowrap}
#view-clientusage .pucomplete{min-width:16rem}
#view-clientusage td.pumonth{min-width:12rem}
#view-clientusage .pucomplete .pulist li{white-space:normal}
#view-clientusage .puwarn{color:var(--warn)}
#view-clientusage .pubadtext{display:block;color:var(--bad);font-size:var(--text-xs)}
#view-clientusage .puunknown{color:var(--muted);font-style:italic}
#view-clientusage .pufloor{color:var(--warn)}

/* The client is a control that asks for borrowed access, and nothing else. */
#view-clientusage .puclient{background:none;border:0;padding:0;color:var(--link);text-align:left;
  font-size:var(--text-sm);font-weight:var(--weight-bold);text-decoration:underline;cursor:pointer}
#view-clientusage .puclientcell{text-transform:none;letter-spacing:normal;color:var(--fg);
  font-size:var(--text-sm);min-width:10rem}
#view-clientusage .pustate{display:inline-block;margin-top:var(--s-1);font-size:var(--text-xs);
  padding:0 var(--s-2);border:1px solid var(--warn);border-radius:999px;color:var(--warn);background:var(--warnbg)}
#view-clientusage tr.pusupplied td{color:var(--muted)}

#view-clientusage .pumonth{background:var(--warnbg);border-left:1px dashed var(--warn)}
#view-clientusage .pumonthtag{color:var(--warn);font-weight:var(--weight-bold);text-transform:uppercase;
  font-size:var(--text-xs);letter-spacing:.05em;display:block}

#view-clientusage tfoot th,#view-clientusage tfoot td{border-top:2px solid var(--line);
  font-weight:var(--weight-bold);text-transform:none;letter-spacing:normal;color:var(--fg);
  font-size:var(--text-sm)}

/* One series, one hue: the accent. A zero week is a hairline, not a gap, so
   "nothing" and "not shown" do not look alike. */
#view-clientusage .puspark rect{fill:var(--accent)}
#view-clientusage .puspark rect.zero{fill:var(--line)}

#view-clientusage .pulegend{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-1) var(--s-4);
  margin:var(--s-4) 0;max-width:90ch;font-size:var(--text-sm)}
#view-clientusage .pulegend dt{font-weight:var(--weight-bold)}
#view-clientusage .pulegend dd{margin:0;color:var(--muted)}
#view-clientusage .pulegend dd b{color:var(--fg)}

#view-clientusage #putrend{min-width:0;width:auto}
#view-clientusage .putrendtotal th,#view-clientusage .putrendtotal td{font-weight:var(--weight-bold);
  border-top:2px solid var(--line)}

/* WHAT THEY USE — its own table rather than four more columns on a twelve-column
   one (index.html says why, CON-MTR-023). Narrower than the table above, because
   it carries no money and no month, so nothing here needs the month tint. */
#view-clientusage #puusetable{min-width:64rem}

/* A screen this console has no words for renders AS THE TOKEN metering sent
   (CON-MTR-023). Monospaced and muted so it reads as an id rather than as a
   clumsy translation: the reader can see at a glance which names are ours and
   which are a screen we have no word for yet. */
#view-clientusage .putoken{font-family:var(--mono);font-size:var(--text-xs);color:var(--fg)}

/* WENT QUIET (CON-MTR-024). No tint and no badge: it is a fact on a screen, not
   an alarm, and nothing here is emailed or alerted on. */
#view-clientusage #puquiet{min-width:38rem}
#view-clientusage #puquiet td,#view-clientusage #puquiet th{white-space:normal}
#view-clientusage .puqgap{display:block;font-size:var(--text-xs);max-width:40ch}
#view-clientusage #puquietempty,#view-clientusage #puquietnever{max-width:80ch}