/* staff-view.css: the read-only "View as customer" bar, its disabled controls and its ended state (the plan of record
 * of 2 Oct 2026, section 8; assets/js/staff-view.js draws them). Loaded on /reports and /report.
 *
 * A violet the customer's page never uses (the dashboard's lavender is #c792ea / #7a4aa0; this is a deeper blue-violet),
 * so the bar cannot be mistaken for a state of their plan. A solid band, no edge stripe, sticky at the top. Dark is the
 * default (the site's and the report's own); light keys on html[data-home-theme="light"], as the rest of /reports does.
 * CSP: style-src 'self'. Every color is a class rule here; the one measured height (--lhsv-h) is set through element.style.
 * Nothing here applies on a customer's own page: every rule hangs off a class only a staff view adds.
 */
:root {
  --lhsv-bg: #4a2fb0; --lhsv-ink: #ffffff; --lhsv-ink-2: #e4ddff; --lhsv-exit-bg: #ffffff; --lhsv-exit-ink: #33208a;
  --lhsv-focus: #ffd75e; --lhsv-why: #b9a8ff; --lhsv-off-line: rgba(185, 168, 255, .55);
  --lhsv-ended-bg: #0d0b17; --lhsv-ended-card: #1b1631; --lhsv-ended-ink: #f3f0ff;
}
html[data-home-theme="light"] {
  --lhsv-bg: #e7e0ff; --lhsv-ink: #241465; --lhsv-ink-2: #3d2a8c; --lhsv-exit-bg: #4a2fb0; --lhsv-exit-ink: #ffffff;
  --lhsv-focus: #241465; --lhsv-why: #4a2fb0; --lhsv-off-line: rgba(74, 47, 176, .45);
  --lhsv-ended-bg: #f4f1ff; --lhsv-ended-card: #ffffff; --lhsv-ended-ink: #1d1050;
}

/* ── the bar ── */
.lhsv {
  position: sticky; top: 0; z-index: 2147483000; box-sizing: border-box; width: 100%;
  background: var(--lhsv-bg); color: var(--lhsv-ink);
  font: 500 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lhsv *, .lhsv *::before, .lhsv *::after { box-sizing: border-box; }
.lhsv-row { display: flex; align-items: center; gap: 16px; max-width: 1420px; margin: 0 auto; padding: 10px 24px; }
.lhsv-text { flex: 1 1 auto; min-width: 0; }
.lhsv-main, .lhsv-sub, .lhsv-time { margin: 0; }
.lhsv-main { color: var(--lhsv-ink); overflow-wrap: anywhere; }
.lhsv-k { font-weight: 700; letter-spacing: .01em; }
.lhsv-who { font-weight: 700; }
.lhsv-mail, .lhsv-ro { color: var(--lhsv-ink-2); }
.lhsv-sub { color: var(--lhsv-ink-2); font-size: 12.5px; margin-top: 2px; }
.lhsv-short { display: none; }
.lhsv-more { display: none; }
.lhsv-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.lhsv-exit {
  flex: 0 0 auto; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--lhsv-exit-bg); color: var(--lhsv-exit-ink); font: 700 14px/1.2 Inter, system-ui, sans-serif;
}
.lhsv-exit:hover { filter: brightness(.95); }
.lhsv-exit:focus-visible, .lhsv-more-s:focus-visible { outline: 3px solid var(--lhsv-focus); outline-offset: 2px; }
.lhsv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the dashboard's fixed header sits under the bar, never over it (the bar pushes the page down) */
html.lh-staffview .site-header { top: var(--lhsv-h, 56px); }
html.lh-staffview .mobile-menu { top: calc(var(--lhsv-h, 56px) + 64px); }
/* the cookie notice, where it sits under the header (from 901 px), moves down under the bar too */
@media (min-width: 901px) {
  html.lh-staffview .lhp-consent { top: calc(72px + var(--lhsv-h, 56px)); }
}
/* the report page: its rail and phone bar stick below the bar */
html.lh-staffview .railin { top: calc(var(--lhsv-h, 44px) + 24px); }
html.lh-staffview .rep-phonetop:not([hidden]) { top: var(--lhsv-h, 44px); }

/* the report page carries the same bar, smaller */
.lhsv-compact { font-size: 13px; }
.lhsv-compact .lhsv-row { padding: 7px 18px; gap: 12px; }
.lhsv-compact .lhsv-sub { display: none; }
.lhsv-compact .lhsv-exit { min-height: 34px; padding: 6px 12px; font-size: 13px; }

/* ── a phone: two lines and a full-width Exit, 44 px tall; the address and "opened by" move into Details ── */
@media (max-width: 640px) {
  .lhsv-row, .lhsv-compact .lhsv-row { flex-wrap: wrap; gap: 6px 12px; padding: 8px 16px 10px; }
  .lhsv-text { flex: 1 1 60%; }
  .lhsv-long, .lhsv-sub { display: none; }
  .lhsv-short { display: inline; }
  .lhsv-more { display: block; margin-top: 2px; font-size: 12.5px; color: var(--lhsv-ink-2); }
  .lhsv-more-s { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; width: max-content; }
  .lhsv-more-p { margin: 4px 0 0; overflow-wrap: anywhere; }
  .lhsv-time { align-self: flex-start; font-size: 13px; }
  .lhsv-exit, .lhsv-compact .lhsv-exit { flex: 1 1 100%; width: 100%; min-height: 44px; font-size: 15px; }
}

/* ── the disabled controls and their reasons ── */
html.lh-staffview .lhsv-off { opacity: .55; cursor: not-allowed; pointer-events: auto; }
html.lh-staffview a.lhsv-off { text-decoration: line-through; text-decoration-color: var(--lhsv-off-line); }
.lhsv-why {
  margin: 6px 0 0; padding: 0; font: 600 12.5px/1.35 Inter, system-ui, sans-serif; color: var(--lhsv-why);
  flex-basis: 100%;
}
.lhsv-why::before { content: "\25CF\00a0"; font-size: 9px; vertical-align: 2px; }

/* ── the print: a line on paper only ── */
.lhsv-print { display: none; }
@media print {
  .lhsv, .lhsv-ended { display: none !important; }
  html.lh-staffview .lhsv-print {
    display: block !important; margin: 0 0 10px; padding: 6px 0; border-bottom: 1px solid #000;
    font: 700 11pt/1.3 Inter, system-ui, sans-serif; color: #000; background: none;
  }
}

/* ── ended: the page is covered, never left readable under a bar that has gone ── */
.lhsv-ended {
  position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--lhsv-ended-bg); color: var(--lhsv-ended-ink);
}
.lhsv-ended-card {
  max-width: 460px; width: 100%; padding: 28px 24px; border-radius: 14px; background: var(--lhsv-ended-card);
  border-top: 0; text-align: left; font: 400 15px/1.5 Inter, system-ui, sans-serif;
}
.lhsv-ended-h { margin: 0 0 10px; font: 700 22px/1.2 Inter, system-ui, sans-serif; color: var(--lhsv-ended-ink); }
.lhsv-ended-p { margin: 0 0 18px; }
.lhsv-ended-go {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 8px;
  background: #4a2fb0; color: #ffffff; font-weight: 700; text-decoration: none;
}
.lhsv-ended-go[hidden] { display: none; }
.lhsv-ended-go:focus-visible { outline: 3px solid var(--lhsv-focus); outline-offset: 2px; }
html.lh-staffview-ended body { overflow: hidden; }