/* Scene: Staff and Volunteers › Hours & Payroll Export. One window, the club office's, at every width (the desktop
   window scaled to fit on narrow screens: no phone layout for this desk task). Over the page: the browser's note that a
   file was downloaded, and the file itself in a plain viewer of the demo's own. */
.hx-win { left: 26px; top: 20px; width: 848px; height: 500px; }
.hx-win .dv-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hx-who { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 5px;
  font: 600 8.5px/1 Geist, Arial, sans-serif; color: #4a463d; white-space: nowrap; }
.hx-who i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 6.5px; letter-spacing: .02em; color: #fff; }

.hx-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.hx-if { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.hx-loading .hx-page { visibility: hidden; }

/* The browser's download mark (left of whose window it is) and its note under the bar. */
.hx-dl { position: absolute; right: 136px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; display: grid; place-items: center;
  color: #1E7A45; background: #E7F3EC; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.hx-dl svg { width: 10px; height: 10px; }
.hx-dl.is-on { opacity: 1; transform: none; }
.hx-note { position: absolute; right: 120px; top: 36px; z-index: 3; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 9px 12px; min-width: 200px;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 28px rgba(27, 26, 23, .18), 0 0 0 1px rgba(27, 26, 23, .08);
  font: 500 8.5px/1.25 Geist, Arial, sans-serif; color: #6e6a60; opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s; }
.hx-note b { font-weight: 600; color: #1b1a17; font-size: 9px; }
.hx-note.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s; }

/* The file, opened: a plain table of its rows (cross-fades in over the page, 0.5 s). */
.hx-file { position: absolute; inset: 0; z-index: 2; background: #fbfaf7; padding: 18px 22px 14px; display: flex; flex-direction: column; gap: 10px;
  font-family: Geist, Arial, sans-serif; color: #1b1a17; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.hx-file.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.hx-file-head { display: flex; align-items: center; gap: 9px; }
.hx-file-head svg { width: 16px; height: 18px; flex: none; }
.hx-file-head b { display: block; font-size: 12.5px; font-weight: 600; }
.hx-file-head span { display: block; font-size: 9.5px; color: #6e6a60; margin-top: 2px; }
.hx-table { background: #fff; border: 1px solid #e6e1d5; border-radius: 6px; overflow: hidden; }
.hx-table table { width: 100%; border-collapse: collapse; font-size: 9.6px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hx-table th { text-align: left; font-weight: 600; color: #4a463d; background: #f4f2ec; padding: 6px 9px; border-bottom: 1px solid #e6e1d5; white-space: nowrap; }
.hx-table td { padding: 5.6px 9px; border-bottom: 1px solid #f1eee7; white-space: nowrap; }
.hx-table tr:last-child td { border-bottom: 0; }
.hx-table .n { text-align: right; }
.hx-table tr.hx-zara td { background: #FFF1C2; }
.hx-file.is-on tr.hx-zara td { animation: hx-wash 2.6s cubic-bezier(.2, .7, .2, 1) .4s both; }
@keyframes hx-wash { 0% { background: transparent; } 14% { background: #FFF1C2; } 100% { background: #FFF6D9; } }
.hx-more { margin: 0; font-size: 9px; color: #6e6a60; }

@media (prefers-reduced-motion: reduce) {
  .hx-dl, .hx-note, .hx-note.is-on, .hx-file, .hx-file.is-on { transition: none; }
  .hx-file.is-on tr.hx-zara td { animation: none; background: #FFF6D9; }
}