/* Honey Creek Disposal — the HELP button and overlay (shared/hcd-help-view.js).
   Loaded by all twelve apps. Uses the brand tokens where the app defines them, with fallbacks for
   the apps whose own stylesheet doesn't. No inline styles anywhere in the markup: /admin/*'s CSP
   has style-src 'self' with no 'unsafe-inline'. */

/* The HELP button. Field app headers are brand blue, so it reads as a light outlined pill there;
   in the console nav it takes the nav's sticker look (.console-nav .hcd-help-btn below). */
button.hcd-help-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 13px;
  background:rgba(255,255,255,.14); color:#fff;
  border:2px solid rgba(255,255,255,.75); border-radius:999px;
  font:800 12px var(--font-display, 'Archivo', 'Arial Narrow', system-ui, sans-serif);
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
}
button.hcd-help-btn:focus-visible { outline:3px solid var(--yellow-400, #fff200); outline-offset:2px; }

html.hcd-help-open, html.hcd-help-open body { overflow:hidden; }

.hcd-help {
  position:fixed; inset:0; z-index:2147483000;
  display:flex; flex-direction:column;
  background:var(--surface-page, #f8fafc); color:var(--text-body, #1f2937);
  font:16px/1.5 var(--font-body, 'Barlow', system-ui, -apple-system, sans-serif);
}
.hcd-help-bar {
  flex-shrink:0; padding:10px 12px; padding-top:max(10px, env(safe-area-inset-top));
  background:var(--blue-500, #1a56db); border-bottom:5px solid var(--yellow-400, #fff200);
}
.hcd-help-back {
  display:block; width:100%; min-height:56px; padding:0 16px;
  background:#fff; color:var(--blue-700, #1e3a8a);
  border:0; border-radius:12px; cursor:pointer;
  font:900 18px var(--font-display, 'Archivo', 'Arial Narrow', system-ui, sans-serif);
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
}
.hcd-help-back::before { content:'\2039\00a0'; font-size:1.3em; line-height:0; }
.hcd-help-back:focus-visible { outline:3px solid var(--yellow-400, #fff200); outline-offset:2px; }
.hcd-help-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.hcd-help-inner {
  max-width:820px; margin:0 auto;
  padding:18px 16px max(40px, env(safe-area-inset-bottom));
}
.hcd-help-head { margin-bottom:14px; }
.hcd-help-title {
  margin:0; font:900 24px/1.15 var(--font-display, 'Archivo', 'Arial Narrow', system-ui, sans-serif);
  color:var(--text-strong, #111827); outline:none;
}
.hcd-help-updated { margin-top:4px; font-size:13px; color:var(--text-muted, #4b5563); }
.hcd-help-loading { color:var(--text-muted, #4b5563); }
.hcd-help-foot {
  margin-top:28px; padding-top:14px; border-top:1px solid var(--border-default, #d1d5db);
  font-weight:700; color:var(--text-muted, #4b5563);
}

/* The rendered page (shared/hcd-help.js output). */
.hcd-help-body h1 { font:900 20px/1.2 var(--font-display, 'Archivo', system-ui, sans-serif); margin:18px 0 10px; color:var(--text-strong, #111827); }
.hcd-help-body h2 { font:800 19px/1.25 var(--font-display, 'Archivo', system-ui, sans-serif); margin:26px 0 8px; color:var(--blue-600, #1c4fc4); }
.hcd-help-body h3 { font:800 17px/1.3 var(--font-display, 'Archivo', system-ui, sans-serif); margin:20px 0 6px; color:var(--text-strong, #111827); }
.hcd-help-body p { margin:8px 0; }
.hcd-help-body ol, .hcd-help-body ul { margin:8px 0; padding-left:26px; }
.hcd-help-body li { margin:5px 0; }
.hcd-help-body li > ol, .hcd-help-body li > ul { margin:4px 0; }
.hcd-help-body strong { font-weight:800; color:var(--text-strong, #111827); }
.hcd-help-body .help-table-wrap { overflow-x:auto; margin:10px 0; -webkit-overflow-scrolling:touch; }
.hcd-help-body table { border-collapse:collapse; width:100%; font-size:15px; }
.hcd-help-body th, .hcd-help-body td { border:1px solid var(--border-default, #d1d5db); padding:7px 9px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.hcd-help-body th { background:var(--blue-50, #eff4ff); color:var(--text-strong, #111827); }
.hcd-help-body .help-callout { margin:12px 0; padding:10px 12px; border-left:5px solid; border-radius:8px; }
.hcd-help-body .help-callout--note { background:var(--blue-50, #eff4ff); border-color:var(--blue-500, #1a56db); }
.hcd-help-body .help-callout--tip { background:var(--green-100, #dcfce7); border-color:var(--green-500, #15803d); }
.hcd-help-body .help-callout--important { background:var(--amber-100, #fef3c7); border-color:var(--amber-500, #b45309); }
.hcd-help-body .help-figure { margin:12px 0; }
.hcd-help-body .help-figure img { display:block; max-width:100%; height:auto; border:1px solid var(--border-default, #d1d5db); border-radius:8px; }
.hcd-help-body .help-figure figcaption { margin-top:4px; font-size:13px; color:var(--text-muted, #4b5563); }

/* Office consoles: a desk screen, so the bar is a slim header with "Close help" on the right and
   the office pages are listed along the top as a row of buttons. */
.hcd-help--console .hcd-help-bar { display:flex; justify-content:flex-end; }
.hcd-help--console .hcd-help-back { width:auto; min-height:44px; font-size:14px; text-transform:none; }
.hcd-help--console .hcd-help-back::before { content:none; }
.hcd-help-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.hcd-help-navbtn {
  min-height:40px; padding:0 14px; border-radius:999px; cursor:pointer;
  background:var(--surface-card, #fff); color:var(--blue-700, #1e3a8a);
  border:2px solid var(--blue-500, #1a56db);
  font:800 13px var(--font-display, 'Archivo', system-ui, sans-serif);
}
.hcd-help-navbtn[aria-current="page"] { background:var(--blue-500, #1a56db); color:#fff; }
.hcd-help-navbtn:focus-visible { outline:3px solid var(--yellow-400, #fff200); outline-offset:2px; }

/* Console dark theme (html[data-theme="dark"], stamped by /shared/hcd-theme.js). */
:root[data-theme="dark"] .hcd-help-back { background:var(--surface-card, #1f2937); color:#fff; }
:root[data-theme="dark"] .hcd-help-body h2 { color:var(--blue-300, #93b4ff); }
:root[data-theme="dark"] .hcd-help-body th,
:root[data-theme="dark"] .hcd-help-body .help-callout--note { background:rgba(59,130,246,.16); }
:root[data-theme="dark"] .hcd-help-body .help-callout--tip { background:rgba(21,128,61,.2); }
:root[data-theme="dark"] .hcd-help-body .help-callout--important { background:rgba(180,83,9,.22); }
:root[data-theme="dark"] .hcd-help-navbtn { color:var(--blue-200, #c7d7fe); }
:root[data-theme="dark"] .hcd-help-navbtn[aria-current="page"] { color:#fff; }

/* HELP in the office console nav: the same segmented-button look as .console-nav-btn (each
   console's styles.css), plus an outline so it is easy to find on the track. */
.console-nav .console-nav-help {
  min-width:0; min-height:0; padding:7px 13px;
  background:none; color:var(--nav-blue, #1a56db);
  border:2px solid var(--nav-blue, #1a56db); border-radius:7px;
  font:800 12.5px/1 var(--font-display, 'Archivo', system-ui, sans-serif);
  letter-spacing:.05em;
}
.console-nav .console-nav-help:hover { background:var(--nav-hover, rgba(26,86,219,.08)); }
.console-nav .console-nav-help:active { background:var(--nav-press, rgba(26,86,219,.16)); }
.console-nav .console-nav-help:focus-visible { outline:2px solid var(--nav-blue, #1a56db); outline-offset:2px; }

/* Route App and Rollout App: their .app-bar pills are 26px tall (.pill-msg, .pill-routeNote), so
   HELP matches that size there rather than the 44px pill — the bar is one nowrap row and every
   pixel of it is spoken for on a phone. */
.app-bar button.hcd-help-btn { min-width:0; min-height:0; padding:5px 11px; border-width:1.5px; }