/**
 * Lighthouse standalone shell (docs/STANDALONE-SPEC.md §4): the slim top bar, the screens shown before the dashboard,
 * the session banner and the Access dialog. Colours mirror the lh- tokens in lighthouse.css (light, and the dark set
 * when the OS prefers dark or <html data-lh-theme="dark">). Once the dashboard is on screen the shell pins
 * data-lh-theme="light" (the page has always been light) unless the URL asks for ?theme=dark.
 * Every selector is scoped to .lh-sh-* / #lh-shell* so nothing reaches into #wlf-lighthouse.
 */
:root {
  --sh-page: #f4f6fa; --sh-card: #ffffff; --sh-border: #d5dbe6; --sh-line: #e3e7ef;
  --sh-ink: #1e2a4a; --sh-muted: #4f5b76; --sh-faint: #5f6b85; --sh-control: #6b7590;
  --sh-primary: #0f1b3d; --sh-primary-hover: #24305a; --sh-primary-ink: #ffffff;
  --sh-hover: #eef1f6; --sh-chip: #e6ebf5; --sh-focus: #2f6fdb;
  --sh-err: #a8173a; --sh-err-bg: #fdecef; --sh-danger: #a8173a; --sh-danger-hover: #8c1230;
  --sh-bar: #0f1b3d; --sh-bar-ink: #cfd6e6; --sh-bar-line: rgba(255, 255, 255, .10);
  --sh-shadow: 0 4px 16px rgba(15, 27, 61, .12); --sh-scrim: rgba(15, 27, 61, .45);
  --sh-f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sh-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230f1b3d'/%3E%3Cpath d='M16 5.5 6 9.5v3l10-4 10 4v-3z' fill='%23f5c542' opacity='.55'/%3E%3Crect x='13.5' y='7' width='5' height='4' rx='1' fill='%23f5c542'/%3E%3Cpath d='M12.5 12h7l1.6 14h-10.2z' fill='%23ffffff'/%3E%3Crect x='11.5' y='11' width='9' height='2' rx='.6' fill='%23ffffff'/%3E%3Crect x='12.8' y='17' width='6.4' height='2' fill='%230f1b3d'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-lh-theme="light"]) {
    --sh-page: #0b1530; --sh-card: #15213f; --sh-border: #2e3d68; --sh-line: #26345c;
    --sh-ink: #e8ecf4; --sh-muted: #b3bdd1; --sh-faint: #8f9bb5; --sh-control: #7584a8;
    --sh-primary: #e8ecf4; --sh-primary-hover: #c9d1e3; --sh-primary-ink: #0b1530;
    --sh-hover: #1d2b4d; --sh-chip: #24345e; --sh-focus: #6ea0ff;
    --sh-err: #ff9ab0; --sh-err-bg: #3d1624; --sh-danger: #c24466; --sh-danger-hover: #a8375a;
    --sh-bar: #0b1530; --sh-bar-ink: #b3bdd1; --sh-bar-line: #26345c;
    --sh-shadow: 0 4px 16px rgba(0, 0, 0, .45); --sh-scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-lh-theme="dark"] {
  --sh-page: #0b1530; --sh-card: #15213f; --sh-border: #2e3d68; --sh-line: #26345c;
  --sh-ink: #e8ecf4; --sh-muted: #b3bdd1; --sh-faint: #8f9bb5; --sh-control: #7584a8;
  --sh-primary: #e8ecf4; --sh-primary-hover: #c9d1e3; --sh-primary-ink: #0b1530;
  --sh-hover: #1d2b4d; --sh-chip: #24345e; --sh-focus: #6ea0ff;
  --sh-err: #ff9ab0; --sh-err-bg: #3d1624; --sh-danger: #c24466; --sh-danger-hover: #a8375a;
  --sh-bar: #0b1530; --sh-bar-ink: #b3bdd1; --sh-bar-line: #26345c;
  --sh-shadow: 0 4px 16px rgba(0, 0, 0, .45); --sh-scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

html, body.lh-sh-body { margin: 0; padding: 0; }
body.lh-sh-body {
  min-height: 100vh; background: var(--sh-page); color: var(--sh-ink);
  font: 400 14px/20px var(--sh-f-sans); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
/* The bar plays the part WordPress's admin bar played: the dashboard's sticky rails already offset by this variable. */
body.lh-sh-mounted { --wp-admin--admin-bar--height: 48px; }
#lh-shell-screen[hidden], #lh-shell-app[hidden], .lh-sh-err[hidden], .lh-sh-dialog [hidden] { display: none !important; }

/* ---------- screens before the dashboard ---------- */
.lh-sh-screen {
  box-sizing: border-box; min-height: 100vh; min-height: 100dvh; padding: 24px 16px;
  display: flex; align-items: center; justify-content: center;
}
.lh-sh-card {
  box-sizing: border-box; width: 100%; max-width: 420px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--sh-card); color: var(--sh-ink); border: 1px solid var(--sh-border); border-radius: 12px; box-shadow: var(--sh-shadow);
}
.lh-sh-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lh-sh-mark { display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 7px; background: var(--sh-mark) center / contain no-repeat; }
.lh-sh-brand-text { display: flex; flex-direction: column; min-width: 0; }
.lh-sh-brand-name { font: 700 18px/24px var(--sh-f-sans); color: var(--sh-ink); }
.lh-sh-brand-sub { font-size: 12px; line-height: 16px; color: var(--sh-faint); }
.lh-sh-title { margin: 0; font: 600 20px/28px var(--sh-f-sans); color: var(--sh-ink); }
.lh-sh-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--sh-muted); overflow-wrap: anywhere; }
.lh-sh-lead { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--sh-ink); }
.lh-sh-muted { color: var(--sh-faint); }
.lh-sh-err { color: var(--sh-err); background: var(--sh-err-bg); border-radius: 8px; padding: 8px 12px; }
.lh-sh-status { display: flex; align-items: center; gap: 10px; }
.lh-sh-spin {
  display: inline-block; flex: none; width: 16px; height: 16px; box-sizing: border-box; margin-right: 10px;
  border: 2px solid var(--sh-line); border-top-color: var(--sh-ink); border-radius: 50%; animation: lh-sh-spin .8s linear infinite;
}
.lh-sh-status .lh-sh-spin { margin-right: 0; }
@keyframes lh-sh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lh-sh-spin { animation-duration: 2.4s; } }
.lh-sh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lh-sh-card .lh-sh-actions .lh-sh-btn { flex: 1 1 auto; min-height: 40px; }

