/* HandCraft Online V2 — layout and brand on top of Bootstrap 5.3.
   Brand tokens are v1's (static/style.css there); everything else is new. */

:root {
  --hc-purple: #100E2A;        /* chrome: sidebar, login */
  --hc-purple-mid: #1a1844;
  --hc-purple-hover: #242164;  /* the true brand purple, for hover/accents */
  --hc-gold: #dea140;
  --hc-gold-rgb: 222, 161, 64;
  --hc-surface: #f6f7f9;
  --hc-border: #e3e5ea;
  --hc-sidebar-w: 236px;
  --hc-bar-h: 52px;

  /* The device's own UI font (hcOps' stack): Segoe UI on Windows, San
     Francisco on Apple, Roboto on Android. Nothing to download. */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-warning: var(--hc-gold);
  --bs-warning-rgb: var(--hc-gold-rgb);
  --bs-border-radius: .5rem;
}

html, body { height: 100%; }
body { background: var(--hc-surface); }
h1, h2, h3, h4 { font-weight: 300; }

/* ── Brand buttons ──────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--hc-purple-hover); --bs-btn-border-color: var(--hc-purple-hover);
  --bs-btn-hover-bg: var(--hc-purple-mid); --bs-btn-hover-border-color: var(--hc-purple-mid);
  --bs-btn-active-bg: var(--hc-purple); --bs-btn-active-border-color: var(--hc-purple);
  --bs-btn-disabled-bg: var(--hc-purple-hover); --bs-btn-disabled-border-color: var(--hc-purple-hover);
}
.btn-outline-primary {
  --bs-btn-color: var(--hc-purple-hover); --bs-btn-border-color: var(--hc-purple-hover);
  --bs-btn-hover-bg: var(--hc-purple-hover); --bs-btn-hover-border-color: var(--hc-purple-hover);
  --bs-btn-active-bg: var(--hc-purple-hover); --bs-btn-active-border-color: var(--hc-purple-hover);
}
.btn-link, a { --bs-link-color-rgb: 36, 33, 100; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.hc-layout { display: flex; min-height: 100vh; }
.hc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Content grows with the screen up to a comfortable reading width, then
   centres — on a wide monitor it sits in the middle instead of hugging the
   sidebar with empty space to the right. */
.hc-content { padding: 1.5rem clamp(1.5rem, 2.5vw, 3rem); max-width: 1680px; width: 100%; margin-inline: auto; }

.hc-sidebar {
  width: var(--hc-sidebar-w); flex-shrink: 0;
  background: var(--hc-purple); color: rgba(255,255,255,.78);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  /* The logo and the footer stay put; only the menu between them scrolls, so
     the sidebar never scrolls the logo away (or shows a light scrollbar beside
     the page) on a screen shorter than the menu. */
  overflow: hidden;
}
.hc-brand {
  display: flex; align-items: center; gap: .6rem;
  height: var(--hc-bar-h); padding: 0 1rem;
  color: #fff; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: none;
}
.hc-nav { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem 0;
          scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.hc-nav::-webkit-scrollbar { width: 6px; }
.hc-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.hc-nav-section {
  padding: .9rem 1rem .3rem; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.hc-nav-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem; color: inherit; text-decoration: none; font-size: .9rem;
  border-left: 3px solid transparent;
}
.hc-nav-link:hover { background: var(--hc-purple-hover); color: #fff; }
.hc-nav-link.active { color: var(--hc-gold); background: rgba(var(--hc-gold-rgb), .1);
                      border-left-color: var(--hc-gold); }
.hc-nav-badge { margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; text-align: center;
                 font-size: .72rem; font-weight: 700; line-height: 1.4rem; background: var(--hc-gold); color: var(--hc-purple); }
.hc-nav-footer { border-top: 1px solid rgba(255,255,255,.08); padding: .4rem 0; flex: none; }
.hc-nav-footer form { margin: 0; }
.hc-nav-footer button.hc-nav-link { text-align: left; color: rgba(255,255,255,.78); }

.hc-topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--hc-bar-h);
  background: #fff; border-bottom: 1px solid var(--hc-border);
}
/* Same width and centring as .hc-content, so the module links line up with the page. */
.hc-topbar-inner { display: flex; align-items: center; gap: 1.25rem; height: 100%;
                   max-width: 1680px; margin-inline: auto; padding: 0 clamp(1.5rem, 2.5vw, 3rem); }
