/* Usage Summary (static/usage.js). Uses app.css's page template (.pg-head)
   and tokens; everything else here is scoped to .us-. */
/* a wide table: its pane isn't held to the shared 800px (as Harvest and New Entry) */
#tab-usage .vi { max-width: 1240px; }
.us-wrap { max-width: 1180px; padding-bottom: 100px; }
.us-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.us-filters { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 14px; }
.us-fg label { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 4px; font-weight: 600; }
.us-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; flex-wrap: wrap; }
.us-seg button { border: 0; background: var(--card); padding: 7px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.us-seg button + button { border-left: 1px solid var(--line); }
.us-seg button.on { background: var(--gm, #2f6b3a); color: #fff; font-weight: 700; }
.us-filters select, .us-filters input[type=date] { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); min-width: 140px; }
.us-range { font-size: 13px; color: var(--ink2); margin-left: auto; align-self: center; }
.us-custom { display: flex; gap: 8px; align-items: flex-end; }

.us-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.us-tile { padding: 12px 14px; }
.us-tile .v { font-size: 22px; font-weight: 700; color: #1f4a28; font-variant-numeric: tabular-nums; }
.us-tile .l { font-size: 13px; color: var(--ink2); }
.us-tile .us-tsub { font-size: 12px; color: var(--ink3); margin-top: 2px; }
.us-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); padding: 4px 2px 10px; }
.us-note { font-size: 12.5px; color: var(--ink2); margin: 0 2px 10px; }

.us-tbl { overflow: hidden; }
.us-thead, .us-row { display: grid; grid-template-columns: minmax(220px, 2.4fr) .55fr .9fr 1.1fr .9fr .9fr 24px; gap: 10px; align-items: center; padding: 10px 14px; }
.us-thead { font-size: 11.5px; font-weight: 700; color: var(--ink2); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); background: var(--head); }
.us-r { text-align: right; }
.us-grp { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #1f4a28; background: #f7f2e6; border-top: 1px solid var(--line); }
.us-grp span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink2); }
.us-row { border-top: 1px solid var(--line2); cursor: pointer; }
.us-row:hover { background: #fbf7ee; }
.us-pname { font-weight: 600; }
.us-sub { font-size: 12.5px; color: var(--ink2); }
.us-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.us-amt .us-more { font-weight: 600; font-size: 12.5px; color: var(--ink2); }
.us-num { font-variant-numeric: tabular-nums; }
.us-cost { color: #2f6b3a; font-weight: 600; font-variant-numeric: tabular-nums; }
.us-nocost { color: var(--ink3); font-size: 12.5px; }
.us-unitnote { color: #9a5b12; font-size: 12px; }
.us-flag { display: inline-block; font-size: 11px; border-radius: 999px; padding: 1px 7px; margin: 2px 0 0 5px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.us-flag.est { background: #fbefdc; color: #9a5b12; }
.us-flag.gal { background: #e6f0fa; color: #1f5f99; }
.us-flag.mrg { background: #e7f1e6; color: #1f4a28; }
.us-flag.strip { background: #eef0e2; color: #4f5a20; }
.us-flag.unit { background: #fde7e2; color: #a14a1c; }
.us-moa { display: inline-block; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 5px; color: var(--ink2); font-weight: 600; white-space: nowrap; }
.us-yoy { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.us-up { color: #a14a1c; }
.us-dn { color: #2f6b3a; }
.us-chev { color: var(--ink3); transition: transform .15s; text-align: center; }
.us-row.open .us-chev { transform: rotate(90deg); }
.us-meta { display: none; font-size: 12.5px; color: var(--ink2); }
.us-detail { display: none; padding: 4px 14px 14px 30px; background: #fbf7ee; border-top: 1px dashed var(--line); }
.us-detail.show { display: block; }
.us-detail table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.us-detail th { text-align: left; font-size: 11.5px; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.us-detail td { padding: 7px 6px; border-bottom: 1px solid #efe8d8; vertical-align: top; }
.us-detail .us-r { text-align: right; }
.us-detail .us-dn2 { font-size: 12.5px; color: var(--ink2); margin-top: 8px; line-height: 1.5; }
.us-retired { font-size: 11px; color: var(--ink3); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; margin-left: 4px; }
.us-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); font-weight: 700; background: var(--head); }
.us-empty { padding: 24px 14px; color: var(--ink2); }

.us-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.us-mini { padding: 12px 14px; }
.us-mini h3 { margin: 0 0 4px; font-size: 15px; }
.us-mini .s { font-size: 12.5px; color: var(--ink2); margin-bottom: 8px; }
.us-mini table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.us-mini td, .us-mini th { padding: 7px 4px; border-bottom: 1px solid #efe8d8; text-align: left; vertical-align: top; }
.us-mini th { font-size: 11.5px; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.us-mini .us-r { text-align: right; font-variant-numeric: tabular-nums; }
.us-run { display: inline-block; min-width: 18px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; text-align: center; padding: 0 4px; margin-right: 4px; }
.us-run.warn { background: #b4552f; }
.us-run.heads_up { background: #d08a1e; }
.us-how { margin-top: 14px; padding: 0 14px; }
.us-how summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: #1f4a28; }
.us-how ul { margin: 0 0 14px; padding-left: 20px; color: #3d463f; font-size: 14px; }
.us-how li { margin: 4px 0; }
.us-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 9px; padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.us-btn.pri { background: var(--gm, #2f6b3a); border-color: var(--gm, #2f6b3a); color: #fff; }
.us-link { color: #1f5f99; cursor: pointer; text-decoration: underline; }
.us-pwrap { position: relative; display: inline-block; }
.us-pmenu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); min-width: 220px; padding: 4px; }
.us-pmenu.open { display: block; }
.us-pmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 600; border-radius: 7px; cursor: pointer; color: var(--ink); }
.us-pmenu button:hover { background: #f4efe3; }
.us-pmenu small { display: block; font-weight: 400; font-size: 12px; color: var(--ink2); }

@media (max-width: 900px) {
  .us-tiles { grid-template-columns: repeat(2, 1fr); }
  .us-thead { display: none; }
  .us-row { grid-template-columns: 1fr auto 18px; grid-template-areas: "n a c" "m k c"; row-gap: 2px; padding: 10px 12px; }
  .us-row .c-name { grid-area: n; } .us-row .c-amt { grid-area: a; } .us-row .us-chev { grid-area: c; }
  .us-row .us-meta { grid-area: m; display: block; } .us-row .c-cost { grid-area: k; text-align: right; }
  .us-row .c-apps, .us-row .c-ac, .us-row .c-per { display: none; }
  .us-range { margin-left: 0; width: 100%; }
  .us-detail { padding-left: 12px; overflow-x: auto; }
  .us-two { grid-template-columns: 1fr; }
}
/* Charts (static/usage-charts.js; docs/plans/mocks/mock-usage-visuals.html). Their own
   palette, light by default and dark under [data-theme="dark"] (the grower app has
   no dark mode yet: this is ready for it). Each type's colour is fixed. */
.us-charts, #us-print {
  --us-surface: var(--card, #fffdf8); --us-ink: #1d2a1f; --us-ink2: #5b5a52; --us-ink3: #8a877c; --us-grid: #eee8dc; --us-soft: #e3efe5;
  --us-s0: #9a9890; --us-s1: #2a78d6; --us-s2: #eb6834; --us-s3: #1baf7a; --us-s4: #eda100; --us-s5: #e87ba4; --us-s6: #008300;
  --us-s7: #6250d6; --us-s8: #0e9aa7; --us-s9: #8a6d3b; --us-s10: #7a8b2c; --us-bar: #2a78d6; --us-stub: #d9d3c6;
}
:root[data-theme="dark"] .us-charts {
  --us-surface: #1a1a19; --us-ink: #f0efec; --us-ink2: #c3c2b7; --us-ink3: #8f8e86; --us-grid: #262624; --us-soft: #1f2a21;
  --us-s0: #6e6d66; --us-s1: #3987e5; --us-s2: #d95926; --us-s3: #199e70; --us-s4: #c98500; --us-s5: #d55181; --us-s6: #008300;
  --us-s7: #9085e9; --us-s8: #13a8b5; --us-s9: #b08e55; --us-s10: #9aab3e; --us-bar: #3987e5; --us-stub: #3a3a37;
}
.us-viewsw { margin: -2px 0 12px; }
.us-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.us-ccard { background: var(--us-surface); color: var(--us-ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 12px; min-width: 0; }
:root[data-theme="dark"] .us-ccard { border-color: #2c2d2a; }
.us-ccard h3 { margin: 0; font-size: 16px; }
.us-cnote { color: var(--us-ink2); font-size: 12.5px; margin: 2px 0 10px; }
.us-donut-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.us-donut { flex: 0 0 auto; }
.us-clegend { flex: 1 1 200px; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.us-clegend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 6px; border-radius: 6px; }
.us-clegend li.on, .us-clegend li:hover { background: var(--us-soft); }
.us-sw { width: 12px; height: 12px; border-radius: 3px; }
.us-cnum { font-variant-numeric: tabular-nums; text-align: right; }
.us-cmuted { color: var(--us-ink3); }
.us-ctable { flex: 1 0 100%; font-size: 13px; color: var(--us-ink2); }
.us-ctable summary { cursor: pointer; }
.us-ctable table { border-collapse: collapse; width: 100%; margin-top: 6px; }
.us-ctable td, .us-ctable th { padding: 4px 6px; border-bottom: 1px solid var(--us-grid); text-align: left; }
.us-ctable .us-cnum { text-align: right; }
.us-ckey { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--us-ink2); margin: -2px 0 8px; }
.us-ckey i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.us-bars { display: block; }
.us-bars text { font-size: 12.5px; }
.us-blab { fill: var(--us-ink); }
.us-bval { fill: var(--us-ink2); }
.us-bflag { fill: var(--us-ink); font-size: 12px; font-weight: 600; }
.us-bflag.us-bmulti { fill: var(--us-ink3); font-weight: 600; }
.us-bar:hover rect:first-child { fill: var(--us-soft); }
.us-cempty { color: var(--us-ink2); font-size: 13.5px; padding: 18px 4px; }
.us-cmore { font-size: 12.5px; margin-top: 6px; }
/* What you used, and what it cost (docs/plans/mocks/mock-usage-amount-cost.html): full width */
.us-cwide { grid-column: 1 / -1; }
.us-ahead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.us-aseg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.us-aseg button { border: 0; background: transparent; color: var(--us-ink); padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.us-aseg button + button { border-left: 1px solid var(--line); }
.us-aseg button.on { background: var(--gm, #2f6b3a); color: #fff; font-weight: 700; }
.us-acols, .us-arow { display: grid; grid-template-columns: minmax(0, 1.6fr) 120px minmax(0, 2fr); gap: 0 14px; align-items: center; }
.us-acols { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--us-ink3); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.us-agrp { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 12px 0 4px; border-bottom: 1px solid var(--us-grid); }
.us-agrp .us-sw { display: inline-block; width: 10px; height: 10px; margin-right: 7px; }
.us-agrp em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--us-ink2); }
.us-arow { border-bottom: 1px solid var(--us-grid); }
.us-arow > div { padding: 6px 0; }
.us-arow:hover { background: var(--us-soft); }
.us-aname { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-aname small, .us-aused small { display: block; color: var(--us-ink3); font-size: 12px; font-weight: 400; }
.us-aused { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; white-space: nowrap; }
.us-acell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.us-abar { height: 14px; min-width: 3px; border-radius: 0 4px 4px 0; flex: 0 0 auto; }
.us-astub { height: 14px; width: 4px; border-radius: 2px; background: var(--us-stub); flex: 0 0 auto; }
.us-acost { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.us-acost small { color: var(--us-ink3); }
.us-amore { margin: 12px 0 2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.us-amore button { border: 1px solid var(--line); background: var(--us-surface); color: var(--gm, #2f6b3a); font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.us-afoot { margin-top: 8px; }
@media (max-width: 640px) {
  .us-acols, .us-arow { grid-template-columns: minmax(0, 1fr) 92px; }
  .us-acols .us-ac3 { display: none; }
  .us-arow .us-acell { grid-column: 1 / -1; padding-top: 0; margin-top: -4px; }
}
.us-tip { position: fixed; pointer-events: none; background: #1d2a1f; color: #fffdf8; font-size: 13px; padding: 6px 9px; border-radius: 8px; opacity: 0; transition: opacity .08s; max-width: 260px; z-index: 3000; }
@media (max-width: 760px) { .us-charts { grid-template-columns: 1fr; } }

/* Print: Usage.print() (or the browser's Print on this tab) builds #us-print,
   a child of <body>, and sets body.us-printing: only that report prints, at
   full length, its table header on every page. */
#us-print { display: none; }
@media print {
  html, body.us-printing { height: auto !important; overflow: visible !important; background: #fff !important; }
  body.us-printing > *:not(#us-print) { display: none !important; }
  body.us-printing #us-print { display: block; color: #1d2b21; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 12mm 10mm; }
  .usp-head { margin-bottom: 8px; }
  .usp-t1 { font-size: 15pt; font-weight: 700; }
  .usp-t2 { font-size: 9pt; color: #5b6560; margin-top: 2px; }
  .usp-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
  /* fixed widths: the product column keeps its room (auto layout squeezed it to a sliver) */
  .usp-tbl th:nth-child(1) { width: 40%; } .usp-tbl th:nth-child(2) { width: 7%; } .usp-tbl th:nth-child(3) { width: 8%; }
  .usp-tbl th:nth-child(4) { width: 14%; } .usp-tbl th:nth-child(5) { width: 11%; } .usp-tbl th:nth-child(6) { width: 9%; }
  .usp-tbl th:nth-child(7) { width: 11%; }
  .usp-tbl td { overflow-wrap: anywhere; }
  .usp-tbl thead { display: table-header-group; }
  .usp-tbl tfoot { display: table-row-group; }
  .usp-tbl th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; color: #5b6560; border-bottom: 1.5px solid #999; padding: 4px; }
  .usp-tbl td { padding: 3px 4px; border-bottom: 1px solid #e5e0d4; vertical-align: top; }
  .usp-tbl .r { text-align: right; }
  .usp-tbl tr { break-inside: avoid; page-break-inside: avoid; }
  .usp-prod td { border-top: 1px solid #bbb; background: #f6f2e8; }
  /* only in the full report, to keep a product with its first block row: in the summary every row is a
     product row, and the chain of 'avoid' pushed the whole table off page 1 */
  #us-print.usp-full .usp-prod { break-after: avoid; page-break-after: avoid; }
  .usp-blk td:first-child { padding-left: 14px; }
  .usp-grp td { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 8.5pt; padding-top: 8px; color: #1f4a28; }
  .usp-grp { break-after: avoid; page-break-after: avoid; }
  .usp-grp span { font-weight: 600; text-transform: none; letter-spacing: 0; color: #5b6560; }
  .usp-sub { font-size: 8pt; color: #5b6560; font-weight: 400; }
  .usp-code { font-size: 8pt; color: #5b6560; border: 1px solid #ccc; border-radius: 3px; padding: 0 3px; font-weight: 600; }
  .usp-foot td { font-weight: 700; border-top: 1.5px solid #999; }
  #us-print .us-charts-print { grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
  #us-print .us-ccard { border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; break-inside: avoid; page-break-inside: avoid; background: #fff; }
  #us-print .us-ctable, #us-print .us-cmore { display: none; }
  /* the amount card lists every product: it may run onto the next page, a row never splits */
  #us-print .us-ccard.us-cwide { break-inside: auto; page-break-inside: auto; }
  #us-print .us-arow, #us-print .us-agrp { break-inside: avoid; page-break-inside: avoid; }
  #us-print .us-agrp { break-after: avoid; page-break-after: avoid; }
  #us-print .us-acols, #us-print .us-arow { grid-template-columns: minmax(0, 1.6fr) 100px minmax(0, 2fr); }
  #us-print .us-aname, #us-print .us-aused { font-size: 9pt; }
  #us-print .us-acost, #us-print .us-agrp, #us-print .us-acols { font-size: 8.5pt; }
  #us-print .us-arow > div { padding: 2px 0; }
  #us-print .us-abar, #us-print .us-astub { height: 9px; }
  #us-print .us-donut { width: 130px; height: 130px; }
  #us-print .us-ccard h3 { font-size: 11pt; }
  #us-print .us-cnote, #us-print .us-ckey { font-size: 8pt; margin-bottom: 4px; }
  #us-print .us-bars text { font-size: 10.5px; }
  #us-print.usp-summary .usp-tbl { break-before: auto; }
  #us-print .us-clegend li { font-size: 9pt; padding: 1px 4px; }
  .usp-cards { margin-top: 12px; }
  .usp-cards .us-mini { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; padding: 8px 10px; }
  .usp-cards table tr { break-inside: avoid; }
  #us-print .us-how { border: 0; padding: 0; margin-top: 10px; }
  #us-print .us-how summary { list-style: none; padding: 6px 0; }
}
.us-ccard .us-link { color: var(--us-s1); }