/* ---------- buttons and inputs (the lh-btn look) ---------- */
.lh-sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: 36px; padding: 0 14px; margin: 0; border-radius: 8px; white-space: nowrap; cursor: pointer;
  font: 500 14px/20px var(--sh-f-sans); letter-spacing: normal; text-transform: none; text-decoration: none;
  background: var(--sh-card); color: var(--sh-ink); border: 1px solid var(--sh-control); box-shadow: none;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.lh-sh-btn:hover:not(:disabled) { background: var(--sh-hover); }
.lh-sh-btn:focus { outline: none; }
.lh-sh-btn:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 2px; }
.lh-sh-btn:disabled { opacity: .6; cursor: default; }
.lh-sh-primary { background: var(--sh-primary); color: var(--sh-primary-ink); border-color: var(--sh-primary); }
.lh-sh-primary:hover:not(:disabled) { background: var(--sh-primary-hover); border-color: var(--sh-primary-hover); }
.lh-sh-danger { background: var(--sh-danger); color: #ffffff; border-color: var(--sh-danger); }
.lh-sh-danger:hover:not(:disabled) { background: var(--sh-danger-hover); border-color: var(--sh-danger-hover); }
.lh-sh-input {
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 10px; margin: 0;
  font: 400 14px/20px var(--sh-f-sans); color: var(--sh-ink); background: var(--sh-card);
  border: 1px solid var(--sh-control); border-radius: 8px;
}
.lh-sh-input:focus { outline: none; }
.lh-sh-input:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 1px; }
.lh-sh-input:disabled { opacity: .6; }
.lh-sh-chip {
  display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--sh-chip); color: var(--sh-ink);
  font-size: 12px; line-height: 20px; font-weight: 600;
}

