/* Shared shell for every JB Tools page: top bar, sign-in panel and API-keys
   dialog (src/js/shell/shell.js). Self-contained: its own --ms-* tokens, so it
   looks the same on pages that don't load audit-theme.css (Check
   Presence). Theme follows html[data-theme] (set by theme-boot.js). */

/* Inter and JetBrains Mono, self-hosted (SIL OFL, see src/fonts/*-OFL.txt) so they load under the pages' font-src 'self'. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/src/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/src/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/src/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/src/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --ms-bg: #101511;
  --ms-panel: #161c17;
  --ms-card: #181f19;
  --ms-input: #121713;
  --ms-border: #29322a;
  --ms-border-hover: #3a463b;
  --ms-text: #e6ebe4;
  --ms-text-2: #c4ccc2;
  --ms-muted: #919d92;
  --ms-accent: #8fc49d;
  --ms-accent-2: #2dd4bf;
  --ms-accent-dim: #1f3326;
  --ms-accent-border: rgba(143,196,157,.4);
  --ms-on-accent: #0f1f15;
  --ms-danger: #fca5a5;
  --ms-danger-bg: rgba(248,113,113,.1);
  --ms-danger-border: rgba(248,113,113,.35);
  --ms-backdrop: rgba(4, 7, 5, .6);
  --ms-hover: #1c241d;
  --ms-control: #677568;
  --ms-accent-hover: #a8d5b4;
  --ms-warn: #e0a23b;
  --ms-warn-bg: rgba(224,162,59,.12);
  --ms-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --ms-side-w: 216px;
  --ms-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ms-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;
}
:root[data-theme="light"] {
  --ms-bg: #f8faf7;
  --ms-panel: #ffffff;
  --ms-card: #ffffff;
  --ms-input: #ffffff;
  --ms-hover: #f1f4ef;
  --ms-border: #dde3d9;
  --ms-border-hover: #aeb8ab;
  --ms-control: #8a9489;
  --ms-text: #202820;
  --ms-text-2: #3f4a41;
  --ms-muted: #5c685e;
  --ms-accent: #2f543b;
  --ms-accent-hover: #254530;
  --ms-accent-2: #0f766e;
  --ms-accent-dim: #e7eee3;
  --ms-accent-border: rgba(47,84,59,.4);
  --ms-on-accent: #ffffff;
  --ms-warn: #805b18;
  --ms-warn-bg: #faf4e8;
  --ms-danger: #b23b35;
  --ms-danger-bg: #fbefec;
  --ms-danger-border: #ecc5bf;
  --ms-backdrop: rgba(32, 40, 32, .3);
  --ms-shadow: 0 8px 24px rgba(32, 40, 32, .12);
}

.moz-header, .moz-modal, .moz-login-panel { font-family: var(--ms-sans); font-feature-settings: "cv11"; color: var(--ms-text); box-sizing: border-box; }
.moz-header *, .moz-modal *, .moz-login-panel * { box-sizing: border-box; }

/* ---- shared controls inside the shell ---- */
:is(.moz-header, .moz-modal, .moz-login-panel) .btn {
  font-family: var(--ms-sans); font-size: 13px; font-weight: 500; border-radius: 6px; padding: 8px 14px; min-height: 36px; cursor: pointer;
  border: 1px solid var(--ms-border); background: var(--ms-card); color: var(--ms-text);
  display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, filter .15s; line-height: 18px;
}
:is(.moz-header, .moz-modal, .moz-login-panel) .btn:hover { border-color: var(--ms-border-hover); }
:is(.moz-header, .moz-modal, .moz-login-panel) .btn:disabled { opacity: .45; cursor: not-allowed; }
:is(.moz-header, .moz-modal, .moz-login-panel) .btn-accent { background: var(--ms-accent); color: var(--ms-on-accent); border-color: var(--ms-accent); }
:is(.moz-header, .moz-modal, .moz-login-panel) .btn-accent:hover { background: var(--ms-accent-hover); border-color: var(--ms-accent-hover); }
:is(.moz-modal, .moz-login-panel) .field { display: flex; align-items: center; gap: 9px; background: var(--ms-input);
  border: 1px solid var(--ms-control, var(--ms-border)); border-radius: 6px; padding: 7px 12px; min-height: 36px; }
:is(.moz-modal, .moz-login-panel) .field:focus-within { border-color: var(--ms-accent); }
:is(.moz-modal, .moz-login-panel) .field input { background: none; border: none; outline: none; color: var(--ms-text);
  font-family: var(--ms-sans); font-size: 13px; line-height: 20px; width: 100%; padding: 0; min-width: 0; }
