/* GENERATED by tools/build-brand-css.js from tools/hc-components.src.css. Edit the source, not this file. */
/* HyperCurio shared components (redesign stage 2: HC-1627 to HC-1634 and HC-1637). SOURCE: run `node tools/build-brand-css.js`
 * to write static/hc-components.css. Scoped the same way as the brand layer (every rule under the HyperCurio themes, no
 * added specificity), so Classic is untouched, and loaded after it, last in <head>.
 *
 * Two kinds of rule live here:
 *   1. the components, as hc-* classes the page retrofits (HC-1635 onward) assemble: buttons, fields, chips, progress,
 *      overlays, panels, rows, tiles, the Lens Frame, empty and error states, hero bands, tables, galleries;
 *   2. the same look on the site's existing shared classes where that cannot move a layout (button sizes and states,
 *      fields, dialogs' scrim, the toasts, the tour coach). Page-specific classes are left to their page's ticket.
 * Every value is the Implementation Guide v2 (sections 5 and 6), which is Alan's mockup CSS, on the theme tokens, so the
 * Light theme is the same sheet. Every component can be seen in every state at /app/ui (hc-ui.html).
 * Decisions (easy to change): .hc-btn--outline stays the quiet button the brand layer made it (stage 1, approved); the
 * mockup's 2px Glow "ghost" is the new .hc-btn--ghost, picked per button by the page retrofits, so 120 Cancel-type
 * buttons do not all turn cyan at once. Small buttons are 40px (the guide's [C42]), not the mockup's 38.
 */

:where(:root[data-theme^="lord-alan-v2"]) {
  /* Chart series, in order (6.3 [C30]): Cyan, Glow, UV text, Chrome, then Ignite only for what needs attention. */
  --hcc-1: var(--hc-accent); --hcc-2: var(--hc-link-strong); --hcc-3: var(--hc-uv-text); --hcc-4: var(--hc-chrome); --hcc-5: var(--hc-action);
  --hcx-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239DB0D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hcx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --hcx-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.5'/%3E%3C/svg%3E");
  --hcx-modal-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) {
  --hcx-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A587A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hcx-modal-shadow: 0 30px 80px rgba(10, 18, 48, .18);
}

/* ================================================================ HC-1627 buttons (5.1)
   One extruded primary and at most one Ignite per view (the lint is tests/stage2comptest.js). Footer order: Back, Cancel,
   then the primary on the right (.hc-actions). Loading keeps the width and shows a 16px spinner (aria-busy). */
/* The padding stays the page's own (20px, the mockup's 24 is a hair wider): icon-only buttons such as the phone + Add are
   sized by it, and a wider padding left the + no room. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn { min-height: 48px; border-radius: var(--hc-radius-control); gap: 8px; font-size: 16px; line-height: 1; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--primary { margin-bottom: 6px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--block.hc-btn--primary { margin-bottom: 6px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--action {
  background: var(--hc-action); border: 1px solid var(--hc-action); color: var(--hc-on-action); box-shadow: var(--hc-glow-action);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--action:not([disabled]):hover,
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--hot:not([disabled]):hover { filter: none; box-shadow: 0 0 28px color-mix(in srgb, var(--hc-action) 75%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--action:not([disabled]):active { transform: translateY(2px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--ghost { background: transparent; border: 2px solid var(--hc-link-strong); color: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--ghost:not([disabled]):hover { background: color-mix(in srgb, var(--hc-link-strong) 8%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--surface,
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--outline { color: var(--hc-text); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--sm.hc-btn--primary { box-shadow: var(--hc-glow), 0 4px 0 var(--hc-uv); margin-bottom: 4px; }
/* #1755 (Terry, 27 Oct: "The lookup numbers button appears to be slightly higher vertically than the two buttons to its left."):
   the primary keeps a margin under it for its extruded edge (above), and a button row centres each button's margin box, so the
   primary sat half that margin (3px) above its neighbours. Disabled, it loses the edge but not the margin, so the step showed
   plainly. In a button row that has a primary, every button keeps the same room underneath, so their faces line up. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-actions:has(> .hc-btn--primary) > .hc-btn,
:where(:root[data-theme^="lord-alan-v2"]) .hc-actions-right:has(> .hc-btn--primary) > .hc-btn,
:where(:root[data-theme^="lord-alan-v2"]) .im-foot:has(> .hc-btn--primary) > .hc-btn { margin-bottom: 6px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-actions:has(> .hc-btn--primary) > .hc-btn--sm,
:where(:root[data-theme^="lord-alan-v2"]) .hc-actions-right:has(> .hc-btn--primary) > .hc-btn--sm,
:where(:root[data-theme^="lord-alan-v2"]) .im-foot:has(> .hc-btn--primary) > .hc-btn--sm { margin-bottom: 4px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[disabled],
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--primary { --hcb-spin: var(--hc-on-accent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--action,
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--hot { --hcb-spin: var(--hc-on-action); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn--ghost { --hcb-spin: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[aria-busy="true"] > * { visibility: hidden; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btn[aria-busy="true"]::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid var(--hcb-spin, var(--hc-text)); border-right-color: transparent; animation: hcb-spin .7s linear infinite;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-linkbtn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--hc-link-strong); text-decoration: none;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-linkbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-linkbtn.is-dim { color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-back { color: var(--hc-link-strong); font-weight: 700; font-size: 15px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-back:hover { color: var(--hc-link-strong); text-decoration: underline; text-underline-offset: 4px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-iconbtn {
  position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--hc-radius-control);
  border: 0; background: none; color: var(--hc-text-muted); cursor: pointer;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-iconbtn::before { content: ''; position: absolute; inset: -2px; }   /* a 44px hit area round a 40px button */
