/* Reports — page layout only: the grids unique to this page, the two chart drawings (receipts per hour, the week
   small multiples) and the export form's kind-dependent fields. Everything else is the kit. */
@layer page {
  /* Now: three racks on one bay scale, the two charts side by side */
  .rp-racks { display: grid; grid-template-columns: 2fr 2fr 1.1fr; gap: var(--s6); align-items: start; }
  .rp-charts { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: start; }


  /* Receipts per hour: stacked columns (--bar-h in px on the 150 px scale), tone from data-tone (--tone-fill) */
  .rp-cols { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; align-items: end; height: 190px; padding-bottom: 2px; border-bottom: 1px solid var(--line-2); }
  .rp-cols--x { height: auto; padding: 0; border: 0; font-size: var(--t-cap); color: var(--text-3); text-align: center; }
  .rp-col { display: grid; align-content: end; gap: 2px; height: 100%; text-align: center; }
  .rp-col__n { font-size: var(--t-cap); font-weight: 600; font-variant-numeric: tabular-nums; }
  .rp-col > i { display: block; height: calc(var(--bar-h, 0) * 1px); min-height: 3px; border-radius: 2px; background: var(--tone-fill, var(--accent)); }

  /* Weeks: small multiples, 8 columns each; the unfinished week (data-state=now) is drawn open, like an open pip */
  .rp-wk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
  .rp-wk__cap { display: grid; gap: 2px; min-height: 44px; }
  .rp-wk__plot { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; height: 132px; padding-top: 18px; border-bottom: 1px solid var(--line-2); }
  .rp-wk__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
  .rp-wk__col > i:not(.rp-wk__dot) { display: block; height: calc(var(--bar-h, 0) * 1px); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--tone-fill, var(--accent)); }
  .rp-wk__col[data-state="now"] > i:not(.rp-wk__dot) { background: transparent; box-shadow: inset 0 0 0 2px var(--tone-fill, var(--accent)); }
  .rp-wk__n { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: var(--t-micro); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rp-wk__plot[data-kind="dot"] .rp-wk__col { justify-content: flex-start; }
  .rp-wk__plot[data-kind="dot"] .rp-wk__n { top: auto; bottom: calc(var(--b, 0) * 1px + 14px); }
  .rp-wk__dot { position: absolute; left: 50%; bottom: calc(var(--b, 0) * 1px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); }
  .rp-wk__col[data-state="now"] .rp-wk__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
  .rp-wk__ax { position: absolute; left: 0; top: 18px; width: 100%; border-top: 1px solid var(--line-2); font-size: var(--t-micro); color: var(--text-3); pointer-events: none; }
  .rp-wk__ax[data-at="lo"] { top: auto; bottom: 0; border-top: 0; }
  .rp-wk__x { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; font-size: var(--t-micro); color: var(--text-3); text-align: center; }

  /* A sha256 checksum: breaks anywhere, never widens its column past 300 px */
  .rp-sum { display: inline-block; max-width: 300px; font-size: 12px; overflow-wrap: anywhere; white-space: normal; }

  /* Audit: the custom range shows only with "Custom range" */
  #r-aud:not(:has([name="win"][value="range"]:checked)) #arange { display: none; }

  /* Export form: the fields and the consequence each kind needs */
  #exp-form [data-exf], #exp-form [data-then], #exp-form [data-for] { display: none; }
  #exp-form:has([name="xk"][value="activity"]:checked) :is([data-exf="from"], [data-exf="to"]),
  #exp-form:has([name="xk"][value="stockat"]:checked) [data-exf="from"],
  #exp-form:has([name="xk"][value="trace"]:checked) [data-exf="subj"] { display: grid; }
  #exp-form:has([name="xk"][value="stockat"]:checked) [data-for="at"],
  #exp-form:not(:has([name="xk"][value="stockat"]:checked)) [data-for="from"] { display: inline; }
  #exp-form:has([name="xk"][value="stock"]:checked) [data-then="stock"], #exp-form:has([name="xk"][value="stockat"]:checked) [data-then="stockat"],
  #exp-form:has([name="xk"][value="activity"]:checked) [data-then="activity"], #exp-form:has([name="xk"][value="trace"]:checked) [data-then="trace"],
  #exp-form:has([name="xk"][value="weeks"]:checked) [data-then="weeks"] { display: inline; }

  @media (max-width: 1180px) { .rp-charts { grid-template-columns: minmax(0, 1fr); } .rp-wk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 900px) { .rp-racks { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 700px) { .rp-cols { gap: 3px; } .rp-cols:not(.rp-cols--x) { height: 150px; } .rp-wk { grid-template-columns: minmax(0, 1fr); } }
}