:is(.moz-modal, .moz-login-panel) .field input::placeholder { color: var(--ms-muted); }
:is(.moz-modal, .moz-login-panel) .panel-lbl { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; color: var(--ms-muted); margin-bottom: 8px; }
:is(.moz-modal, .moz-login-panel) .muted { color: var(--ms-muted); font-size: 13px; margin: 0 0 12px; }
:is(.moz-modal, .moz-login-panel) .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
:is(.moz-modal, .moz-login-panel) .row.end { justify-content: flex-end; }
:is(.moz-modal, .moz-login-panel) .link { background: none; border: none; color: var(--ms-muted); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; font-family: var(--ms-sans); }
:is(.moz-modal, .moz-login-panel) .link:hover { color: var(--ms-accent); }
:is(.moz-modal, .moz-login-panel) .err { background: var(--ms-danger-bg); border: 1px solid var(--ms-danger-border); color: var(--ms-danger);
  border-radius: 8px; padding: 9px 13px; font-size: 13px; display: none; }

/* ---- sidebar + workspace header ----
   >=1200px: 216px sidebar with labels. 768-1199px: 64px icon rail (names stay in the DOM for
   screen readers and show as tooltips). <768px: the sidebar is a drawer opened from the header. */
body.moz-has-shell { padding-left: var(--ms-side-w, 216px); }
.moz-side { position: fixed; inset: 0 auto 0 0; width: var(--ms-side-w, 216px); z-index: 30; background: var(--ms-panel); border-right: 1px solid var(--ms-border); }
.moz-side-in { height: 100%; display: flex; flex-direction: column; padding: 12px; overflow-y: auto; overflow-x: hidden; }
.moz-brand { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px; margin-bottom: 12px; color: var(--ms-text); text-decoration: none; font-weight: 600; font-size: 15px; flex-shrink: 0; border-radius: 6px; }
.moz-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ms-on-accent); background: var(--ms-accent); }
.moz-nav { display: flex; flex-direction: column; gap: 2px; }
.moz-tab, .moz-side-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ms-muted); font-family: var(--ms-sans); font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; text-align: left; cursor: pointer;
  transition: background-color .14s, color .14s; position: relative; }
.moz-tab:hover, .moz-side-btn:hover { background: var(--ms-hover); color: var(--ms-text); }
.moz-tab.active { background: var(--ms-accent-dim); color: var(--ms-text); font-weight: 600; }
.moz-tab svg, .moz-side-btn svg { flex: 0 0 16px; width: 16px; height: 16px; }
.moz-tab-label, .moz-side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moz-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ms-border); display: flex; flex-direction: column; gap: 2px; }
.moz-account { display: flex; flex-direction: column; gap: 2px; }
.moz-account:empty { display: none; }
.moz-keys-count { margin-left: auto; font-size: 12px; line-height: 18px; font-weight: 600; border-radius: 4px; padding: 0 6px; color: var(--ms-muted);
  background: var(--ms-hover); font-variant-numeric: tabular-nums; }
.moz-keys-count.on { color: var(--ms-accent); background: var(--ms-accent-dim); }
.moz-keys-count.warn { color: var(--ms-warn); background: var(--ms-warn-bg); }
.moz-avatar { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 600;
  color: var(--ms-accent); background: var(--ms-accent-dim); }
.moz-email { flex: 1; font-size: 13px; }
.moz-account-wrap { position: relative; }
.moz-menu { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 200px; width: 100%; z-index: 40; background: var(--ms-panel); border: 1px solid var(--ms-border);
  border-radius: 8px; box-shadow: var(--ms-shadow); padding: 6px; }
.moz-menu-head { padding: 6px 10px 8px; font-size: 12px; line-height: 18px; color: var(--ms-muted); border-bottom: 1px solid var(--ms-border); margin-bottom: 4px; overflow-wrap: anywhere; }
.moz-menu-head b { color: var(--ms-text); font-weight: 500; }
.moz-menu-item { display: flex; width: 100%; min-height: 34px; align-items: center; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ms-text);
  font-family: var(--ms-sans); font-size: 13px; text-align: left; cursor: pointer; }
.moz-menu-item:hover { background: var(--ms-hover); }
.moz-side :focus-visible, .moz-topbar :focus-visible, .moz-menu :focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

