/* ============================================================================
   FTE TRACKER - the hero sequence.

   Four scenes carried by one piece of application chrome: an employee posts a
   day, a supervisor approves a pay period, the employee signs the quarterly
   certification, an auditor reads the record back to the hours it came from.

   This stylesheet is SELF-CONTAINED and scoped under .hero-flow. It does not
   import the application's stylesheets. Every value below is the application's
   own token value, taken from app-odoo/css/tokens.css and app-odoo/css/
   shell.css, mounted here as a --hf-* alias that PREFERS the site's live token
   when site.css is present (so the theme switch reaches it) and falls back to
   the literal value when it is not.

   Geometry follows design/odoo-2026/06-application.html; motion follows
   07-motion.html. The frame is drawn at a fixed design size and scaled to fit,
   which is how it holds its aspect ratio at 1440 and at 375 with no overflow
   and no layout shift.

   Vanilla CSS. No build step. Relative paths only.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS - light, then the two dark mountings.
   ------------------------------------------------------------------------ */
.hero-flow{
  /* type */
  --hf-font: var(--font-ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, Helvetica, Arial, sans-serif);
  --hf-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular,
              Menlo, Consolas, monospace);
  --hf-sign: Georgia, "Times New Roman", serif;
  --hf-fs: 13px;
  --hf-fs-sm: 12px;
  --hf-fs-xs: 11px;
  --hf-lh: 1.5;

  /* rhythm */
  --hf-r: var(--r, 4px);
  --hf-r-sm: var(--r-sm, 3px);
  --hf-r-lg: var(--r-lg, 6px);
  --hf-gutter: 14px;
  --hf-cell-y: 4px;
  --hf-cell-x: 5px;
  --hf-arrow: .85em;

  /* neutrals */
  --hf-g100: var(--g100, #f8f9fa);
  --hf-g200: var(--g200, #e9ecef);
  --hf-g300: var(--g300, #dee2e6);
  --hf-g400: var(--g400, #ced4da);
  --hf-bg: var(--bg, #f8f9fa);
  --hf-view: var(--view, #ffffff);
  --hf-ink: var(--ink, #212529);
  --hf-ink2: var(--ink-2, #4b545c);
  --hf-ink3: var(--ink-3, #6a7278);
  --hf-line: var(--line, #dee2e6);
  --hf-line-soft: var(--line-soft, #e9ecef);
  --hf-hover: var(--hover, rgba(0,0,0,.045));
  --hf-sel: var(--sel, #e7f4f6);
  --hf-field-line: var(--field-line, #868e94);
  --hf-focus: var(--focus, #1a73c7);
  --hf-shadow-1: var(--shadow-1, 0 1px 2px rgba(0,0,0,.06));
  --hf-shadow-2: var(--shadow-2, 0 6px 20px rgba(0,0,0,.14));

  /* semantic */
  --hf-ok: var(--ok, #0a6b2d);       --hf-ok-bg: var(--ok-bg, #e6f4ea);
  --hf-warn: var(--warn, #8a5d00);   --hf-warn-bg: var(--warn-bg, #fdf3dd);
  --hf-bad: var(--bad, #b3241f);     --hf-bad-bg: var(--bad-bg, #fbe9e7);
  --hf-info: var(--info, #0d6d8c);   --hf-info-bg: var(--info-bg, #e4f1f6);
  --hf-neutral: var(--neutral, #5b6570);
  --hf-neutral-bg: var(--neutral-bg, #eceff1);

  /* palette A - the fill green and the separate action colour */
  --hf-brand: var(--brand, #16603C);
  --hf-brand-dk: var(--brand-dk, #0f462b);
  --hf-brand-ink: var(--brand-ink, #ffffff);
  --hf-action: var(--action, #11627D);
  --hf-action-soft: var(--action-soft, #e3f0f4);
  --hf-action-ink: var(--action-ink, #ffffff);

  /* the app bar sits on the brand fill */
  --hf-nav-ink: rgba(255,255,255,.9);
  --hf-nav-ink-on: #ffffff;
  --hf-nav-hover: rgba(0,0,0,.08);
  --hf-nav-active: rgba(0,0,0,.16);
  --hf-nav-mark: rgba(255,255,255,.94);
  --hf-badge: #1f9d55;

  /* fund identity - code first, pattern second, colour third */
  --hf-f1: var(--f1, #a3376b); --hf-f1-bg: var(--f1-bg, #fbeaf1);
  --hf-f1-br: var(--f1-br, #eec4d6); --hf-f1-ink: var(--f1-ink, #8e2d5c);
  --hf-f2: var(--f2, #1d6fa5); --hf-f2-bg: var(--f2-bg, #e6f0f8);
  --hf-f2-br: var(--f2-br, #bcd8ea); --hf-f2-ink: var(--f2-ink, #155a8a);
  --hf-f3: var(--f3, #a8661a); --hf-f3-bg: var(--f3-bg, #fdf1e2);
  --hf-f3-br: var(--f3-br, #efd5b0); --hf-f3-ink: var(--f3-ink, #7c4a0f);
  --hf-f4: var(--f4, #6d4fae); --hf-f4-bg: var(--f4-bg, #efeaf9);
  --hf-f4-br: var(--f4-br, #d6cbee); --hf-f4-ink: var(--f4-ink, #5b3f96);
  --hf-lv: var(--lv, #5b6472); --hf-lv-bg: var(--lv-bg, #f0f2f4);
  --hf-lv-br: var(--lv-br, #d5dae0); --hf-lv-ink: var(--lv-ink, #4d5663);

  /* the swatch boundary, light */
  --hf-sw-br: rgba(0,0,0,.28);

  /* motion - the four curves, and nothing adds a fifth */
  --hf-e-out: cubic-bezier(.05,.7,.1,1);
  --hf-e-in: cubic-bezier(.3,0,.8,.15);
  --hf-e-std: cubic-bezier(.4,0,.2,1);
  --hf-e-meas: linear;

  /* the design size of the frame, and the scale JavaScript computes */
  --hf-dw: 680px;
  --hf-dh: 510px;
  --hf-k: 1;
  --hf-rail: 58px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-flow{
    --hf-g100: var(--g100, #15181a);
    --hf-g200: var(--g200, #1d2124);
    --hf-g300: var(--g300, #2c3236);
    --hf-g400: var(--g400, #3b4348);
    --hf-bg: var(--bg, #0f1214);
    --hf-view: var(--view, #191d20);
    --hf-ink: var(--ink, #e9edef);
    --hf-ink2: var(--ink-2, #aab4bb);
    --hf-ink3: var(--ink-3, #97a1a7);
    --hf-line: var(--line, #2c3236);
    --hf-line-soft: var(--line-soft, #232829);
    --hf-hover: var(--hover, rgba(255,255,255,.06));
    --hf-sel: var(--sel, #12333a);
    --hf-field-line: var(--field-line, #6b757b);
    --hf-focus: var(--focus, #62b0f0);
    --hf-shadow-1: var(--shadow-1, 0 1px 2px rgba(0,0,0,.5));
    --hf-shadow-2: var(--shadow-2, 0 10px 28px rgba(0,0,0,.6));
    --hf-ok: var(--ok, #5cc98a);      --hf-ok-bg: var(--ok-bg, #12291d);
    --hf-warn: var(--warn, #e0b45a);  --hf-warn-bg: var(--warn-bg, #2b2412);
    --hf-bad: var(--bad, #f08a80);    --hf-bad-bg: var(--bad-bg, #2e1a18);
    --hf-info: var(--info, #6ec4de);  --hf-info-bg: var(--info-bg, #11282f);
    --hf-neutral: var(--neutral, #9aa5ac);
    --hf-neutral-bg: var(--neutral-bg, #21262a);
    --hf-brand: var(--brand, #1b7a4d);
    --hf-brand-dk: var(--brand-dk, #125836);
    --hf-action: var(--action, #6ec4de);
    --hf-action-soft: var(--action-soft, #12282f);
    --hf-action-ink: var(--action-ink, #0f1214);
    --hf-f1: var(--f1, #e089ae); --hf-f1-bg: var(--f1-bg, #2f1522);
    --hf-f1-br: var(--f1-br, #4d2438); --hf-f1-ink: var(--f1-ink, #e089ae);
    --hf-f2: var(--f2, #6cb4e0); --hf-f2-bg: var(--f2-bg, #0f2434);
    --hf-f2-br: var(--f2-br, #1d3c53); --hf-f2-ink: var(--f2-ink, #6cb4e0);
    --hf-f3: var(--f3, #dda05a); --hf-f3-bg: var(--f3-bg, #2b1e0d);
    --hf-f3-br: var(--f3-br, #4b3618); --hf-f3-ink: var(--f3-ink, #dda05a);
    --hf-f4: var(--f4, #a794db); --hf-f4-bg: var(--f4-bg, #241d38);
    --hf-f4-br: var(--f4-br, #3b3057); --hf-f4-ink: var(--f4-ink, #a794db);
    --hf-lv: var(--lv, #8d98a6); --hf-lv-bg: var(--lv-bg, #1b2027);
    --hf-lv-br: var(--lv-br, #333b45); --hf-lv-ink: var(--lv-ink, #8d98a6);
    --hf-sw-br: rgba(255,255,255,.35);
  }
}

:root[data-theme="dark"] .hero-flow{
  --hf-g100: var(--g100, #15181a);
  --hf-g200: var(--g200, #1d2124);
  --hf-g300: var(--g300, #2c3236);
  --hf-g400: var(--g400, #3b4348);
  --hf-bg: var(--bg, #0f1214);
  --hf-view: var(--view, #191d20);
  --hf-ink: var(--ink, #e9edef);
  --hf-ink2: var(--ink-2, #aab4bb);
  --hf-ink3: var(--ink-3, #97a1a7);
  --hf-line: var(--line, #2c3236);
  --hf-line-soft: var(--line-soft, #232829);
  --hf-hover: var(--hover, rgba(255,255,255,.06));
  --hf-sel: var(--sel, #12333a);
  --hf-field-line: var(--field-line, #6b757b);
  --hf-focus: var(--focus, #62b0f0);
  --hf-shadow-1: var(--shadow-1, 0 1px 2px rgba(0,0,0,.5));
  --hf-shadow-2: var(--shadow-2, 0 10px 28px rgba(0,0,0,.6));
  --hf-ok: var(--ok, #5cc98a);      --hf-ok-bg: var(--ok-bg, #12291d);
  --hf-warn: var(--warn, #e0b45a);  --hf-warn-bg: var(--warn-bg, #2b2412);
  --hf-bad: var(--bad, #f08a80);    --hf-bad-bg: var(--bad-bg, #2e1a18);
  --hf-info: var(--info, #6ec4de);  --hf-info-bg: var(--info-bg, #11282f);
  --hf-neutral: var(--neutral, #9aa5ac);
  --hf-neutral-bg: var(--neutral-bg, #21262a);
  --hf-brand: var(--brand, #1b7a4d);
  --hf-brand-dk: var(--brand-dk, #125836);
  --hf-action: var(--action, #6ec4de);
  --hf-action-soft: var(--action-soft, #12282f);
  --hf-action-ink: var(--action-ink, #0f1214);
  --hf-f1: var(--f1, #e089ae); --hf-f1-bg: var(--f1-bg, #2f1522);
  --hf-f1-br: var(--f1-br, #4d2438); --hf-f1-ink: var(--f1-ink, #e089ae);
  --hf-f2: var(--f2, #6cb4e0); --hf-f2-bg: var(--f2-bg, #0f2434);
  --hf-f2-br: var(--f2-br, #1d3c53); --hf-f2-ink: var(--f2-ink, #6cb4e0);
  --hf-f3: var(--f3, #dda05a); --hf-f3-bg: var(--f3-bg, #2b1e0d);
  --hf-f3-br: var(--f3-br, #4b3618); --hf-f3-ink: var(--f3-ink, #dda05a);
  --hf-f4: var(--f4, #a794db); --hf-f4-bg: var(--f4-bg, #241d38);
  --hf-f4-br: var(--f4-br, #3b3057); --hf-f4-ink: var(--f4-ink, #a794db);
  --hf-lv: var(--lv, #8d98a6); --hf-lv-bg: var(--lv-bg, #1b2027);
  --hf-lv-br: var(--lv-br, #333b45); --hf-lv-ink: var(--lv-ink, #8d98a6);
  --hf-sw-br: rgba(255,255,255,.35);
}

/* ---------------------------------------------------------------------------
   2. THE MOUNT
   The aspect ratio is declared on the mount point itself, so the box is the
   right height before a single byte of JavaScript has run and the page cannot
   shift underneath the reader. JavaScript replaces it with an exact height on
   its first measurement.
   ------------------------------------------------------------------------ */
#hero-flow{
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 680 / 568;          /* frame 680x510 plus a 58px rail        */
}

.hero-flow{
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  font-family: var(--hf-font);
  color: var(--hf-ink);
  -webkit-font-smoothing: antialiased;
}
.hero-flow *, .hero-flow *::before, .hero-flow *::after{ box-sizing: border-box; }

.hf-view{
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hf-frame{
  position: absolute;
  top: 0; left: 0;
  width: var(--hf-dw);
  height: var(--hf-dh);
  transform-origin: 0 0;
  transform: scale(var(--hf-k));
  display: flex;
  flex-direction: column;
  background: var(--hf-view);
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-lg);
  box-shadow: var(--hf-shadow-2);
  overflow: hidden;
  font-size: var(--hf-fs);
  line-height: var(--hf-lh);
}

/* the sr-only summary, which is what a screen reader gets instead of a
   picture of an application */
.hf-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   3. THE APP BAR - shell.css section 1, reproduced
   ------------------------------------------------------------------------ */
.hf-nav{
  display: flex; align-items: center;
  height: 38px; flex: none;
  background: var(--hf-brand);
  color: var(--hf-nav-ink-on);
  border-bottom: 1px solid var(--hf-brand-dk);
}
.hf-nav .tile{
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 100%;
  font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  font-size: var(--hf-fs);
}
.hf-nav .tile .mark{
  width: 17px; height: 17px; border-radius: 4px;
  background: var(--hf-nav-mark);
  display: grid; place-items: center;
  color: var(--hf-brand); font-size: 8px; font-weight: 800; flex: none;
}
.hf-nav .secs{ display: flex; align-items: center; height: 100%; margin-left: 4px; }
.hf-nav .secs .s{
  display: flex; align-items: center; gap: 5px; height: 100%;
  padding: 0 9px;
  color: var(--hf-nav-ink);
  font-size: var(--hf-fs-sm); white-space: nowrap;
  transition: background 140ms var(--hf-e-out), color 140ms var(--hf-e-out);
}
.hf-nav .secs .s.on{ background: var(--hf-nav-active); color: var(--hf-nav-ink-on); }
.hf-nav .tray{
  display: flex; align-items: center; height: 100%;
  margin-left: auto; padding-right: 8px; flex: none;
}
.hf-nav .tray .it{
  position: relative; height: 100%; display: flex; align-items: center;
  padding: 0 8px; color: var(--hf-nav-ink);
}
.hf-nav .tray .badge{
  position: absolute; top: 6px; right: 1px;
  min-width: 11px; height: 11px; line-height: 11px; padding: 0 3px;
  border-radius: 6px; background: var(--hf-badge); color: #fff;
  font-size: 9px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.hf-nav .who{
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 5px; height: 100%;
  font-size: var(--hf-fs-sm); white-space: nowrap;
  color: var(--hf-nav-ink-on);
}

.hf-av{
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   4. SHARED ATOMS - shell.css section 10, reproduced
   ------------------------------------------------------------------------ */
.hf-i{
  width: 13px; height: 13px; flex: none; display: inline-block;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px;
}
.hf-i.sm{ width: 11px; height: 11px; }
.hf-i.lg{ width: 15px; height: 15px; }

.hf-pill{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--hf-fs-xs); font-weight: 600;
  padding: 0 7px; border-radius: 999px;
  border: 1px solid currentColor; line-height: 1.5; white-space: nowrap;
}
.hf-pill .mk{ flex: none; display: block; width: 7px; height: 7px; background: currentColor; }
.hf-pill .mk.sq{ border-radius: 1px; }
.hf-pill .mk.tri{
  background: none; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}
.hf-pill .mk.disc{ border-radius: 50%; }
.hf-pill .mk.bar{
  background: none; width: 8px; height: 7px;
  border-top: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
}
.hf-pill--ok{ color: var(--hf-ok); background: var(--hf-ok-bg); }
.hf-pill--warn{ color: var(--hf-warn); background: var(--hf-warn-bg); }
.hf-pill--bad{ color: var(--hf-bad); background: var(--hf-bad-bg); }
.hf-pill--info{ color: var(--hf-info); background: var(--hf-info-bg); }
.hf-pill--muted{ color: var(--hf-neutral); background: var(--hf-neutral-bg); }

.hf-fchip{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--hf-fs-xs); font-weight: 600;
  padding: 0 6px 0 4px; border-radius: var(--hf-r-sm);
  border: 1px solid currentColor; white-space: nowrap; line-height: 1.6;
}
.hf-fchip .cd{ font-weight: 700; letter-spacing: .03em; }
.hf-fchip.f1{ color: var(--hf-f1-ink); background: var(--hf-f1-bg); border-color: var(--hf-f1-br); }
.hf-fchip.f2{ color: var(--hf-f2-ink); background: var(--hf-f2-bg); border-color: var(--hf-f2-br); }
.hf-fchip.f3{ color: var(--hf-f3-ink); background: var(--hf-f3-bg); border-color: var(--hf-f3-br); }
.hf-fchip.f4{ color: var(--hf-f4-ink); background: var(--hf-f4-bg); border-color: var(--hf-f4-br); }
.hf-fchip.lv{ color: var(--hf-lv-ink); background: var(--hf-lv-bg); border-color: var(--hf-lv-br); }

.hf-sw{
  width: 12px; height: 12px; border-radius: 3px;
  display: inline-block; vertical-align: -2px; flex: none;
  border: 1px solid var(--hf-sw-br); background-clip: padding-box;
}
.hf-sw.sm{ width: 8px; height: 8px; border-radius: 2px; }
.hf-sw.p1{ background-color: var(--hf-f1); }
.hf-sw.p2{
  background-color: var(--hf-f2);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.88) 0 1.5px, transparent 1.5px 4px);
}
.hf-sw.p3{
  background-color: var(--hf-f3);
  background-image: radial-gradient(rgba(255,255,255,.92) .9px, transparent 1.1px);
  background-size: 4px 4px;
}
.hf-sw.p4{
  background-color: var(--hf-f4);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.88) 0 1.5px, transparent 1.5px 4px);
}
.hf-sw.plv{
  background-color: var(--hf-lv);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.92) 0 2px, transparent 2px 5px);
}

.hf-check{
  width: 12px; height: 12px; border: 1.5px solid var(--hf-field-line);
  border-radius: 3px; display: inline-grid; place-items: center;
  background: var(--hf-view); vertical-align: middle; flex: none;
  color: transparent;
  transition: background 120ms var(--hf-e-out), border-color 120ms var(--hf-e-out),
              color 120ms var(--hf-e-out);
}
.hf-check.on{
  background: var(--hf-action); border-color: var(--hf-action);
  color: var(--hf-action-ink);
}
.hf-check .hf-i{ width: 9px; height: 9px; stroke-width: 2.6; }

.hf-btn{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--hf-r);
  border: 1px solid var(--hf-g300); background: transparent;
  color: var(--hf-ink); font-size: var(--hf-fs-sm); font-weight: 500;
  white-space: nowrap; line-height: 1.5;
}
.hf-btn--primary{
  background: var(--hf-action); border-color: var(--hf-action);
  color: var(--hf-action-ink); font-weight: 600;
}
.hf-btn--brand{
  background: var(--hf-brand); border-color: var(--hf-brand);
  color: var(--hf-brand-ink); font-weight: 600;
}
.hf-mut{ color: var(--hf-ink2); }
.hf-num{ font-variant-numeric: tabular-nums; }

/* the press. 90 ms down, 120 ms back - the button acknowledges the press,
   not the page (07-motion 4.4) */
@keyframes hf-press{
  0%{ transform: translateY(0); filter: brightness(1); }
  38%{ transform: translateY(1px); filter: brightness(.9); }
  100%{ transform: translateY(0); filter: brightness(1); }
}
.hf-btn.is-press{ animation: hf-press 210ms var(--hf-e-std) both; }

/* ---------------------------------------------------------------------------
   5. THE CONTROL PANEL AND THE BREADCRUMB
   ------------------------------------------------------------------------ */
.hf-cp{
  flex: none;
  padding: 6px var(--hf-gutter);
  background: var(--hf-view);
  border-bottom: 1px solid var(--hf-line);
}
.hf-cp .row{ display: flex; align-items: center; gap: 10px; min-height: 30px; }
.hf-cp .row + .row{ margin-top: 5px; }
.hf-bc{ display: flex; flex-direction: column; min-width: 0; }
.hf-bc .trail{
  font-size: var(--hf-fs-xs); color: var(--hf-ink2);
  display: flex; align-items: center; gap: 5px;
}
.hf-bc .trail i{ opacity: .5; font-style: normal; }
.hf-bc .cur{ font-size: 15px; font-weight: 600; line-height: 1.3; }
.hf-sp{ flex: 1 1 auto; }

.hf-facet{
  display: inline-flex; align-items: center; border-radius: var(--hf-r-sm);
  border: 1px solid var(--hf-line); overflow: hidden;
  font-size: var(--hf-fs-xs); background: var(--hf-view);
}
.hf-facet .k{
  display: flex; align-items: center; padding: 1px 5px;
  background: var(--hf-action); color: var(--hf-action-ink);
}
.hf-facet .v{ padding: 1px 7px; color: var(--hf-ink); }

.hf-period{
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--hf-line); border-radius: var(--hf-r);
  padding: 2px 7px; font-size: var(--hf-fs-xs); color: var(--hf-ink2);
}
.hf-period b{ color: var(--hf-ink); }
.hf-pager{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--hf-fs-xs); color: var(--hf-ink2);
  font-variant-numeric: tabular-nums;
}
.hf-asof{ font-size: var(--hf-fs-xs); color: var(--hf-ink2); }
.hf-asof b{ color: var(--hf-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   6. THE LIST - views.css section 1, reproduced
   ------------------------------------------------------------------------ */
.hf-list{
  width: 100%; border-collapse: collapse;
  font-size: var(--hf-fs); background: var(--hf-view); color: var(--hf-ink);
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.hf-list thead th{
  background: var(--hf-bg); color: var(--hf-ink);
  text-align: left; font-weight: 600; font-size: var(--hf-fs-sm);
  padding: var(--hf-cell-y) var(--hf-cell-x);
  border-bottom: 1px solid var(--hf-line); white-space: nowrap;
}
.hf-list tbody td{
  padding: var(--hf-cell-y) var(--hf-cell-x);
  border-bottom: 1px solid var(--hf-line-soft);
  vertical-align: middle; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hf-list td.num, .hf-list th.num{ text-align: right; overflow: visible; }
.hf-list tr > *:first-child{ padding-left: var(--hf-gutter); }
.hf-list tr > *:last-child{ padding-right: var(--hf-gutter); }
.hf-list tfoot td{
  padding: var(--hf-cell-y) var(--hf-cell-x);
  font-weight: 700; border-top: 1px solid var(--hf-line);
  background: var(--hf-view); white-space: nowrap;
}
.hf-list tr.grp td{
  background: var(--hf-g100); font-weight: 600;
  border-bottom: 1px solid var(--hf-line);
}
.hf-list tr.sel td{ background: var(--hf-sel); }
.hf-list td.selcol{ width: 34px; padding-right: 0; }
.hf-list tr.act{ position: relative; }
.hf-list tr.actas td{ box-shadow: inset 3px 0 0 var(--hf-warn); }
.hf-list tr.sel td{ transition: background 140ms var(--hf-e-out); }

/* a row leaving the queue: 200 ms, the exit curve, and the row collapses so
   the queue visibly gets shorter (07-motion 4.2) */
.hf-list tr.is-gone td{
  padding-top: 0; padding-bottom: 0;
  border-bottom-color: transparent;
  opacity: 0; font-size: 0; line-height: 0;
  transition: padding 200ms var(--hf-e-in), opacity 140ms var(--hf-e-in),
              border-color 200ms var(--hf-e-in), font-size 200ms var(--hf-e-in),
              line-height 200ms var(--hf-e-in);
}
/* the row's own contents have fixed heights of their own - a checkbox, a
   chip, a pill - so they are collapsed too, or the emptied queue keeps a
   band of white where the work used to be */
.hf-list tr.is-gone td > *{
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 120ms var(--hf-e-in), max-height 200ms var(--hf-e-in);
}

/* a row arriving */
@keyframes hf-rowin{
  from{ opacity: 0; transform: translateY(5px); }
  to{ opacity: 1; transform: none; }
}
.hf-list tr.is-arrive{ animation: hf-rowin 180ms var(--hf-e-out) both; }

/* ---------------------------------------------------------------------------
   7. THE SELECTION BANNER AND THE TOAST
   ------------------------------------------------------------------------ */
.hf-selbar{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hf-action-soft);
  border: 1px solid var(--hf-action);
  border-radius: var(--hf-r);
  padding: 2px 4px 2px 9px;
  font-size: var(--hf-fs-sm);
  color: var(--hf-ink);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 140ms var(--hf-e-out), transform 140ms var(--hf-e-out);
}
.hf-selbar.is-on{ opacity: 1; transform: none; }
.hf-selbar .n{ font-weight: 600; font-variant-numeric: tabular-nums; }

/* The dock sits one row clear of the list's own totals. In the application a
   toast floats at the very bottom; here it would sit on top of the figure the
   approval just changed, which is the one thing a reader must be able to see
   move. A stated departure from 07-motion 4.2. */
.hf-toastdock{
  position: absolute; right: 12px; bottom: 46px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none;
}
.hf-toast{
  min-width: 250px;
  background: var(--hf-view); color: var(--hf-ink);
  border: 1px solid var(--hf-line); border-radius: var(--hf-r);
  box-shadow: var(--hf-shadow-2);
  font-size: var(--hf-fs-sm);
  overflow: hidden;
  opacity: 0; transform: translateY(6px);
}
.hf-toast .bd{ display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.hf-toast .bd .ck{ color: var(--hf-ok); display: flex; }
.hf-toast .bd .un{
  margin-left: auto; color: var(--hf-action); font-weight: 600;
  text-decoration: underline;
}
.hf-toast .clock{ height: 2px; background: var(--hf-line-soft); }
.hf-toast .clock i{ display: block; height: 100%; width: 100%; background: var(--hf-action); }
.hf-toast.is-on{
  animation: hf-toastin 140ms var(--hf-e-out) both;
}
.hf-toast.is-on .clock i{
  /* the undo bar is a clock, not a decoration: it runs at the rate of the
     real 8 s window, linearly. The scene leaves before it reaches zero. */
  animation: hf-undo 8000ms var(--hf-e-meas) both;
}
@keyframes hf-toastin{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}
@keyframes hf-undo{ from{ width: 100%; } to{ width: 0%; } }

/* ---------------------------------------------------------------------------
   8. THE SHEET, THE STATUS BAR AND THE CHEVRONS
   ------------------------------------------------------------------------ */
.hf-statusbar{
  display: flex; align-items: center; gap: 8px; flex: none;
  min-height: 30px; padding: 3px var(--hf-gutter);
  background: var(--hf-view); border-bottom: 1px solid var(--hf-line);
}
.hf-stages{ display: flex; margin-left: auto; }
.hf-stage{
  position: relative; display: flex; align-items: center; gap: 5px;
  padding: 3px calc(var(--hf-arrow) * 1.7);
  font-size: var(--hf-fs-xs); font-weight: 500; line-height: 1.5;
  color: var(--hf-ink2); background: var(--hf-g100);
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--hf-arrow)) 0, 100% 50%,
                     calc(100% - var(--hf-arrow)) 100%, 0 100%, var(--hf-arrow) 50%);
  margin-left: calc(-1 * var(--hf-arrow) - 2px);
  transition: background 140ms var(--hf-e-out), color 140ms var(--hf-e-out);
}
.hf-stage:first-child{
  clip-path: polygon(0 0, calc(100% - var(--hf-arrow)) 0, 100% 50%,
                     calc(100% - var(--hf-arrow)) 100%, 0 100%, 0 50%);
  padding-left: calc(var(--hf-arrow) * 1.25); margin-left: 0;
  border-top-left-radius: 2px; border-bottom-left-radius: 2px;
}
.hf-stage:last-child{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--hf-arrow) 50%);
  padding-right: calc(var(--hf-arrow) * 1.25);
  border-top-right-radius: 2px; border-bottom-right-radius: 2px;
}
.hf-stage.on{ background: var(--hf-action-soft); color: var(--hf-action); font-weight: 700; }
.hf-stage.done{ background: var(--hf-g200); color: var(--hf-ink); }
.hf-stage .dt{ font-size: 10px; font-weight: 400; opacity: .95; font-variant-numeric: tabular-nums; }
.hf-stage .ring{ width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid currentColor; flex: none; }
.hf-stage .disc{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.hf-sheetbg{
  flex: 1 1 auto; min-height: 0;
  background: var(--hf-bg);
  padding: 8px 10px;
  overflow: hidden;
}
.hf-sheet{
  background: var(--hf-view);
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r);
  box-shadow: var(--hf-shadow-1);
  padding: 10px 12px;
  height: 100%;
  overflow: hidden;
}
.hf-title .eyebrow{
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hf-ink2);
}
.hf-title h1{ font-size: 18px; font-weight: 650; margin: 2px 0 3px; line-height: 1.2; }
.hf-title .sub{ font-size: var(--hf-fs-xs); color: var(--hf-ink2); }

/* ---------------------------------------------------------------------------
   9. SCENE 1 - the day being divided
   ------------------------------------------------------------------------ */
.hf-alloc{ margin: 8px 0 7px; }
.hf-alloc .hd{
  display: flex; align-items: center; gap: 6px;
  font-size: var(--hf-fs-sm); margin-bottom: 5px;
}
.hf-alloc .hd b{ font-variant-numeric: tabular-nums; }
.hf-alloc .hd .left{
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--hf-fs-xs); font-weight: 600;
  padding: 0 7px; border-radius: var(--hf-r-sm); border: 1px solid currentColor;
  color: var(--hf-warn); background: var(--hf-warn-bg);
  transition: color 180ms var(--hf-e-std), background 180ms var(--hf-e-std);
}
.hf-alloc .hd .left.ok{ color: var(--hf-ok); background: var(--hf-ok-bg); }
.hf-alloc .bar{
  display: flex; height: 11px; border-radius: 2px; overflow: hidden;
  background: var(--hf-g200);
  border: 1px solid var(--hf-line);
}
.hf-alloc .bar i{
  display: block; height: 100%; width: 0;
  border: 0; border-radius: 0;
  /* a MEASURED length: linear, and it grows from zero on first placement */
  transition: width 340ms var(--hf-e-meas);
}
.hf-alloc .key{
  display: flex; gap: 12px; margin-top: 6px;
  font-size: var(--hf-fs-xs); color: var(--hf-ink2);
}
.hf-alloc .key span{ display: inline-flex; align-items: center; gap: 4px; opacity: 0; }
.hf-alloc .key span.on{ opacity: 1; transition: opacity 180ms var(--hf-e-out); }

.hf-lines{ width: 100%; border-collapse: collapse; font-size: var(--hf-fs); table-layout: fixed; }
.hf-lines th{
  text-align: left; font-size: var(--hf-fs-xs); font-weight: 600;
  color: var(--hf-ink2); padding: 4px 5px;
  border-bottom: 1px solid var(--hf-line); white-space: nowrap;
}
.hf-lines td{
  padding: 5px 5px; border-bottom: 1px solid var(--hf-line-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.hf-lines th.num, .hf-lines td.num{ text-align: right; }
.hf-lines tfoot td{ font-weight: 700; border-top: 1px solid var(--hf-line); border-bottom: 0; }
.hf-lines tr.ln{ opacity: 0; }
.hf-lines tr.ln.on{ animation: hf-rowin 200ms var(--hf-e-out) both; }
.hf-lines tr.addrow td{ color: var(--hf-action); font-size: var(--hf-fs-sm); border-bottom: 0; }
.hf-lines tfoot{ opacity: 0; transition: opacity 180ms var(--hf-e-out); }
.hf-lines tfoot.on{ opacity: 1; }
.hf-note{ font-size: 10px; color: var(--hf-ink2); margin-top: 5px; line-height: 1.45; }

/* ---------------------------------------------------------------------------
   10. SCENE 3 - the certification and the signature pair
   ------------------------------------------------------------------------ */
.hf-sum{ width: 100%; border-collapse: collapse; font-size: var(--hf-fs-sm); margin: 9px 0 10px; }
.hf-sum td, .hf-sum th{
  padding: 3px 5px; border-bottom: 1px solid var(--hf-line-soft);
  text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hf-sum th{ font-size: var(--hf-fs-xs); color: var(--hf-ink2); font-weight: 600; }
.hf-sum td.num, .hf-sum th.num{ text-align: right; }
.hf-sum tfoot td{ font-weight: 700; border-top: 1px solid var(--hf-line); border-bottom: 0; }

.hf-sigpair{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hf-sigcard{
  border: 1px solid var(--hf-line); border-radius: var(--hf-r);
  padding: 8px 10px 9px; background: var(--hf-bg); min-width: 0;
}
.hf-sigcard.mine{ border: 2px solid var(--hf-action); background: var(--hf-view); padding: 7px 9px 8px; }
.hf-sigcard .who{
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 650; color: var(--hf-ink2);
}
.hf-sigcard.mine .who{ color: var(--hf-action); }
.hf-sigcard .nm{ font-size: var(--hf-fs-sm); font-weight: 600; margin-top: 2px; }
.hf-sigcard .plate{
  min-height: 32px; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--hf-ink); margin: 4px 0 5px;
}
.hf-sigcard .plate.dash{ border-bottom: 1px dashed var(--hf-field-line); }
.hf-sigcard .plate .ph{ font-size: var(--hf-fs-xs); color: var(--hf-ink3); padding-bottom: 3px; }
.hf-sigcard .cursive{
  font-family: var(--hf-sign); font-style: italic; font-size: 21px;
  line-height: 1.25; color: var(--hf-ink);
}
.hf-sigcard .st{ font-size: 10px; color: var(--hf-ink2); line-height: 1.45; }
.hf-sigcard .st .ok{ color: var(--hf-ok); }

/* the signature moment - 900 ms in four beats (07-motion 4.4).
   The ink becomes present; it does not draw itself. */
.hf-sigcard .cursive.ink{ opacity: 0; }
.hf-sigcard .cursive.ink.is-signed{ animation: hf-ink 420ms var(--hf-e-out) 120ms both; }
@keyframes hf-ink{
  from{ opacity: 0; transform: translateY(3px) scale(.985); }
  to{ opacity: 1; transform: none; }
}
.hf-sigcard .st.meta{ opacity: 0; }
.hf-sigcard .st.meta.is-signed{ animation: hf-metain 200ms var(--hf-e-out) 620ms both; }
@keyframes hf-metain{ from{ opacity: 0; transform: translateY(2px); } to{ opacity: 1; transform: none; } }

.hf-methods{ display: flex; gap: 5px; margin: 5px 0 4px; }
.hf-methods .m{
  font-size: 10px; padding: 1px 6px; border-radius: var(--hf-r-sm);
  border: 1px solid var(--hf-g300); color: var(--hf-ink2);
}
.hf-methods .m.on{ border-color: var(--hf-action); color: var(--hf-action); font-weight: 600; }

.hf-cite{
  font-size: 10px; color: var(--hf-ink2); margin-top: 7px;
  display: flex; align-items: center; gap: 6px; white-space: normal;
}
.hf-cite .c{ margin-left: auto; font-family: var(--hf-mono); white-space: nowrap; }

/* The certification carries more on one sheet than any other screen in the
   product, so this one scene is drawn a notch tighter. Nothing is removed. */
.hf-sc[data-sc="3"] .hf-sheetbg{ padding: 6px 10px; }
.hf-sc[data-sc="3"] .hf-sheet{ padding: 8px 10px; }
.hf-sc[data-sc="3"] .hf-title h1{ font-size: 16px; margin-bottom: 2px; }
.hf-sc[data-sc="3"] .hf-sum{ margin: 6px 0 7px; font-size: var(--hf-fs-xs); }
.hf-sc[data-sc="3"] .hf-sum td, .hf-sc[data-sc="3"] .hf-sum th{ padding: 2px 5px; }
.hf-sc[data-sc="3"] .hf-sigcard{ padding: 6px 8px 7px; }
.hf-sc[data-sc="3"] .hf-sigcard.mine{ padding: 5px 7px 6px; }
.hf-sc[data-sc="3"] .hf-sigcard .plate{ min-height: 26px; margin: 3px 0 4px; }
.hf-sc[data-sc="3"] .hf-sigcard .cursive{ font-size: 19px; }
.hf-sc[data-sc="3"] .hf-sigcard .st{ line-height: 1.35; }
.hf-sc[data-sc="3"] .hf-methods{ margin: 4px 0 3px; }
.hf-sc[data-sc="3"] .hf-cite{ margin-top: 5px; }

/* ---------------------------------------------------------------------------
   11. SCENE 4 - the record being read
   ------------------------------------------------------------------------ */
.hf-prov{
  position: absolute; right: 10px; top: 118px; width: 252px; z-index: 5;
  background: var(--hf-view); border: 1px solid var(--hf-line);
  border-radius: var(--hf-r); box-shadow: var(--hf-shadow-2);
  padding: 10px 12px; font-size: var(--hf-fs-xs);
  opacity: 0; transform: translateX(10px);
}
.hf-prov.is-on{ animation: hf-provin 240ms var(--hf-e-out) both; }
@keyframes hf-provin{
  from{ opacity: 0; transform: translateX(10px); }
  to{ opacity: 1; transform: none; }
}
.hf-prov .hd{
  display: flex; align-items: center; gap: 6px;
  font-size: var(--hf-fs-sm); font-weight: 650; margin-bottom: 6px;
}
.hf-prov .hd .id{ margin-left: auto; font-family: var(--hf-mono); font-size: 10px; color: var(--hf-ink2); }
.hf-prov .ch{ display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; }
.hf-prov .ch .w{ color: var(--hf-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hf-prov .ch .e{ color: var(--hf-ink); }
.hf-prov .ft{
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--hf-line-soft);
  color: var(--hf-ink2); font-size: 10px; line-height: 1.45;
}
.hf-list tr.is-look td{
  background: var(--hf-sel);
  box-shadow: inset 0 0 0 2px var(--hf-focus);
  transition: background 140ms var(--hf-e-out);
}
.hf-list tr.actas.is-look td{ box-shadow: inset 0 0 0 2px var(--hf-focus), inset 3px 0 0 var(--hf-warn); }

/* ---------------------------------------------------------------------------
   12. THE SCENES AND THE HANDOVERS
   Each handover does one legible thing. None of them is a cross-fade.
   ------------------------------------------------------------------------ */
.hf-body{
  position: relative; flex: 1 1 auto; min-height: 0;
  background: var(--hf-view); overflow: hidden;
}
.hf-sc{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--hf-view);
  visibility: hidden; opacity: 0;
}
.hf-sc.is-on{ visibility: visible; opacity: 1; }
.hf-sc.is-in, .hf-sc.is-out{ visibility: visible; }
.hf-sc.is-in{ z-index: 3; }
.hf-sc.is-out{ z-index: 2; }

/* --- handover 1: the finished day is handed to the supervisor ---------- */
@keyframes hf-out1{
  from{ opacity: 1; transform: none; }
  to{ opacity: 0; transform: translateY(-16px) scale(.985); }
}
@keyframes hf-in1{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: none; }
}
[data-t="1"] .hf-sc.is-out{ animation: hf-out1 320ms var(--hf-e-in) both; }
[data-t="1"] .hf-sc.is-in{ animation: hf-in1 380ms var(--hf-e-out) 300ms both; }

/* the baton: the entry itself travelling from the sheet into the queue */
.hf-baton{
  position: absolute; left: 150px; top: 246px; z-index: 8;
  display: none; align-items: center; gap: 7px;
  background: var(--hf-view); border: 1px solid var(--hf-action);
  border-radius: var(--hf-r); box-shadow: var(--hf-shadow-2);
  padding: 5px 9px; font-size: var(--hf-fs-sm); white-space: nowrap;
  transform-origin: 0 50%;
}
[data-t="1"] .hf-baton{ display: flex; animation: hf-baton1 760ms var(--hf-e-std) 60ms both; }
@keyframes hf-baton1{
  0%{ opacity: 0; transform: translate(0,0) scale(.94); }
  16%{ opacity: 1; transform: translate(0,0) scale(1); }
  70%{ opacity: 1; transform: translate(-136px,-117px) scale(1); }
  92%{ opacity: 1; transform: translate(-140px,-123px) scale(.97); }
  100%{ opacity: 0; transform: translate(-140px,-124px) scale(.96); }
}
/* the row it lands on takes the selection fill as it arrives */
@keyframes hf-land{
  0%{ background: var(--hf-view); }
  40%{ background: var(--hf-sel); }
  100%{ background: var(--hf-view); }
}
[data-t="1"] .hf-sc[data-sc="2"] tr[data-row="1"] td{
  animation: hf-land 620ms var(--hf-e-std) 640ms both;
}

/* --- handover 2: the pay period becomes a quarterly report ------------- */
@keyframes hf-out2{
  from{ opacity: 1; transform: none; }
  to{ opacity: 0; transform: scaleY(.9) translateY(-8px); }
}
@keyframes hf-in2{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
[data-t="2"] .hf-sc.is-out{ transform-origin: 50% 40%; animation: hf-out2 340ms var(--hf-e-in) 120ms both; }
[data-t="2"] .hf-sc.is-in{ animation: hf-in2 260ms var(--hf-e-out) 420ms both; }

/* the paper: the approved period gathering itself into a sheet */
.hf-paper{
  position: absolute; z-index: 7; display: none;
  background: var(--hf-view); border: 1px solid var(--hf-line);
  border-radius: var(--hf-r); box-shadow: var(--hf-shadow-2);
}
[data-t="2"] .hf-paper{ display: block; animation: hf-paper2 620ms var(--hf-e-out) 100ms both; }
@keyframes hf-paper2{
  0%{ opacity: 0; left: 40%; right: 40%; top: 46%; bottom: 46%; }
  22%{ opacity: 1; left: 34%; right: 34%; top: 44%; bottom: 44%; }
  100%{ opacity: 1; left: 12px; right: 12px; top: 84px; bottom: 10px; }
}

/* --- handover 3: the signed record is sealed and opened by an auditor -- */
.hf-seal{
  position: absolute; z-index: 8; display: none;
  left: 330px; top: 290px;
  align-items: center; gap: 4px;
  font-size: var(--hf-fs-xs); font-weight: 600;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--hf-neutral); background: var(--hf-neutral-bg);
  white-space: nowrap;
}
[data-t="3"] .hf-seal{ display: flex; animation: hf-seal3 620ms var(--hf-e-std) both; }
@keyframes hf-seal3{
  0%{ opacity: 0; transform: translate(0,0) scale(.9); }
  18%{ opacity: 1; transform: translate(0,0) scale(1); }
  100%{ opacity: 0; transform: translate(276px,-282px) scale(.7); }
}
/* the wipe: a single brand rule travelling down the frame, the new view
   revealed exactly where it has passed */
.hf-wipe{
  position: absolute; left: 0; right: 0; z-index: 9; display: none;
  height: 2px; background: var(--hf-brand);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.12);
}
[data-t="3"] .hf-wipe{ display: block; animation: hf-wipe3 620ms var(--hf-e-std) 240ms both; }
@keyframes hf-wipe3{
  0%{ top: 0; opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ top: 100%; opacity: 0; }
}
[data-t="3"] .hf-sc.is-out{ animation: hf-in2 240ms var(--hf-e-in) 560ms both reverse; }
[data-t="3"] .hf-sc.is-in{
  animation: hf-reveal3 620ms var(--hf-e-std) 240ms both;
}
@keyframes hf-reveal3{
  from{ opacity: 1; clip-path: inset(0 0 100% 0); }
  to{ opacity: 1; clip-path: inset(0 0 0 0); }
}

/* --- handover 4: the quarter closes and the next one opens ------------- */
.hf-sweep{
  position: absolute; top: 0; bottom: 0; z-index: 9; display: none;
  width: 190px;
  background: linear-gradient(90deg,
              rgba(0,0,0,0) 0%, var(--hf-brand) 34%, var(--hf-brand) 100%);
  color: var(--hf-brand-ink);
  align-items: center; justify-content: flex-end;
  padding-right: 16px;
  font-size: var(--hf-fs-sm); font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
[data-t="4"] .hf-sweep{ display: flex; animation: hf-sweep4 880ms var(--hf-e-std) 120ms both; }
@keyframes hf-sweep4{
  from{ left: -200px; }
  to{ left: 100%; }
}
[data-t="4"] .hf-sc.is-out{
  animation: hf-close4 420ms var(--hf-e-in) both;
}
@keyframes hf-close4{
  from{ opacity: 1; transform: none; }
  to{ opacity: 0; transform: translateX(22px); }
}
[data-t="4"] .hf-sc.is-in{
  animation: hf-open4 640ms var(--hf-e-std) 280ms both;
}
@keyframes hf-open4{
  from{ opacity: 1; clip-path: inset(0 100% 0 0); }
  to{ opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------------------------------------------------------------------------
   13. THE RAIL - four steps, a progress track, and the control
   ------------------------------------------------------------------------ */
.hf-rail{
  height: var(--hf-rail);
  display: flex; align-items: flex-start; gap: 10px;
  padding-top: 12px;
  min-width: 0;
}
.hf-steps{
  display: flex; gap: 8px; flex: 1 1 auto; min-width: 0;
  list-style: none; margin: 0; padding: 0;
}
.hf-steps li{
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
/* the label wraps rather than truncates: a step whose name is cut in half
   is not a step anybody can read */
.hf-steps .lb{
  display: block;
  font-size: 12px; line-height: 1.3; color: var(--hf-ink3);
  white-space: normal;
  transition: color 180ms var(--hf-e-out);
}
.hf-steps .lb .n{
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11px;
  color: var(--hf-ink3); margin-right: 5px;
  transition: color 180ms var(--hf-e-out);
}
.hf-steps li.is-on .lb, .hf-steps li.is-on .lb .n{ color: var(--hf-ink); font-weight: 600; }
.hf-steps li.is-done .lb, .hf-steps li.is-done .lb .n{ color: var(--hf-ink2); }
.hf-steps .tk{
  display: block; height: 2px; background: var(--hf-line); border-radius: 2px;
  overflow: hidden;
}
.hf-steps .tk i{
  display: block; height: 100%; width: 0; background: var(--hf-action);
}
.hf-steps li.is-done .tk i{ width: 100%; background: var(--hf-ok); }
.hf-steps .ds{ display: none; font-size: 11.5px; color: var(--hf-ink2); line-height: 1.4; }
.hf-steps .tx-s{ display: none; }

.hf-ctl{
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--hf-line); border-radius: var(--hf-r);
  background: var(--hf-view); color: var(--hf-ink2);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 140ms var(--hf-e-out), color 140ms var(--hf-e-out);
}
.hf-ctl:hover{ background: var(--hf-g200); color: var(--hf-ink); }
.hf-ctl:focus-visible{ outline: 2px solid var(--hf-focus); outline-offset: 1px; }
.hf-ctl .gl{ width: 11px; height: 11px; flex: none; fill: currentColor; stroke: none; }
.hf-ctl .gl.play{ display: none; }
.hero-flow[data-playing="0"] .hf-ctl .gl.play{ display: block; }
.hero-flow[data-playing="0"] .hf-ctl .gl.pause{ display: none; }

/* ---------------------------------------------------------------------------
   14. THE NARROW FRAME
   Below 520px the frame is redrawn portrait, with the columns an auditor does
   not need on a phone removed - the application's own phone behaviour - so
   the type never has to be scaled below its real size to fit.
   ------------------------------------------------------------------------ */
@media (max-width: 520px){
  #hero-flow{ aspect-ratio: 372 / 666; }
  .hero-flow{ --hf-dw: 372px; --hf-dh: 570px; --hf-rail: 96px; --hf-gutter: 10px; }

  .hf-opt{ display: none !important; }
  /* a hidden cell still leaves its column reserved under table-layout:fixed,
     which is what would push the list off the side of a phone */
  .hf-frame col.hf-opt{ width: 0 !important; }

  /* the two lines that are a comfort on a laptop and a squeeze on a phone */
  .hf-sc[data-sc="1"] .hf-note{ display: none; }
  .hf-alloc .key{ display: none; }
  .hf-sc[data-sc="3"] .hf-title h1{ font-size: 15px; }
  .hf-sc[data-sc="3"] .hf-sum{ font-size: 10.5px; }
  .hf-sc[data-sc="3"] .hf-sigcard .plate{ min-height: 22px; }
  .hf-sc[data-sc="3"] .hf-sigcard .cursive{ font-size: 16px; }
  .hf-sc[data-sc="3"] .hf-sigcard .st{ font-size: 9px; line-height: 1.3; }
  .hf-sc[data-sc="3"] .hf-title .eyebrow{ display: none; }
  .hf-sc[data-sc="3"] .hf-sum td, .hf-sc[data-sc="3"] .hf-sum th{ padding: 1px 4px; }

  /* the columns a phone keeps, at phone widths. The colgroup above is drawn
     for the wide frame and would push the list off the side otherwise. */
  /* A hidden cell keeps its column slot, so the column it sits in has to be
     taken to zero by position. The widths that remain are written for the
     narrow frame; the colgroup in the markup is the wide one. */
  .hf-sc[data-sc="1"] .hf-lines col:nth-child(1){ width: 16px !important; }
  .hf-sc[data-sc="1"] .hf-lines col:nth-child(2){ width: 200px !important; }
  .hf-sc[data-sc="1"] .hf-lines col:nth-child(5){ width: 44px !important; }
  .hf-sc[data-sc="1"] .hf-lines col:nth-child(6){ width: 60px !important; }
  .hf-sc[data-sc="2"] .hf-list col:nth-child(1){ width: 24px !important; }
  .hf-sc[data-sc="2"] .hf-list col:nth-child(2){ width: 62px !important; }
  .hf-sc[data-sc="2"] .hf-list col:nth-child(3){ width: 150px !important; }
  .hf-sc[data-sc="2"] .hf-list col:nth-child(6){ width: 40px !important; }
  .hf-sc[data-sc="2"] .hf-list col:nth-child(7){ width: 68px !important; }
  .hf-sc[data-sc="4"] .hf-list col:nth-child(1){ width: 54px !important; }
  .hf-sc[data-sc="4"] .hf-list col:nth-child(2){ width: 170px !important; }
  .hf-sc[data-sc="4"] .hf-list col:nth-child(4){ width: 116px !important; }
  .hf-sc[data-sc="1"] .hf-lines col:nth-child(3),
  .hf-sc[data-sc="1"] .hf-lines col:nth-child(4),
  .hf-sc[data-sc="2"] .hf-list col:nth-child(4),
  .hf-sc[data-sc="2"] .hf-list col:nth-child(5),
  .hf-sc[data-sc="4"] .hf-list col:nth-child(3),
  .hf-sc[data-sc="4"] .hf-list col:nth-child(5),
  .hf-sc[data-sc="4"] .hf-list col:nth-child(6){ width: 0 !important; }

  /* the control panel gives its second line to the selection */
  .hf-cp .row{ flex-wrap: wrap; row-gap: 4px; }
  .hf-bc .trail{ display: none; }
  /* a long single-line footer cannot widen a fixed table, but it can still
     run off the side of it */
  .hf-list tfoot td{ white-space: normal; }
  .hf-nav .tile span{ display: none; }
  .hf-nav .secs .s .tx{ display: none; }
  .hf-nav .secs .s.on .tx{ display: inline; }
  .hf-nav .who .nm{ display: none; }
  .hf-bc .cur{ font-size: 14px; }
  .hf-title h1{ font-size: 16px; }
  .hf-sigpair{ grid-template-columns: 1fr; gap: 7px; }
  .hf-sigcard .plate{ min-height: 26px; }
  .hf-sigcard .cursive{ font-size: 18px; }
  .hf-stages{ flex-wrap: wrap; margin-left: 0; }
  .hf-statusbar{ flex-wrap: wrap; }
  .hf-prov{ right: 8px; left: 8px; width: auto; top: auto; bottom: 34px; }
  .hf-toastdock{ left: 8px; right: 8px; }
  .hf-toast{ min-width: 0; width: 100%; }

  .hf-rail{ flex-wrap: wrap; padding-top: 10px; }
  .hf-steps{ flex-wrap: wrap; gap: 6px 10px; flex-basis: 100%; }
  .hf-steps li{ flex: 1 1 44%; }
  .hf-steps .tx-l{ display: none; }
  .hf-steps .tx-s{ display: inline; }
  .hf-ctl{ margin-top: 2px; }
}

/* ---------------------------------------------------------------------------
   15. REDUCED MOTION
   Nothing runs. The sequence settles on its last and most complete frame -
   the auditor reading the finished record - and all four steps are readable
   at rest, as text, underneath it.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .hero-flow *, .hero-flow *::before, .hero-flow *::after{
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}
.hero-flow[data-reduced="1"] .hf-steps{ gap: 10px; }
.hero-flow[data-reduced="1"] .hf-steps .ds{ display: block; }
.hero-flow[data-reduced="1"] .hf-steps .lb,
.hero-flow[data-reduced="1"] .hf-steps .lb .n{ color: var(--hf-ink); white-space: normal; }
.hero-flow[data-reduced="1"] .hf-steps .tk{ display: none; }
.hero-flow[data-reduced="1"]{ --hf-rail: auto; }
.hero-flow[data-reduced="1"] .hf-rail{ align-items: flex-start; height: auto; }

/* while paused - by the reader, by the tab going away, or by the frame
   leaving the screen - every animation inside the frame holds its position */
.hero-flow[data-paused="1"] .hf-frame *,
.hero-flow[data-paused="1"] .hf-frame *::before,
.hero-flow[data-paused="1"] .hf-frame *::after{
  animation-play-state: paused !important;
}

/* ---------------------------------------------------------------------------
   16. PRINT
   ------------------------------------------------------------------------ */
@media print{
  .hero-flow .hf-ctl{ display: none; }
  .hero-flow{ break-inside: avoid; }
  .hf-frame{ box-shadow: none; }
}