.hc-topbar-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; white-space: nowrap; }
.hc-subnav { display: flex; gap: .25rem; overflow-x: auto; }
.hc-subnav a {
  padding: .35rem .7rem; border-radius: 999px; font-size: .875rem;
  color: #4b5563; text-decoration: none; white-space: nowrap;
}
.hc-subnav a:hover { background: var(--hc-surface); }
.hc-subnav a.active { background: var(--hc-purple); color: #fff; }
.hc-icon-btn { border: 0; background: none; font-size: 1.4rem; padding: 0; }

.hc-sidebar-scrim { display: none; }

@media (max-width: 767.98px) {
  .hc-sidebar { position: fixed; left: calc(-1 * var(--hc-sidebar-w)); z-index: 1060;
                top: 0; transition: left .2s ease; }
  .hc-sidebar-open .hc-sidebar { left: 0; }
  .hc-sidebar-open .hc-sidebar-scrim { display: block; position: fixed; inset: 0;
                                       background: rgba(0,0,0,.4); z-index: 1059; }
  .hc-content { padding: 1rem; }
  .hc-topbar-inner { padding: 0 1rem; gap: .75rem; }
}

/* ── Page furniture ─────────────────────────────────────────────────────── */
.hc-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
                justify-content: space-between; margin-bottom: 1rem; }