.moz-topbar { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: var(--ms-panel); border-bottom: 1px solid var(--ms-border); font-family: var(--ms-sans); color: var(--ms-text); box-sizing: border-box; }
.moz-topbar * { box-sizing: border-box; }
.moz-crumbs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ms-muted); white-space: nowrap; overflow: hidden; }
.moz-crumb-root { color: var(--ms-muted); text-decoration: none; flex-shrink: 0; }
a.moz-crumb-root:hover { color: var(--ms-text); }
.moz-crumb-ctx { display: contents; }
.moz-crumb { color: var(--ms-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.moz-crumb-sep { flex-shrink: 0; }
.moz-top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.moz-top-actions:empty { display: none; }
.moz-menu-btn { display: none; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--ms-text); cursor: pointer; }
.moz-menu-btn:hover { background: var(--ms-hover); }
.moz-menu-btn svg { width: 20px; height: 20px; }
.moz-scrim { position: fixed; inset: 0; z-index: 25; background: var(--ms-backdrop); }
.moz-scrim[hidden] { display: none; }

@media (min-width: 768px) and (max-width: 1199px) {
  body.moz-has-shell { --ms-side-w: 64px; }
  .moz-side-in { padding: 12px 10px; }
  .moz-brand { justify-content: center; padding: 0; }
  .moz-tab, .moz-side-btn { justify-content: center; padding: 0; min-height: 40px; }
  .moz-tab-label, .moz-side-label, .moz-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .moz-side-btn > svg:last-child:not(:first-child) { display: none; }
  .moz-keys-count { position: absolute; top: 1px; right: 0; font-size: 10px; line-height: 14px; padding: 0 3px; }
  .moz-menu { left: 0; width: 220px; }
  .moz-topbar { padding: 0 24px; }
}
@media (max-width: 767px) {
  body.moz-has-shell { padding-left: 0; }
  /* Closed, the drawer is off-screen and hidden from tab order and screen readers. */
  .moz-side { width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; box-shadow: var(--ms-shadow); }
  body.moz-nav-open .moz-side { transform: none; visibility: visible; transition: transform .16s ease; }
  .moz-tab, .moz-side-btn { min-height: 44px; }
  .moz-menu-btn { display: inline-flex; }
  .moz-topbar { padding: 0 8px 0 4px; gap: 6px; }
  .moz-top-actions .btn > span.lbl-wide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .moz-side, .moz-tab, .moz-side-btn { transition: none !important; } }

/* Shared reports use a plain top bar instead of the sidebar (src/js/share/share.js). */
.moz-header:not(.moz-side) { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--ms-border); background: var(--ms-panel); }
/* Sticky report tabs sit right under that bar (56px plus its border). */
body.share-mode { --shell-top: 57px; }
.moz-bar { margin: 0 auto; padding: 0 32px; max-width: var(--page-max, 1440px); min-height: 56px; display: flex; align-items: center; gap: 16px; }
.moz-bar .moz-brand { margin: 0; }
.moz-header:not(.moz-side) .moz-theme-btn { width: 36px; height: 36px; padding: 0 !important; justify-content: center; margin-left: auto; }
.moz-header:not(.moz-side) .moz-theme-btn svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .moz-bar { padding: 0 16px; } }

/* ---- sign-in panel ---- */
.moz-login-panel { max-width: 460px; background: var(--ms-panel); border: 1px solid var(--ms-border); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.moz-login-panel[hidden] { display: none; }
.moz-login-panel .login-form { display: grid; gap: 10px; }
.moz-login-panel .login-form .row { margin-top: 2px; }

/* ---- API keys dialog ---- */
.moz-modal { border: 1px solid var(--ms-border); border-radius: 10px; background: var(--ms-panel); color: var(--ms-text);
  padding: 22px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.moz-modal::backdrop { background: var(--ms-backdrop); backdrop-filter: blur(3px); }
.moz-modal .keys-form { display: grid; gap: 12px; }
.moz-modal .keys-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.moz-modal .keys-head .muted { margin: 0; }
.moz-modal .keys-field { display: grid; gap: 6px; }
.moz-modal .keys-label { font-size: 12px; font-weight: 500; color: var(--ms-text-2); }
.moz-modal .keys-state { color: var(--ms-accent); font-weight: 500; }
.moz-modal .keys-row { display: flex; gap: 10px; align-items: center; }
.moz-modal .keys-row .field { flex: 1; }

/* ---- shared reports (read-only links: src/js/share/share.js) ---- */
.share-tag { margin-left: 14px; font-size: 12px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.share-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--text); font-size: 13px; }
.share-banner strong { font-size: 15px; }
.share-banner span { color: var(--text-2); }
.share-error { max-width: 560px; margin: 40px auto; text-align: center; }
.share-error h1 { font-size: 20px; margin: 0 0 8px; }
/* Read-only: no sign-in, inputs or actions that need an account. */
body.share-mode #moz-login,
body.share-mode [data-share-hide],
body.share-mode #share-btn { display: none !important; }
body.share-loading main { visibility: hidden; }
body.share-loading::after { content: "Opening shared report…"; position: fixed; inset: 45% 0 auto; text-align: center; color: var(--text-muted); font-size: 14px; }

/* owner dialog */
.share-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; background: var(--bg-panel); color: var(--text); }
.share-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.share-dialog h2 { font-size: 17px; margin: 0 0 6px; }
.share-dialog h3 { font-size: 13px; margin: 18px 0 8px; color: var(--text-2); }
.share-close { position: absolute; top: 12px; right: 12px; margin: 0; }
.share-form { display: grid; gap: 10px; margin-top: 12px; }
.share-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.share-field input, .share-field select { width: 100%; }
.share-result { display: flex; gap: 8px; margin-top: 12px; }
.share-result input { flex: 1; min-width: 0; }
.share-err { color: var(--danger); font-size: 13px; margin: 10px 0 0; }
.share-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.share-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.share-link-main { flex: 1; min-width: 0; display: grid; }
.share-link-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-link.off, .share-link.expired { opacity: .6; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.share-dialog input[type="text"], .share-dialog select { width: 100%; background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; outline: none; }
.share-dialog input[type="text"]:focus, .share-dialog select:focus { border-color: var(--accent); }