:where(:root[data-theme^="lord-alan-v2"]) .hc-iconbtn:hover { background: var(--hc-surface-2); color: var(--hc-text); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-iconbtn svg { width: 20px; height: 20px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid var(--hc-border); padding-top: 20px; margin-top: 6px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-actions-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; margin-left: auto; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 759px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-hero .hc-btnrow > .hc-btn { flex: 1 1 auto; } }

/* ================================================================ HC-1628 form controls (5.5)
   Recessed fields with control borders (at least 3:1), 16px text so iOS never zooms, validation with an icon and words. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-input,
:where(:root[data-theme^="lord-alan-v2"]) input.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) select.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) textarea.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) .hc-select {
  min-height: 46px; border-radius: var(--hc-radius-control); padding: 0 14px; font-size: 16px;
  background-color: var(--hc-field); border: 1px solid var(--hc-border-control); color: var(--hc-text);
}
:where(:root[data-theme^="lord-alan-v2"]) textarea.hc-input { padding: 12px 14px; min-height: 120px; line-height: 1.5; }
:where(:root[data-theme^="lord-alan-v2"]) textarea.hc-input.is-mono { font-family: var(--hcb-font-mono); font-size: 15px; line-height: 1.6; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-input::placeholder { color: color-mix(in srgb, var(--hc-text-muted) 75%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) select.hc-input,
:where(:root[data-theme^="lord-alan-v2"]) .hc-select { appearance: none; -webkit-appearance: none; background-image: var(--hcx-chev); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; font-weight: 700; font-size: 15px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-input.is-compact { min-height: 36px; height: 36px; width: 90px; font-family: var(--hcb-font-mono); font-size: 14px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-search { position: relative; display: block; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-search > :not(input) { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--hc-text-muted); pointer-events: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-search svg { width: 20px; height: 20px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-search > .hc-input { padding-left: 44px; width: 100%; }
/* The import mapper's three states: needs you (Ignite), we will interpret this (UV), a drop target (Glow). */
:where(:root[data-theme^="lord-alan-v2"]) .hc-input.is-hl,
:where(:root[data-theme^="lord-alan-v2"]) .hc-select.is-hl { border-color: var(--hc-action); box-shadow: inset 0 0 0 1px var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-input.is-parse,
:where(:root[data-theme^="lord-alan-v2"]) .hc-select.is-parse { border-color: var(--hc-uv); box-shadow: inset 0 0 0 1px var(--hc-uv); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-input.is-drop,
:where(:root[data-theme^="lord-alan-v2"]) .hc-select.is-drop { border-color: var(--hc-link-strong); box-shadow: var(--hc-glow); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-err { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 14px; color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-err::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--hcx-alert) center / contain no-repeat; mask: var(--hcx-alert) center / contain no-repeat; }
/* Segmented control: a recessed track, the chosen option in Cyan. Buttons with aria-pressed, or radios with labels. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--hc-field); border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-control); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > button,
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 7px; background: none; color: var(--hc-text); font: inherit; font-weight: 700; font-size: 15px; line-height: 1.25; cursor: pointer; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > button:hover,
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > label:hover { background: var(--hc-surface-2); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > button[aria-pressed="true"],
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > button[aria-checked="true"],
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > button[aria-selected="true"],
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > input:checked + label {
  background: var(--hc-accent); color: var(--hc-on-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--hc-accent) 35%, transparent);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg > input { position: absolute; opacity: 0; pointer-events: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg.is-compact > button,
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg.is-compact > label { min-height: 40px; padding: 8px 10px; font-size: 14px; }
/* Checkbox and radio [C26]: 20px, the control border, Cyan with a check when on. Toggle [C27]: 44 by 24. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-cbox,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="checkbox"]:not(.hc-toggle),
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; display: inline-grid; place-items: center;
  border: 2px solid var(--hc-border-control); border-radius: 4px; background: var(--hc-field); cursor: pointer;
}
:where(:root[data-theme^="lord-alan-v2"]) input[type="radio"].hc-cbox,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="radio"] { border-radius: 50%; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-cbox:checked,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="checkbox"]:not(.hc-toggle):checked,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="radio"]:checked { background: var(--hc-accent); border-color: var(--hc-accent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-cbox:checked::after,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="checkbox"]:not(.hc-toggle):checked::after {
  content: ''; width: 14px; height: 14px; background: var(--hc-on-accent); -webkit-mask: var(--hcx-check) center / contain no-repeat; mask: var(--hcx-check) center / contain no-repeat;
}
:where(:root[data-theme^="lord-alan-v2"]) input[type="radio"].hc-cbox:checked::after,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input[type="radio"]:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-on-accent); -webkit-mask: none; mask: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toggle,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input.hc-toggle {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 24px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--hc-field); border: 1px solid var(--hc-border-control); transition: background-color var(--hcb-dur-2), border-color var(--hcb-dur-2);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-toggle::after,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input.hc-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--hc-text-muted); transition: transform var(--hcb-dur-2) var(--hcb-ease-out); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toggle:checked,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input.hc-toggle:checked { background: var(--hc-accent); border-color: var(--hc-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--hc-accent) 35%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toggle:checked::after,
:where(:root[data-theme^="lord-alan-v2"]) .hc-check input.hc-toggle:checked::after { transform: translateX(20px); background: var(--hc-bg); }
/* Drop zone with drag-over, the scan band while detecting, and the loaded file chip. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-dropzone { position: relative; overflow: hidden; border: 2px dashed var(--hc-border-control); border-radius: var(--hc-radius-card); padding: 28px 18px; text-align: center; background: var(--hc-surface-1); transition: border-color var(--hcb-dur-2), background-color var(--hcb-dur-2); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-dropzone.is-over { border-color: var(--hc-accent); background: color-mix(in srgb, var(--hc-accent) 7%, var(--hc-surface-1)); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-dropzone-ring { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--hc-border-control); color: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-dropzone-ring svg { width: 24px; height: 24px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-scanband { position: absolute; left: 0; right: 0; height: 60px; top: -60px; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hc-link-strong) 25%, transparent), transparent); animation: hcb-scan 1.1s ease-in-out infinite; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-filechip { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 18px; padding: 10px 12px 10px 16px; border-radius: var(--hc-radius-control); border: 1px solid var(--hc-border-control); background: var(--hc-field); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-filechip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-filechip .hc-iconbtn { width: 32px; height: 32px; }

/* ================================================================ HC-1629 chips, source tags, filter pills, rep chips (5.6)
   Words always, never colour alone. Only four filled chips exist: Want, Way below market, Sign in again, PRO. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--hc-radius-chip, 4px); border: 1px solid currentColor;
  font: 700 11px/1 var(--hcb-font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--hc-text-muted); background: transparent;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--glow { color: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--ignite { color: var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-chip--ignite { color: var(--hc-bad); }   /* the Ignite fill is 3.3:1 as text on white */
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--uv { color: var(--hc-uv-text); border-color: color-mix(in srgb, var(--hc-uv) 70%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--chrome { color: var(--hc-chrome); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-chip--chrome { color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--ending { color: var(--hc-action); background: color-mix(in srgb, var(--hc-action) 12%, transparent); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-chip--ending { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: hcb-pulse 1.4s ease-in-out infinite; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--want { color: #fff; background: var(--hc-uv); border-color: var(--hc-uv); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--below { color: var(--hc-on-accent); background: var(--hc-accent); border-color: var(--hc-accent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--signin { color: var(--hc-on-action); background: var(--hc-action); border-color: var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chip--pro { color: var(--hc-on-accent); background: linear-gradient(90deg, var(--hc-accent), var(--hc-link-strong)); border-color: transparent; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-via { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: var(--hc-radius-chip, 4px); border: 1px solid; font: 700 11px/1 var(--hcb-font-mono); letter-spacing: .04em; white-space: nowrap; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-via--api { color: var(--hc-link-strong); border-color: color-mix(in srgb, var(--hc-link-strong) 60%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-via--signin { color: var(--hc-action); border-color: color-mix(in srgb, var(--hc-action) 60%, transparent); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-via--signin { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-via--agent { color: var(--hc-uv-text); border-color: color-mix(in srgb, var(--hc-uv) 75%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-via--off { color: var(--hc-text-muted); border-color: var(--hc-border-control); text-decoration: line-through; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-filters { display: flex; flex-wrap: wrap; gap: 8px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-filters > button,
:where(:root[data-theme^="lord-alan-v2"]) .hc-fpill {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hc-border-control); background: none; color: var(--hc-text-muted); font: 700 13px/1 var(--hc-font-body);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-filters > button[aria-pressed="true"],
:where(:root[data-theme^="lord-alan-v2"]) .hc-fpill[aria-pressed="true"] {
  border-color: var(--hc-link-strong); color: var(--hc-text); background: color-mix(in srgb, var(--hc-accent) 12%, transparent); box-shadow: inset 0 0 0 1px var(--hc-link-strong);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-filters .n,
:where(:root[data-theme^="lord-alan-v2"]) .hc-fpill .n { font-family: var(--hcb-font-mono); color: var(--hc-text); margin-right: 2px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-rep { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hc-border-control); color: var(--hc-text); font: 600 12px/1.2 var(--hc-font-body); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-rep--agent { color: var(--hc-uv-text); border-color: color-mix(in srgb, var(--hc-uv) 75%, transparent); }

/* ================================================================ HC-1630 progress, meter, stepper, score bar (5.7) */
:where(:root[data-theme^="lord-alan-v2"]) .hc-progress { height: 8px; border-radius: 8px; background: var(--hc-border); overflow: hidden; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-progress > i,
:where(:root[data-theme^="lord-alan-v2"]) .hc-progress > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--hc-deep), var(--hc-accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--hc-accent) 70%, transparent); transition: width .4s ease; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-progress.is-lg { height: 10px; max-width: 420px; margin-inline: auto; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-meterbox { padding: 14px 16px; border-radius: var(--hc-radius-control); background: var(--hc-surface-1); border: 1px solid var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-meterbox .hc-progress { margin-top: 8px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stepper-m { margin-bottom: 18px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stepper-m .t { font-size: 15px; margin-bottom: 8px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stepper-m .t b { font-weight: 800; font-family: var(--hcb-font-mono); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stepper { display: none; }
@media (min-width: 760px) {
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper-m { display: none; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li { display: flex; align-items: center; gap: 10px; flex: 1; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li:last-child { flex: 0 0 auto; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper .ring { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--hc-border-control); color: var(--hc-text-muted); background: var(--hc-bg); font: 700 13px var(--hcb-font-mono); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li.is-done .ring { border-color: var(--hc-accent); color: var(--hc-accent); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li[aria-current="step"] .ring { background: var(--hc-accent); border-color: var(--hc-link-strong); color: var(--hc-on-accent); box-shadow: var(--hc-glow); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper .sl { display: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li[aria-current="step"] .sl { display: inline; color: var(--hc-text); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper .bar { flex: 1; min-width: 12px; height: 2px; border-radius: 2px; background: var(--hc-border-control); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li.is-done .bar { background: linear-gradient(90deg, var(--hc-accent), var(--hc-deep)); }
}
@media (min-width: 1120px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper .sl { display: inline; color: var(--hc-text-muted); } :where(:root[data-theme^="lord-alan-v2"]) .hc-stepper > li.is-done .sl { color: var(--hc-link-strong); } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-score { position: relative; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--hc-action), var(--hc-chrome) 45%, var(--hc-accent)); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-score-mark { position: absolute; top: 50%; left: var(--v, 50%); width: 4px; height: 20px; margin: -10px 0 0 -2px; border-radius: 2px; background: var(--hc-text); box-shadow: 0 0 0 2px var(--hc-bg); }

/* ================================================================ HC-1631 overlays (5.10, 5.3)
   Every native <dialog> gets the scrim. A modal is .hc-modal; menus .hc-menu; the toast is HCShell.toast (5s, pauses on
   hover and focus, errors stay with role="alert"); the page toasts that predate it take its look. */
:where(:root[data-theme^="lord-alan-v2"]) dialog::backdrop { background: rgba(3, 6, 14, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-scrim-x { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(3, 6, 14, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 24px; color: var(--hc-text);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-card); box-shadow: var(--hcx-modal-shadow);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal-h h2 { margin: 0; font-size: 20px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal ol.hc-steps { list-style: none; counter-reset: s; margin: 14px 0 20px; padding: 0; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal ol.hc-steps > li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal ol.hc-steps > li::before { content: counter(s); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--hc-accent); color: var(--hc-link-strong); font: 700 13px var(--hcb-font-mono); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-modal-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-menu { min-width: 220px; padding: 6px; background: var(--hc-surface-1); border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-control); box-shadow: 0 15px 40px rgba(0, 0, 0, .25); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--hc-text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-menu-item:hover { background: var(--hc-surface-2); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-menu-item.is-danger { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-menu-h { padding: 6px 10px; color: var(--hc-text-muted); font: 700 11px var(--hcb-font-mono); letter-spacing: .1em; text-transform: uppercase; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-menu hr { border: 0; border-top: 1px solid var(--hc-border); margin: 6px 0; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toast,
:where(:root[data-theme^="lord-alan-v2"]) #toast,
:where(:root[data-theme^="lord-alan-v2"]) .it-toast {
  background: var(--hc-surface-2) !important; color: var(--hc-text) !important; border: 1px solid var(--hc-accent) !important; box-shadow: var(--hc-glow) !important;
  border-radius: var(--hc-radius-control) !important; font-weight: 600; font-size: 15px;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-toast.is-error,
:where(:root[data-theme^="lord-alan-v2"]) #toast.is-error,
:where(:root[data-theme^="lord-alan-v2"]) .it-toast.is-error,
:where(:root[data-theme^="lord-alan-v2"]) #toast.bad { border-color: var(--hc-action) !important; box-shadow: var(--hc-glow-action) !important; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 80; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toast > svg { width: 20px; height: 20px; flex: none; color: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-toast.is-error > svg { color: var(--hc-action); }
@media (min-width: 760px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-toast { bottom: 28px; } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--hc-surface-1); border-left: 1px solid var(--hc-border-control); box-shadow: -20px 0 60px rgba(0, 0, 0, .45); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chatmsg { max-width: 88%; padding: 12px 14px; border-radius: 14px; font-size: 15px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chatmsg--bot { background: var(--hc-surface-2); border: 1px solid var(--hc-border); border-top-left-radius: 4px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chatmsg--me { align-self: flex-end; background: var(--hc-accent); color: var(--hc-on-accent); border-top-right-radius: 4px; font-weight: 600; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-sugs { display: flex; flex-wrap: wrap; gap: 8px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-sugs > button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--hc-border-control); background: none; color: var(--hc-link-strong); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
/* The tour (HC-302) is the reusable coach and spotlight: a 2px Ignite card, the spotlight ringed in Cyan. */
:where(:root[data-theme^="lord-alan-v2"]) .tr-card { border: 2px solid var(--hc-action); box-shadow: var(--hc-glow-action), 0 20px 50px rgba(0, 0, 0, .5); border-radius: var(--hc-radius-card); }
:where(:root[data-theme^="lord-alan-v2"]) .tr-hole { outline: 0; box-shadow: 0 0 0 9999px rgba(3, 6, 14, .72), 0 0 0 2px var(--hc-accent), var(--hc-glow); border-radius: var(--hc-radius-card); transition: all .3s ease; }
:where(:root[data-theme^="lord-alan-v2"]) .tr-count { font-family: var(--hcb-font-mono); color: var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .tr-count { color: var(--hc-bad); }

/* ================================================================ HC-1633 panels, rows, option cards, stat tiles, Lens Frame,
   thumbnails and the states (5.4, 5.11, 6.4, 6.5) */
:where(:root[data-theme^="lord-alan-v2"]) .hc-panel { position: relative; margin-bottom: 18px; padding: 20px; background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); }
@media (min-width: 760px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-panel { padding: 24px; } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-panel-h { margin-bottom: 16px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-panel-h h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; font-weight: 700; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-sub { margin: 0; color: var(--hc-text-muted); font-size: 16px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-group-label { font: 700 12px/1 var(--hc-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--hc-text-muted); padding: 22px 0 8px; }
/* Rows, not boxes: the default for every list. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-rows > * { padding: 14px 0; border-top: 1px solid var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-rows > *:first-child { border-top: 0; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-rows > .is-paused { opacity: .6; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-rows > .is-gone,
:where(:root[data-theme^="lord-alan-v2"]) .is-gone { opacity: .4; pointer-events: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-row-t { font-weight: 800; font-size: 17px; line-height: 1.3; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-row-m { font-size: 14px; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-row-m b,
:where(:root[data-theme^="lord-alan-v2"]) .hc-num { font-family: var(--hcb-font-mono); font-variant-numeric: tabular-nums; color: var(--hc-text); font-weight: 700; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-opts { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 760px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-opts { grid-template-columns: 1fr 1fr; } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-opt { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 20px; text-align: left; text-decoration: none; color: var(--hc-text); background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-opt:hover { border-color: var(--hc-border-control); box-shadow: 0 0 0 1px var(--hc-border-control); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-opt h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.35; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-opt p { margin: 0; color: var(--hc-text-muted); font-size: 14px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-opt.is-rec { border: 2px solid var(--hc-accent); box-shadow: var(--hc-glow); background: linear-gradient(180deg, color-mix(in srgb, var(--hc-accent) 8%, transparent), transparent 70%), var(--hc-surface-1); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-stats { grid-template-columns: repeat(4, 1fr); } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stat { padding: 16px; text-align: left; border-radius: var(--hc-radius-control); background: var(--hc-surface-1); border: 1px solid var(--hc-border); color: var(--hc-text); }
:where(:root[data-theme^="lord-alan-v2"]) a.hc-stat,
:where(:root[data-theme^="lord-alan-v2"]) button.hc-stat { text-decoration: none; font: inherit; cursor: pointer; }
:where(:root[data-theme^="lord-alan-v2"]) a.hc-stat:hover,
:where(:root[data-theme^="lord-alan-v2"]) button.hc-stat:hover { border-color: var(--hc-accent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stat-v { margin-bottom: 8px; font-family: var(--hc-font-figure); font-weight: var(--hc-weight-figure); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stat-v.is-o { color: var(--hc-action); } :where(:root[data-theme^="lord-alan-v2"]) .hc-stat-v.is-u { color: var(--hc-uv-text); } :where(:root[data-theme^="lord-alan-v2"]) .hc-stat-v.is-g { color: var(--hc-chrome); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-stat-v.is-o { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-stat-l { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-valdet { display: grid; gap: 14px; padding: 16px; border-radius: var(--hc-radius-control); border: 1px solid var(--hc-accent); background: color-mix(in srgb, var(--hc-accent) 6%, transparent); }
@media (min-width: 700px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-valdet { grid-template-columns: repeat(3, 1fr); } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-valdet .v { font-family: var(--hc-font-figure); font-weight: var(--hc-weight-figure); font-size: 26px; color: var(--hc-link-strong); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-valdet ul { margin: 6px 0 0; padding: 0; list-style: none; font-family: var(--hcb-font-mono); font-size: 13px; }
/* The Lens Frame: an icon in a circle with a 2px border. Rec = Cyan with a glow, neutral = control border, agent = UV. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe { --s: 44px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid var(--hc-border-control); color: var(--hc-link-strong); background: var(--hc-surface-2); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe svg { width: calc(var(--s) * .5); height: calc(var(--s) * .5); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-52 { --s: 52px; } :where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-64 { --s: 64px; } :where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-72 { --s: 72px; } :where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-84 { --s: 84px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-rec { border-color: var(--hc-accent); box-shadow: var(--hc-glow); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--hc-link-strong) 35%, transparent), var(--hc-deep) 70%); color: #fff; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-agent { border-color: var(--hc-uv); color: var(--hc-uv-text); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-error { border-color: var(--hc-action); color: var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-lensframe.is-art { border: 0; background: var(--hcb-lens) center / cover no-repeat; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--hc-accent) 60%, transparent)); }
/* Thumbnails: the real photo when there is one; otherwise the mockup's abstract placeholder, never a cover or character. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-thumb { position: relative; flex: none; overflow: hidden; border-radius: 6px; border: 1px solid var(--hc-border-control); aspect-ratio: 2 / 3;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), transparent 30%), radial-gradient(rgba(6, 10, 23, .35) 1.2px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(160deg, var(--a, var(--hc-accent)), var(--b, var(--hc-deep))); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-thumb::after { content: ''; position: absolute; left: 14%; right: 14%; top: 12%; height: 14%; border-radius: 3px; background: rgba(6, 10, 23, .55); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-thumb.is-missing { background: repeating-linear-gradient(135deg, var(--hc-field) 0 8px, var(--hc-surface-2) 8px 16px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-thumb.is-missing::after { display: none; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--hc-border) 0, var(--hc-border-control) 50%, var(--hc-border) 100%) 0 0 / 200% 100%; animation: hcb-sh 1.2s linear infinite; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-empty { padding: 26px 10px; text-align: center; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-empty .hc-lensframe { margin: 0 auto 10px; opacity: .9; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-empty h3 { margin: 0 0 4px; color: var(--hc-text); font-size: 17px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-empty p { margin: 0 0 14px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-error-panel { display: grid; justify-items: center; gap: 8px; padding: 26px 16px; text-align: center; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-error-panel h3 { margin: 0; font-size: 17px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-error-panel p { margin: 0 0 6px; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--hc-radius-control); border: 1px solid var(--hc-uv); background: color-mix(in srgb, var(--hc-uv) 12%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-note > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--hc-uv-text); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-note.is-warn { border-color: var(--hc-action); background: color-mix(in srgb, var(--hc-action) 8%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-note.is-warn > svg { color: var(--hc-action); }
/* 1384 (Terry, 19 Oct): "What is the item I have circled?" An empty status note (the item page photo-save message) drew as a blank purple box. Nothing to say, no box. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-note:empty { display: none; }

/* ================================================================ HC-1634 hero bands, completion hero and burst (5.8, 5.9)
   Hub pages only. Lockup on Home and Import, radar on Deal Scout and Dashboard, plain on Collection and Insights [C9]; every
   hub has the neon bottom rule; the Ignite corner wash is Deal Scout's only. They stay dark in the light theme. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero,
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-hero {
  position: relative; overflow: hidden; margin-bottom: 20px; padding: 22px 20px 20px; border-radius: var(--hc-radius-card); border: 1px solid var(--hc-border);
  background: var(--hc-wash-hero), var(--hc-surface-1); color: var(--hc-text);
}
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-hero,
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-done-hero {
  --hc-text: #EAF4FF; --hc-text-muted: #9DB0D4; --hc-field: #0A1024; --hc-border: #22305E; --hc-border-control: #5568AE; --hc-link-strong: #6FE3FF;
  --hc-surface-1: #0E1630; --hc-surface-2: #121D3E; --hc-accent: #22B8FF; --hc-glow: 0 0 24px rgba(34,184,255,.45);
  --hc-wash-hero: radial-gradient(120% 140% at 100% 0%, rgba(11,79,216,.55), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(91,43,224,.25), transparent 60%);
  background-color: #060A17; color: #EAF4FF; border-color: #22305E;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--hc-accent) 30%, var(--hc-action) 70%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero h1 {
  position: relative; margin: 0 0 10px; color: var(--hc-text); line-height: 1; font-size: clamp(34px, 8vw, 56px);
  font-family: var(--hc-font-hero); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; text-shadow: var(--hc-text-glow); overflow-wrap: anywhere;
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero p { position: relative; margin: 0 0 16px; max-width: 52ch; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero-grid { position: relative; display: grid; gap: 10px; align-items: center; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero-art { width: min(300px, 78vw); justify-self: center; margin: -6px 0 4px; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--hc-accent) 35%, transparent)); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-hero--radar { background: radial-gradient(110% 140% at 100% 0%, color-mix(in srgb, var(--hc-deep) 50%, transparent), transparent 55%), radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--hc-action) 12%, transparent), transparent 60%), var(--hc-surface-1); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-hero--radar { background-color: #060A17; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-heroradar { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; opacity: .55; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 28px, color-mix(in srgb, var(--hc-link-strong) 18%, transparent) 29px 30px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-heroradar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 80%, color-mix(in srgb, var(--hc-link-strong) 35%, transparent) 100%); animation: hcb-spin 6s linear infinite; }
@media (min-width: 760px) {
  :where(:root[data-theme^="lord-alan-v2"]) .hc-hero { padding: 30px 32px; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-hero-grid { grid-template-columns: 1fr auto; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-hero-art { order: 2; width: 300px; margin: -10px -6px -10px 0; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-heroradar { right: -20px; top: -40px; width: 320px; height: 320px; }
}
@media (min-width: 1120px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-hero-art { width: 360px; } }
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-hero { display: grid; gap: 18px; padding: 24px; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--hc-deep) 50%, transparent), transparent 60%), var(--hc-surface-1); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-top { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-big { margin: 0; font: 400 clamp(30px, 6vw, 46px)/1.05 var(--hc-font-hero); text-transform: uppercase; letter-spacing: .02em; text-shadow: var(--hc-text-glow); overflow-wrap: anywhere; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-big .n { color: var(--hc-link-strong); font-variant-numeric: tabular-nums; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-hero .hc-stat { background: rgba(6, 10, 23, .55); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-burst {
  position: absolute; right: -20px; top: -10px; z-index: 1; width: 92px; height: 74px; display: grid; place-items: center; padding: 6px 10px;
  font: 400 18px var(--hc-font-hero); color: #060A17; background: var(--hc-action); transform: rotate(8deg); box-shadow: var(--hc-glow-action);
  clip-path: polygon(50% 0, 62% 22%, 86% 8%, 80% 34%, 100% 42%, 82% 58%, 96% 82%, 70% 76%, 60% 100%, 46% 80%, 24% 96%, 24% 72%, 0 70%, 16% 52%, 2% 30%, 26% 30%, 20% 6%, 40% 20%);
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-done-lens { position: relative; }

/* ================================================================ HC-1637 data display (6.3, 6.2) */
:where(:root[data-theme^="lord-alan-v2"]) .hc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hc-border); background: color-mix(in srgb, var(--hc-surface-1) 95%, transparent); color: var(--hc-text-muted); font: 700 12px/1.2 var(--hc-font-body); letter-spacing: .14em; text-transform: uppercase; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table td { padding: 12px; border-bottom: 1px solid var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table .num,
:where(:root[data-theme^="lord-alan-v2"]) .hc-table th.num { text-align: right; font-family: var(--hcb-font-mono); font-variant-numeric: tabular-nums; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table tbody tr:hover td { background: var(--hc-surface-2); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table tr[aria-selected="true"] td { background: color-mix(in srgb, var(--hc-accent) 6%, transparent); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-table tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--hc-accent); }
@media (max-width: 759px) {
  /* Below 760px a table becomes rows: each cell on its own line, labelled from data-label. */
  :where(:root[data-theme^="lord-alan-v2"]) .hc-table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-table.is-stack tr { display: block; padding: 12px 0; border-top: 1px solid var(--hc-border); }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-table.is-stack td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-table.is-stack td[data-label]::before { content: attr(data-label); color: var(--hc-text-muted); font-size: 14px; }
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-gcard { display: grid; gap: 8px; padding: 10px; text-decoration: none; color: var(--hc-text); background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-control); transition: transform var(--hcb-dur-2), border-color var(--hcb-dur-2); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-gcard:hover { border-color: var(--hc-border-control); transform: translateY(-2px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-gcard .hc-thumb { width: 100%; aspect-ratio: 3 / 4; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-gcard-t { font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-gcard-p { font: 700 14px var(--hcb-font-mono); font-variant-numeric: tabular-nums; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-slideshow { position: relative; display: grid; place-items: center; min-height: 320px; padding: 24px; background: var(--hc-bg); border-radius: var(--hc-radius-card); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-slideshow img { max-height: 60vh; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-slide-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--hc-radius-control); background: color-mix(in srgb, var(--hc-surface-1) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-slide-cap .pos { margin-left: auto; font-family: var(--hcb-font-mono); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); margin: 0; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv > dt,
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv > dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv > dt { color: var(--hc-text-muted); font-size: 14px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv > dd { font-size: 15px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv > dt:first-of-type,
:where(:root[data-theme^="lord-alan-v2"]) .hc-kv > dt:first-of-type + dd { border-top: 0; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-readout-l { font: 700 12px/1 var(--hc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-readout-v { margin: 6px 0; font-family: var(--hc-font-figure); font-weight: var(--hc-weight-figure); font-size: 30px; color: var(--hc-link-strong); font-variant-numeric: tabular-nums; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-readout-r { color: var(--hc-text-muted); font-size: 14px; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-readout-r b { font-family: var(--hcb-font-mono); color: var(--hc-text); }
/* Confidence [C34]: Glow at 70 and over, Chrome 40 to 69, Ignite under 40. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-conf { font-family: var(--hcb-font-mono); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-conf.is-hi { color: var(--hc-link-strong); } :where(:root[data-theme^="lord-alan-v2"]) .hc-conf.is-mid { color: var(--hc-chrome); } :where(:root[data-theme^="lord-alan-v2"]) .hc-conf.is-lo { color: var(--hc-action); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-conf.is-mid { color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"][data-mode="light"]) .hc-conf.is-lo { color: var(--hc-bad); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chart-axis { font: 12px var(--hcb-font-mono); fill: var(--hc-text-muted); color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-chart-grid { stroke: var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14px; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: var(--c, var(--hcc-1)); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-more { display: grid; justify-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hc-border); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-showing { font-size: 14px; color: var(--hc-text-muted); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-showing b { font-family: var(--hcb-font-mono); color: var(--hc-text); }
/* Sub-tabs [C31]: a segmented control on a phone, underline tabs from 760px. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-subtabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; background: var(--hc-field); border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-control); }
:where(:root[data-theme^="lord-alan-v2"]) .hc-subtabs > [role="tab"] { flex: 1 0 auto; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 7px; background: none; color: var(--hc-text-muted); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-subtabs > [role="tab"][aria-selected="true"] { background: var(--hc-accent); color: var(--hc-on-accent); box-shadow: none; }
@media (min-width: 760px) {
  :where(:root[data-theme^="lord-alan-v2"]) .hc-subtabs { gap: 24px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--hc-border); border-radius: 0; overflow: visible; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-subtabs > [role="tab"] { flex: 0 0 auto; padding: 10px 0; border-radius: 0; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-subtabs > [role="tab"][aria-selected="true"] { background: none; color: var(--hc-text); box-shadow: inset 0 -3px 0 var(--hc-accent), 0 6px 14px -10px var(--hc-accent); }
}
:where(:root[data-theme^="lord-alan-v2"]) .hc-viewswitch > button > svg { width: 20px; height: 20px; }
@media (max-width: 759px) { :where(:root[data-theme^="lord-alan-v2"]) .hc-viewswitch > button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Icons (HC-1632): the shared sprite, /hc-icons.svg (107 icons), through HCShell.icon(name). The stroke is set on the <svg>
   because symbols do not inherit it from a hidden sprite. */
:where(:root[data-theme^="lord-alan-v2"]) .hc-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:where(:root[data-theme^="lord-alan-v2"]) .hc-ico.is-16 { width: 16px; height: 16px; } :where(:root[data-theme^="lord-alan-v2"]) .hc-ico.is-22 { width: 22px; height: 22px; } :where(:root[data-theme^="lord-alan-v2"]) .hc-ico.is-24 { width: 24px; height: 24px; }

@media (forced-colors: active) {
  :where(:root[data-theme^="lord-alan-v2"]) .hc-chip,
:where(:root[data-theme^="lord-alan-v2"]) .hc-via,
:where(:root[data-theme^="lord-alan-v2"]) .hc-filters > button,
:where(:root[data-theme^="lord-alan-v2"]) .hc-fpill,
:where(:root[data-theme^="lord-alan-v2"]) .hc-toggle,
:where(:root[data-theme^="lord-alan-v2"]) .hc-cbox,
:where(:root[data-theme^="lord-alan-v2"]) .hc-seg { border-color: CanvasText; forced-color-adjust: auto; }
  :where(:root[data-theme^="lord-alan-v2"]) .hc-progress > i,
:where(:root[data-theme^="lord-alan-v2"]) .hc-progress > span { background: Highlight; }
}