.hc-page-head h1 { font-size: 1.5rem; margin: 0; }
.hc-card { background: #fff; border: 1px solid var(--hc-border); border-radius: .75rem; }
.hc-card-body { padding: 1.25rem; }

/* The landing page is a launcher, not a work surface: a narrower centred
   column so the greeting and tiles sit together in the middle of wide screens. */
.hc-landing { max-width: 1160px; margin-inline: auto; }
/* …and the top bar matches it there, so "Home" lines up with the greeting. */
.hc-topbar-inner.hc-topbar-landing { max-width: calc(1160px + 2 * clamp(1.5rem, 2.5vw, 3rem)); }
/* Tiles: equal widths, a column count chosen so rows come out as full as they
   can (app.js sets --cols), and an unfilled last row centred. These media
   queries are the fallback before the script runs. */
.hc-tiles { --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
@media (max-width: 1099.98px) { .hc-tiles { --cols: 3; } }
@media (max-width: 767.98px)  { .hc-tiles { --cols: 2; } }
@media (max-width: 479.98px)  { .hc-tiles { --cols: 1; } }
.hc-tile {
  flex: 0 0 calc((100% - (var(--cols) - 1) * 1rem) / var(--cols)); min-width: 0;
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.1rem 1.2rem; background: #fff; color: inherit; text-decoration: none;
  border: 1px solid var(--hc-border); border-radius: .75rem;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.hc-tile:hover { border-color: var(--hc-gold); box-shadow: 0 4px 14px rgba(16,14,42,.08);
                 transform: translateY(-1px); }
.hc-tile i { font-size: 1.5rem; color: var(--hc-purple-hover); }
.hc-tile-title { font-weight: 600; }
.hc-tile-desc { font-size: .85rem; color: #6b7280; }

/* ── Lists: filter bar, bulk actions, grouped accounts ───────────────────── */
.hc-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.hc-filters .form-select { width: auto; }
.hc-filter-search { flex: 1 1 280px; max-width: 460px; }
.hc-bulkbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.hc-check { width: 2.25rem; }
.hc-accounts tr.hc-acct-start td { border-top: 1px solid var(--hc-border); }
.hc-accounts tbody tr:first-child td { border-top: 0; }
.hc-accounts tr.hc-sub td { border-top: 0; }
.hc-accounts tr.hc-sub .hc-name { padding-left: 1.75rem; }
.hc-accounts td { border-bottom: 0; }
.hc-scroll-list { max-height: 14rem; overflow-y: auto; }

/* A modal form wraps header/body/footer; pass the scrollable layout through it
   so a long form scrolls inside the modal with its buttons always visible. */
.modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
/* ── Modal ─────────────────────────────────────────────────────── */
.form-check-input:checked { background-color: var(--hc-purple-hover); border-color: var(--hc-purple-hover); }
.hc-form-section { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
                   color: #6b7280; margin: 1.25rem 0 .75rem; }
.modal-header { border-bottom: 1px solid var(--hc-border); }

/* htmx busy indicators: hidden until a request is in flight. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* Requests in flight: dim the form and block double submits. */
form.htmx-request { opacity: .6; pointer-events: none; }

/* ── Loading mark (_loader.html) ──────────────────────────────────────── */
/* The whole mark breathes: 20% bigger, back again. Still reads as the logo
   when a phone pauses animation mid-navigation, and suits short loads. */
.hc-loader { display: inline-block; line-height: 0; }
.hc-loader svg { transform-origin: 50% 50%; animation: hc-loader-pulse 1.1s ease-in-out infinite; }
.hc-loader-c { fill: none; stroke: var(--hc-gold); stroke-width: 66; }
.hc-loader-hands { fill: var(--hc-gold); }
@keyframes hc-loader-pulse { 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .hc-loader svg { animation: hc-loader-fade 1.6s ease-in-out infinite; }
  @keyframes hc-loader-fade { 50% { opacity: .6; } }
}

/* Page-level "still working": just the mark, centred — no box. A soft
   shadow keeps the gold readable over white pages and busy tables. Shown
   only after a short delay so fast responses never flash it; never blocks clicks. */
.hc-busy { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; pointer-events: none; }
.hc-busy[hidden] { display: none; }
.hc-busy .hc-loader { filter: drop-shadow(0 2px 6px rgba(16, 14, 42, .28)); animation: hc-busy-in .18s ease-out; }
@keyframes hc-busy-in { from { opacity: 0; transform: scale(.9); } }

/* ── KPI tiles and small charts ────────────────────────────────────────── */
/* Chart colours: the dataviz reference categorical palette, light steps,
   validated on the white card surface (validate_palette.js, 2026-10-19: all
   hard checks pass; slots 3, 4 and 5 are under 3:1, so every chart ships a
   table view). Assigned to ENTITIES in a fixed order, never cycled. */
:root {
  --viz-returned: #2a78d6; --viz-staged: #eb6834;
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;
  --series-other: #8a8f98;
  --viz-grid: #eceef1; --viz-axis: #6b7280;
}

/* ── Charts (static/js/charts.js) ─────────────────────────────────────── */
.hc-chart { margin: 0; }
.hc-chart-title { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.hc-chart-unit { font-weight: 400; color: var(--bs-secondary-color); }
.hc-chart-canvas { position: relative; height: 260px; }
.hc-chart-sm .hc-chart-canvas { height: 190px; }
.hc-chart details { margin-top: .25rem; font-size: .8125rem; }
.hc-chart details summary { color: var(--bs-secondary-color); cursor: pointer; }
.hc-chart table { font-size: .75rem; }
.hc-chart-empty { color: var(--bs-secondary-color); font-size: .875rem; padding: 2rem 0; text-align: center; }

/* Presence grids (bill and meter coverage) */
.hc-grid-table td.hc-cell { width: 1.6rem; text-align: center; padding: .2rem; }
/* Through Bootstrap's own table variables: .table paints every cell with
   --bs-table-bg, which beats a plain background. The ✓/✕ carries the meaning. */
.hc-cell-yes { --bs-table-bg: #e7f4ea; --bs-table-color: #1e6b32; }
.hc-cell-no { --bs-table-bg: #fdecec; --bs-table-color: #a12622; }
.hc-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hc-kpi { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; background: #fff;
          border: 1px solid var(--hc-border); border-radius: .75rem; color: inherit; text-decoration: none; }
.hc-kpi:hover { border-color: var(--hc-gold); }
.hc-kpi-label { font-size: .8rem; color: #6b7280; }
.hc-kpi-value { font-size: 1.6rem; font-weight: 300; line-height: 1.1; }
.hc-section-title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }

.hc-aging { display: grid; gap: .4rem; }
.hc-aging-row { display: grid; grid-template-columns: 5.5rem 1fr 3.5rem; align-items: center; gap: .6rem;
                color: inherit; text-decoration: none; font-size: .875rem; }
.hc-aging-row:hover .hc-aging-days { text-decoration: underline; }
.hc-aging-bar { height: .65rem; background: var(--hc-surface); border-radius: 4px; overflow: hidden; }
.hc-aging-bar span { display: block; height: 100%; background: var(--hc-purple-hover); border-radius: 0 4px 4px 0; }
.hc-aging-n { text-align: right; font-variant-numeric: tabular-nums; }

.hc-legend { display: flex; gap: 1rem; font-size: .8rem; color: #4b5563; margin-bottom: .5rem; }
.hc-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem;
             vertical-align: -1px; }
.hc-bars { width: 100%; border-collapse: separate; border-spacing: 0 .35rem; }
.hc-bars th { width: 4.5rem; font-weight: 600; font-size: .85rem; padding-right: .5rem; }
.hc-bars-track { width: 100%; }
.hc-bars-stack { display: flex; gap: 2px; height: 1.1rem; min-width: 4px; }
.hc-bars-seg { display: block; height: 100%; }
.hc-bars-seg:first-child { border-radius: 4px 0 0 4px; }
.hc-bars-seg:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.hc-bars-seg:hover { filter: brightness(.9); }
.hc-bars-total { white-space: nowrap; padding-left: .6rem; font-size: .8rem; color: #4b5563;
                 font-variant-numeric: tabular-nums; }
.hc-leaderboard { columns: 2 220px; margin: 0; padding-left: 1.25rem; }
.hc-leaderboard li { break-inside: avoid; padding: .15rem 0; }
.hc-leaderboard li span:first-child { margin-right: .5rem; }

/* ── Cart locations and custody ───────────────────────────────────────── */
.hc-loc { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .15rem .55rem;
          border-radius: 999px; background: #f1f2f5; color: #374151; white-space: nowrap; }
.hc-loc-customer { background: #e7f0fb; color: #1d4f8f; }
.hc-loc-plant { background: #e6f4ec; color: #146c43; }
.hc-loc-staged { background: #fdf0dc; color: #8a5300; }
.hc-loc-transit { background: #ecebf6; color: #3b3878; }
.hc-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.hc-step { border: 1px solid var(--hc-border); border-radius: .5rem; padding: .4rem .6rem; min-width: 10rem; }
.hc-step-current { border-color: var(--hc-purple-hover); box-shadow: 0 0 0 1px var(--hc-purple-hover) inset; }
.hc-step-gap { border-style: dashed; border-color: var(--hc-gold); background: rgba(var(--hc-gold-rgb), .08);
               display: flex; align-items: center; font-size: .85rem; }
.hc-step-arrow { align-self: center; color: #9ca3af; }
.hc-filter-picker { min-width: 220px; flex: 0 1 260px; }
.hc-filter-picker .ts-control { min-height: 38px; }

/* ── Permission editor (admin/_access.html) ─────────────────────────────── */
.hc-access-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                   align-items: start; }
.hc-access-card { border: 1px solid var(--hc-border); border-radius: .6rem; padding: .75rem .9rem; margin: 0; }
.hc-access-card legend { float: none; width: 100%; font-size: .95rem; margin-bottom: .4rem; }
/* Granular flags read as inactive until the module itself is granted. */
.hc-access-card:not(:has([data-hc-access-toggle]:checked)) .form-check,
.hc-access-card:not(:has([data-hc-access-toggle]:checked)) .hc-chip { opacity: .45; }
.hc-access-card:has([data-hc-access-toggle]:checked) { border-color: rgba(var(--hc-gold-rgb), .7);
                                                        background: rgba(var(--hc-gold-rgb), .05); }
.hc-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .15rem .55rem;
           border: 1px solid var(--hc-border); border-radius: 999px; background: #fff; cursor: pointer; }
.hc-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .5rem;
              padding: .75rem 0; margin-top: 1rem; background: linear-gradient(transparent, var(--hc-surface) 30%); }
.hc-row-link { cursor: pointer; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.hc-toast { border: 0; border-left: 4px solid; min-width: 260px; }
.hc-toast-success { border-left-color: #12805c; }
.hc-toast-info { border-left-color: #0080c7; }
.hc-toast-warning { border-left-color: var(--hc-gold); }
.hc-toast-danger { border-left-color: #b42318; }

/* ── Sign-in pages ──────────────────────────────────────────────────────── */
.hc-auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
           background: var(--hc-purple); }
.hc-auth-card { width: 100%; max-width: 400px; background: #fff; border-radius: 1rem;
                padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.hc-auth-brand { display: flex; align-items: center; justify-content: center; gap: .6rem;
                  font-weight: 600; font-size: 1.1rem; color: var(--hc-purple); margin-bottom: 1.25rem; }
.hc-auth-card h1 { font-size: 1.35rem; text-align: center; margin-bottom: 1.25rem; }

.hc-error { text-align: center; padding: 4rem 1rem; }
.hc-error .hc-error-code { font-size: 3rem; font-weight: 300; color: var(--hc-purple-hover); }

/* ── Tabs, review cards ─────────────────────────────────────────────────── */
.hc-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.hc-tabs a { padding: .35rem .8rem; border-radius: 999px; text-decoration: none; color: #4b5563; font-size: .9rem; }
.hc-tabs a:hover { background: #fff; }
.hc-tabs a.active { background: var(--hc-purple); color: #fff; }
.hc-review-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--hc-border); }

/* ── Curtain work orders ─────────────────────────────────────────────────── */
.hc-kpis-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 220px)); }
.hc-due { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600;
          padding: .12rem .5rem; border-radius: 999px; background: #f1f2f5; color: #374151; white-space: nowrap; }
.hc-due-overdue { background: #fde7e7; color: #a61b1b; }
.hc-due-week { background: #fdf0dc; color: #8a5300; }
.hc-due-later { background: #e6f4ec; color: #146c43; }
.hc-changes { display: grid; gap: .6rem; }
.hc-workorder { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .9rem 1rem; }
.hc-workorder-main { flex: 1 1 260px; min-width: 0; }
.hc-workorder-actions { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
.hc-workorder-actions .btn-primary { min-width: 9rem; padding: .6rem 1rem; }
@media (max-width: 575.98px) {
  .hc-workorder-actions { width: 100%; flex-direction: row; justify-content: space-between; }
  .hc-workorder-actions .btn-primary { flex: 1; }
}

/* Filters that fold away on phones (data-hc-collapse). */
.hc-filters-more { display: contents; }
@media (max-width: 767.98px) {
  .hc-filters-more { display: none; }
  .hc-filters-more.show { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
}

/* ── Uniform request line editors and the public form ────────────────────── */
.hc-line, .hc-pline { display: grid; gap: .4rem; margin-bottom: .4rem; align-items: center;
                      grid-template-columns: 2fr 1fr 2fr 1fr 5rem auto; }
.hc-line-head span, .hc-pline-head span { font-size: .75rem; color: #6b7280; font-weight: 600; }
@media (max-width: 767.98px) {
  .hc-line, .hc-pline { grid-template-columns: 1fr 1fr; padding: .6rem; border: 1px solid var(--hc-border);
                        border-radius: .5rem; }
  .hc-line > :first-child, .hc-pline > :first-child,
  .hc-line > [data-hc-remove-row], .hc-pline > [data-hc-remove-row] { grid-column: 1 / -1; }
}
.hc-public { min-height: 100vh; background: var(--hc-surface); padding: 1.5rem 1rem 3rem; }
.hc-public-head { display: flex; align-items: center; gap: .75rem; max-width: 860px; margin: 0 auto 1rem; }
.hc-public-brand { font-weight: 600; color: var(--hc-purple); }
.hc-public-sub { font-size: .875rem; color: #6b7280; }
.hc-public-card { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--hc-border);
                  border-radius: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.hc-public-icon { font-size: 2.75rem; color: var(--hc-purple-hover); }
.hc-size-charts { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; }
.hc-size-charts figure { margin: 0; text-align: center; }
.hc-size-charts img { max-width: min(100%, 520px); max-height: 520px; border: 1px solid var(--hc-border); border-radius: .5rem; }
.hc-size-charts figcaption { font-size: .8rem; color: #6b7280; margin-top: .25rem; }

/* Work Orders: text people typed keeps its line breaks. */
.hc-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-page-head h1 .badge { font-size: .85rem; vertical-align: middle; }
/* People picker (admin push messages) and the notification preview. */
.hc-picker-list { max-height: 16rem; overflow-y: auto; }
.hc-picker-list label { cursor: pointer; }
.hc-picker-list label:hover { background: var(--bs-tertiary-bg); }
.hc-push-preview { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border-radius: .75rem;
  background: var(--bs-tertiary-bg); max-width: 26rem; }
.hc-push-preview img { border-radius: .5rem; flex: none; }
/* Reports: one report at the full width; "Switch report" in the header. */
.hc-report-head h1 { min-width: 0; }
.hc-report-menu { max-height: 70vh; overflow-y: auto; }
/* Fills the window below the header (reports.js sets the exact height; this is
   the estimate before the script runs). */
.hc-report-frame { position: relative; width: 100%; height: calc(100dvh - 10rem); min-height: 360px;
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; }
.hc-report-frame iframe { border: 0; }
.hc-report-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center;
  color: var(--bs-secondary-color); }
/* "Full screen" where the browser has none (iPhone): the report fills the window. */
body.hc-report-filled { overflow: hidden; }
body.hc-report-filled .hc-report-frame { position: fixed; inset: 0; z-index: 1090; width: 100vw; height: 100dvh !important;
  max-height: none; aspect-ratio: auto; border: 0; border-radius: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.hc-report-close { position: fixed; z-index: 1091; top: calc(env(safe-area-inset-top) + .5rem);
  right: calc(env(safe-area-inset-right) + .5rem); width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
  background: rgba(16, 14, 42, .85); color: #fff; font-size: 1.1rem; display: grid; place-items: center; }
/* Photo viewer (#hc-photo): the whole image, as large as the screen allows; pinch to zoom on phones. */
.hc-photo-body { display: grid; place-items: center; padding: .5rem; background: #111; }
.hc-photo-body img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; }
.modal-fullscreen-sm-down .hc-photo-body img { max-height: calc(100dvh - 4rem); }
/* Help and developer docs: page list beside a readable column of text. */
.hc-docs { display: grid; gap: 1.5rem; grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
.hc-docs-nav { position: sticky; top: calc(var(--hc-bar-h) + 1rem); }
.hc-docs-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color);
  padding: .75rem .75rem .25rem; }
.hc-docs-link { display: block; padding: .35rem .75rem; border-radius: .5rem; color: var(--bs-body-color);
  text-decoration: none; font-size: .92rem; }
.hc-docs-link:hover { background: #fff; }
.hc-docs-link.active { background: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--hc-gold); }
.hc-docs-menu { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .5rem .75rem; }
.hc-docs-menu summary { font-weight: 600; cursor: pointer; }
.hc-prose { max-width: 46rem; line-height: 1.6; }
.hc-prose h1 { font-size: 1.75rem; font-weight: 300; margin-bottom: 1rem; }
.hc-prose h2 { font-size: 1.2rem; font-weight: 600; margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
.hc-prose h3 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; }
.hc-prose table { width: 100%; margin: 1rem 0; font-size: .9rem; }
.hc-prose th, .hc-prose td { border-bottom: 1px solid var(--bs-border-color); padding: .35rem .5rem; vertical-align: top; }
.hc-prose code { color: inherit; background: var(--bs-tertiary-bg); padding: .05rem .3rem; border-radius: .25rem; }
.hc-prose pre { background: #100e2a; color: #f6f7f9; padding: .85rem 1rem; border-radius: .5rem; overflow-x: auto; }
.hc-prose pre code { background: none; padding: 0; }
.hc-prose .admonition { border-left: 4px solid var(--hc-gold); background: #fff; padding: .6rem 1rem; border-radius: .25rem; margin: 1rem 0; }
.hc-prose .admonition-title { font-weight: 600; margin-bottom: .25rem; }
.hc-prose .admonition.warning { border-left-color: #b42318; }
@media (max-width: 991.98px) {
  .hc-docs { grid-template-columns: 1fr; gap: 1rem; }
  .hc-docs-nav { position: static; }
}
/* A module's count on the top-bar tab where those things are. */
.hc-subnav-badge { display: inline-block; min-width: 1.35rem; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--hc-gold); color: #100e2a; font-size: .72rem; font-weight: 700; line-height: 1.35rem; text-align: center; }