/* ---------- top bar ---------- */
.lh-sh-bar {
  position: sticky; top: 0; z-index: 60; box-sizing: border-box; height: 48px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--sh-bar); color: var(--sh-bar-ink); border-bottom: 1px solid var(--sh-bar-line);
  font: 400 14px/20px var(--sh-f-sans);
}
.lh-sh-bar-brand { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.lh-sh-bar .lh-sh-mark { width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.lh-sh-bar-name { color: #ffffff; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: .01em; }
.lh-sh-bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.lh-sh-bar-email { min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--sh-bar-ink); }
.lh-sh-bar .lh-sh-bar-btn { min-height: 32px; padding: 0 12px; background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .38); }
.lh-sh-bar .lh-sh-bar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.lh-sh-bar .lh-sh-bar-btn:focus-visible { outline-color: #9fc0ff; }
@media (max-width: 560px) {
  .lh-sh-bar { padding: 0 12px; gap: 8px; }
  .lh-sh-bar-email { display: none; }
}

/* ---------- session banner (guard) ---------- */
.lh-sh-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000; box-sizing: border-box; padding: 10px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
  background: #b91c1c; color: #ffffff; font: 600 14px/20px var(--sh-f-sans); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.lh-sh-banner .lh-sh-banner-btn { min-height: 32px; background: #ffffff; color: #b91c1c; border-color: #ffffff; font-weight: 700; }
.lh-sh-banner .lh-sh-banner-btn:hover:not(:disabled) { background: #fde8e8; }
.lh-sh-banner .lh-sh-banner-btn:focus-visible { outline-color: #ffffff; }

/* core script failed: shown inside #wlf-lighthouse */
.lh-sh-inline {
  box-sizing: border-box; max-width: 480px; margin: 48px auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 8px;
  font: 400 14px/20px var(--sh-f-sans); text-align: center; align-items: center;
}

/* ---------- Access dialog ---------- */
.lh-sh-dialog {
  box-sizing: border-box; width: min(720px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  margin: auto; padding: 20px 24px 24px; overflow: auto; overscroll-behavior: contain;
  background: var(--sh-card); color: var(--sh-ink); border: 1px solid var(--sh-border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 27, 61, .28); font: 400 14px/20px var(--sh-f-sans);
}
.lh-sh-dialog::backdrop { background: var(--sh-scrim); }
.lh-sh-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lh-sh-dialog-title { margin: 0; font: 600 18px/24px var(--sh-f-sans); color: var(--sh-ink); }
.lh-sh-icon-btn { width: 36px; padding: 0; font-size: 20px; line-height: 1; }
.lh-sh-acc-add {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: end;
  margin: 16px 0 8px;
}
.lh-sh-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lh-sh-field label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sh-muted); }
.lh-sh-acc-status { margin: 4px 0 8px; min-height: 20px; color: var(--sh-muted); overflow-wrap: anywhere; }
.lh-sh-acc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sh-line); }
.lh-sh-acc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who ctl" "meta ctl";
  gap: 2px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sh-line);
}
.lh-sh-acc-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.lh-sh-acc-email { font-weight: 600; color: var(--sh-ink); overflow-wrap: anywhere; }
.lh-sh-acc-name { color: var(--sh-muted); overflow-wrap: anywhere; }
.lh-sh-acc-meta { grid-area: meta; font-size: 12px; line-height: 16px; color: var(--sh-faint); overflow-wrap: anywhere; }
.lh-sh-acc-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.lh-sh-acc-ctl .lh-sh-acc-role { width: auto; min-width: 104px; }
.lh-sh-acc-q { font-weight: 600; overflow-wrap: anywhere; }
.lh-sh-acc-empty { padding: 16px 0; color: var(--sh-muted); }
@media (max-width: 640px) {
  .lh-sh-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
  .lh-sh-acc-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lh-sh-field-email, .lh-sh-field-go { grid-column: 1 / -1; }
  .lh-sh-field-go .lh-sh-btn { width: 100%; }
  .lh-sh-acc-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "meta" "ctl"; }
  .lh-sh-acc-ctl { justify-content: flex-start; margin-top: 6px; }
}

/* print: no bar or banner (data-lh-print on <html> is a feature flag the page always sets, not a print state) */
@media print {
  .lh-sh-bar, .lh-sh-banner { display: none !important; }
  body.lh-sh-mounted { --wp-admin--admin-bar--height: 0px; }
}