/*
 * Hook Comparison Tool — hook-compare.css v2.0
 *
 * All rules scoped under #hook-compare-root.
 *
 * Aesthetic: matches garrenwood.com — dark charcoal ground,
 * warm gold accents, off-white text, technical precision.
 * Mirrors the site's .gw-entry table and spec-bar language.
 */

/* ── Custom properties ──────────────────────────────────────── */
#hook-compare-root {
    /* Backgrounds */
    --hc-bg:         #1c1c1c;
    --hc-bg-mid:     #232323;
    --hc-bg-raised:  #2a2a2a;
    --hc-bg-hover:   #303030;
    --hc-bg-input:   #252525;

    /* Text */
    --hc-text:       #e8e4dc;   /* slightly brighter primary text */
    --hc-text-mid:   #a8a49c;   /* raised from #8a8680 — secondary labels, subtitle */
    --hc-text-faint: #888480;   /* raised from #787470 — meta text, placeholders */

    /* Gold accent — garrenwood.com's signature warm amber */
    --hc-gold:       #c8a050;
    --hc-gold-light: #d4b468;
    --hc-gold-dim:   #3a2c14;

    /* Difference highlight */
    --hc-diff-bg:    #26200e;
    --hc-diff-text:  #d4b468;

    /* Borders */
    --hc-border:     #303030;
    --hc-border-dark: #2a2a2a;
    --hc-border-mid: #3e3e3e;
    --hc-border-hi:  #4e4a46;

    /* Effects */
    --hc-shadow:     0 2px 12px rgba(0, 0, 0, 0.5);
    --hc-shadow-lg:  0 6px 28px rgba(0, 0, 0, 0.7);
    --hc-radius:     3px;
    --hc-radius-lg:  6px;

    /* Fonts — system stack only, no external dependency */
    --hc-serif:  'Georgia', 'Times New Roman', serif;
    --hc-mono:   'Courier New', 'Courier', monospace;
    --hc-ui:     system-ui, -apple-system, sans-serif;

    /* Per-hook accent color (overridden inline) */
    --hc-hook-color: #4a9fd4;

    box-sizing: border-box;
    font-family: var(--hc-ui);
    color: var(--hc-text);
    background: var(--hc-bg);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius-lg);
    overflow: hidden;

    /* Break out of the theme's narrow content column to use more of the
       viewport. Centers correctly at any width via translateX(-50%).
       Capped so it doesn't get unwieldy on ultra-wide monitors. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(95vw, 1640px);
    max-width: 95vw;
}

#hook-compare-root *,
#hook-compare-root *::before,
#hook-compare-root *::after {
    box-sizing: inherit;
}

/* ── Tool wrapper ───────────────────────────────────────────── */
#hook-compare-root .hc-tool {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

/* ── Header ─────────────────────────────────────────────────── */
#hook-compare-root .hc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 15px;
    border-bottom: 1px solid var(--hc-border-mid);
    background: var(--hc-bg-mid);
    flex-wrap: wrap;
}

#hook-compare-root .hc-title-block {
    flex: 1;
    min-width: 0;
}

#hook-compare-root .hc-title {
    font-family: var(--hc-serif);
    font-size: 1.288rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hc-text);
    margin: 0 0 3px;
    line-height: 1.2;
    padding: 0 !important;
    border: none !important;
}

#hook-compare-root .hc-subtitle {
    font-size: 0.84rem;
    color: var(--hc-text-mid);
    margin: 0;
    font-style: italic;
}

/* ── View tabs ──────────────────────────────────────────────── */
#hook-compare-root .hc-tabs {
    display: flex;
    gap: 2px;
    background: var(--hc-bg);
    padding: 3px;
    border-radius: var(--hc-radius);
    border: 1px solid var(--hc-border-mid);
}

#hook-compare-root .hc-tab {
    padding: 5px 14px;
    font-size: 0.84rem;
    font-family: var(--hc-ui);
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: var(--hc-radius);
    cursor: pointer;
    color: var(--hc-text-mid);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#hook-compare-root .hc-tab:hover {
    background: var(--hc-bg-hover);
    color: var(--hc-text);
}

#hook-compare-root .hc-tab--active {
    background: var(--hc-bg-raised);
    color: var(--hc-gold);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

#hook-compare-root .hc-export-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-family: var(--hc-ui);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hc-gold);
    background: transparent;
    border: 1px solid var(--hc-border-hi);
    border-radius: var(--hc-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#hook-compare-root .hc-export-btn:hover {
    background: rgba(200, 160, 80, 0.1);
    border-color: var(--hc-gold);
}

#hook-compare-root .hc-reset-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-family: var(--hc-ui);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hc-text-mid);
    background: transparent;
    border: 1px solid var(--hc-border-dark);
    border-radius: var(--hc-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#hook-compare-root .hc-reset-btn:hover {
    background: rgba(180, 80, 80, 0.12);
    border-color: #b45252;
    color: #c26060;
}

/* ── Size selector ──────────────────────────────────────────── */
#hook-compare-root .hc-size-dd {
    display: block;
    margin-top: 8px;
    width: 100%;
}
#hook-compare-root .hc-th-hook .hc-size-dd .hc-dropdown-toggle {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hc-gold);
}
#hook-compare-root .hc-hook-panel-size {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
}
#hook-compare-root .hc-hook-panel-size .hc-size-label {
    font-size: 0.78rem;
    color: var(--hc-text-mid);
    flex: 0 0 auto;
}
#hook-compare-root .hc-hook-panel-size .hc-size-dd { margin-top: 0; flex: 1; }
#hook-compare-root .hc-hook-panel-size .hc-dropdown-toggle { width: 100%; max-width: none; }

/* ── Selector panel ─────────────────────────────────────────── */
#hook-compare-root .hc-selector {
    border-bottom: 1px solid var(--hc-border-mid);
    background: var(--hc-bg-mid);
}

#hook-compare-root .hc-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--hc-border);
    background: var(--hc-bg);
}

#hook-compare-root .hc-filter-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#hook-compare-root .hc-facet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#hook-compare-root .hc-search {
    font-family: var(--hc-ui);
    font-size: 0.896rem;
    color: var(--hc-text);
    background: var(--hc-bg-input);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 5px 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#hook-compare-root .hc-search {
    flex: 1;
    min-width: 140px;
    max-width: 260px;
}

/* ── Custom manufacturer dropdown ───────────────────────────── */
#hook-compare-root .hc-dropdown {
    position: relative;
    flex: 0 0 auto;
}

#hook-compare-root .hc-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    max-width: 100%;
    font-family: var(--hc-ui);
    font-size: 0.896rem;
    color: var(--hc-text);
    background: var(--hc-bg-input);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 6px 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
}

#hook-compare-root .hc-dropdown-toggle:hover {
    border-color: var(--hc-border-hi);
}

#hook-compare-root .hc-dropdown-toggle:focus {
    border-color: var(--hc-gold);
    box-shadow: 0 0 0 2px rgba(200, 160, 80, 0.15);
}

#hook-compare-root .hc-dropdown-current {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hook-compare-root .hc-dropdown-arrow {
    flex-shrink: 0;
    color: var(--hc-text-mid);
    font-size: 0.784rem;
    transition: transform 0.15s;
}

#hook-compare-root .hc-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--hc-bg-raised);
    border: 1px solid var(--hc-border-hi);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-lg);
    z-index: 50;
    scrollbar-width: thin;
    scrollbar-color: var(--hc-border-mid) var(--hc-bg-raised);
}

#hook-compare-root .hc-dropdown-menu--open {
    display: block;
}

#hook-compare-root .hc-dropdown-menu::-webkit-scrollbar { width: 6px; }
#hook-compare-root .hc-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--hc-border-mid);
    border-radius: 3px;
}

#hook-compare-root .hc-dropdown-opt {
    padding: 8px 14px;
    font-size: 0.896rem;
    color: var(--hc-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

#hook-compare-root .hc-dropdown-opt:hover {
    background: var(--hc-bg-hover);
}

#hook-compare-root .hc-dropdown-opt--active {
    color: var(--hc-gold);
    font-weight: 700;
}

/* Compact facet dropdowns (manufacturer + spec facets in the facet row) */
#hook-compare-root .hc-dropdown--compact .hc-dropdown-toggle {
    width: auto;
    min-width: 124px;
    max-width: 200px;
    padding: 5px 10px;
    font-size: 0.84rem;
    gap: 6px;
}

/* Highlight a facet that is actively filtering */
#hook-compare-root .hc-dropdown--active .hc-dropdown-toggle {
    border-color: var(--hc-gold);
    background: rgba(200, 160, 80, 0.08);
}
#hook-compare-root .hc-dropdown--active .hc-dropdown-current {
    color: var(--hc-gold);
    font-weight: 700;
}

#hook-compare-root .hc-clear-filters {
    font-family: var(--hc-ui);
    font-size: 0.82rem;
    color: var(--hc-text-mid);
    background: transparent;
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
#hook-compare-root .hc-clear-filters:hover {
    color: var(--hc-gold);
    border-color: var(--hc-gold);
}

#hook-compare-root .hc-search::placeholder {
    color: var(--hc-text-mid);
    opacity: 1;   /* Firefox reduces placeholder opacity by default */
}

#hook-compare-root .hc-search:focus {
    border-color: var(--hc-gold);
    box-shadow: 0 0 0 2px rgba(200, 160, 80, 0.15);
}

/* Right-aligned cluster in the filter bar (copy-link + count) */
#hook-compare-root .hc-filter-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

#hook-compare-root .hc-selected-count {
    font-size: 0.806rem;
    color: var(--hc-gold);
    font-family: var(--hc-mono);
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.04em;
}

#hook-compare-root .hc-share-btn {
    font-family: var(--hc-ui);
    font-size: 0.784rem;
    color: var(--hc-text-mid);
    background: var(--hc-bg-input);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

#hook-compare-root .hc-share-btn:hover {
    background: var(--hc-bg-hover);
    color: var(--hc-gold);
    border-color: var(--hc-gold);
}

#hook-compare-root .hc-share-btn--done {
    color: var(--hc-gold);
    border-color: var(--hc-gold);
}

/* ── Hook grid ──────────────────────────────────────────────── */
/* Outer container scrolls; inner .hc-grid-items handles the flex layout
   so the status line can sit above the wrapped item rows. */
#hook-compare-root .hc-hook-grid {
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--hc-border-mid) var(--hc-bg-mid);
}

#hook-compare-root .hc-hook-grid::-webkit-scrollbar { width: 5px; }
#hook-compare-root .hc-hook-grid::-webkit-scrollbar-track { background: var(--hc-bg-mid); }
#hook-compare-root .hc-hook-grid::-webkit-scrollbar-thumb {
    background: var(--hc-border-mid);
    border-radius: 3px;
}

/* Status line above the grid items */
#hook-compare-root .hc-grid-status {
    font-size: 0.762rem;
    color: var(--hc-text-mid);
    font-family: var(--hc-mono);
    letter-spacing: 0.02em;
    padding: 3px 4px 7px;
    position: sticky;
    top: 0;
    background: var(--hc-bg-mid);
    z-index: 2;
}

/* Flex wrapper for the actual hook cards */
#hook-compare-root .hc-grid-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

/* ── Hook item ──────────────────────────────────────────────── */
#hook-compare-root .hc-hook-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px 7px 9px;
    margin: 3px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    cursor: pointer;
    background: var(--hc-bg);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    position: relative;
    min-width: 0;
    flex: 0 0 calc(50% - 6px);
    user-select: none;
}

@media (min-width: 680px) {
    #hook-compare-root .hc-hook-item { flex: 0 0 calc(33.333% - 6px); }
}
@media (min-width: 1000px) {
    #hook-compare-root .hc-hook-item { flex: 0 0 calc(25% - 6px); }
}

#hook-compare-root .hc-hook-item:hover {
    border-color: var(--hc-border-hi);
    background: var(--hc-bg-raised);
}

#hook-compare-root .hc-hook-item--selected {
    border-color: var(--hc-hook-color);
    box-shadow: 0 0 0 1px var(--hc-hook-color);
    background: var(--hc-bg-raised);
}

#hook-compare-root .hc-hook-item--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Colour bar for selected items */
#hook-compare-root .hc-item-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--hc-hook-color);
    border-radius: var(--hc-radius) 0 0 var(--hc-radius);
}

/* ── Thumbnail ──────────────────────────────────────────────── */
#hook-compare-root .hc-thumb {
    width: 50px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--hc-bg-mid);
    border-radius: 2px;
}

#hook-compare-root .hc-thumb svg { width: 100%; height: 100%; display: block; }

#hook-compare-root .hc-thumb-placeholder {
    width: 100%; height: 100%;
    background: var(--hc-bg-raised);
    border-radius: 2px;
    animation: hc-pulse 1.6s ease-in-out infinite;
}

/* No SVG configured — muted dash glyph */
#hook-compare-root .hc-thumb-none {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hc-text-faint);
    font-size: 1.12rem;
    background: repeating-linear-gradient(
        45deg,
        var(--hc-bg-mid),
        var(--hc-bg-mid) 4px,
        var(--hc-bg-raised) 4px,
        var(--hc-bg-raised) 8px
    );
    border-radius: 2px;
}

#hook-compare-root .hc-thumb-mini {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-line;
    line-height: 1.2;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #e8c178;
    background: rgba(224, 179, 92, 0.10);
    border: 1px dashed rgba(224, 179, 92, 0.4);
    border-radius: 2px;
}

#hook-compare-root .hc-item-mini-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #e8c178;
    background: rgba(224, 179, 92, 0.16);
    border: 1px solid rgba(224, 179, 92, 0.45);
    border-radius: 3px;
    vertical-align: middle;
}

@keyframes hc-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.8; }
}

/* ── Item label ─────────────────────────────────────────────── */
#hook-compare-root .hc-item-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

#hook-compare-root .hc-item-name {
    font-size: 0.874rem;
    font-weight: 600;
    color: var(--hc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hook-compare-root .hc-item-meta {
    font-size: 0.739rem;
    color: var(--hc-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hook-compare-root .hc-item-check {
    font-size: 0.806rem;
    color: var(--hc-hook-color);
    font-weight: 700;
    flex-shrink: 0;
}

#hook-compare-root .hc-item-similar {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 18px;
    text-align: center;
    font-size: 0.95rem;
    border: 1px solid var(--hc-border-mid);
    border-radius: 50%;
    background: var(--hc-bg-raised);
    color: var(--hc-text-mid);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
#hook-compare-root .hc-hook-item:hover .hc-item-similar { opacity: 0.85; }
#hook-compare-root .hc-item-similar:hover {
    opacity: 1;
    color: var(--hc-gold);
    border-color: var(--hc-gold);
}
/* Touch devices have no hover — keep the action discoverable */
@media (hover: none) {
    #hook-compare-root .hc-item-similar { opacity: 0.6; }
}

/* ── Content area ───────────────────────────────────────────── */
#hook-compare-root .hc-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Empty state ────────────────────────────────────────────── */
#hook-compare-root .hc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 24px;
    color: var(--hc-text-faint);
    gap: 12px;
}

#hook-compare-root .hc-empty-icon {
    font-size: 2.24rem;
    opacity: 0.3;
    line-height: 1;
}

#hook-compare-root .hc-empty-text {
    font-size: 0.918rem;
    font-style: italic;
    margin: 0;
}

#hook-compare-root .hc-empty-filter {
    padding: 20px 24px;
    font-size: 0.896rem;
    color: var(--hc-text-mid);
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
#hook-compare-root .hc-empty-filter p { margin: 0; }
#hook-compare-root .hc-empty-filter .hc-clear-filters { font-style: normal; }

/* ── Loading / error ────────────────────────────────────────── */
#hook-compare-root .hc-loading,
#hook-compare-root .hc-error {
    padding: 20px 24px;
    font-size: 0.896rem;
    color: var(--hc-text-mid);
    font-style: italic;
}

#hook-compare-root .hc-error {
    color: #e07070;
    background: #2a1515;
}

/* ══════════════════════════════════════════════════════════════
   COMPARISON TABLE
══════════════════════════════════════════════════════════════ */

#hook-compare-root .hc-table-wrap {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hc-border-mid) var(--hc-bg);
}

#hook-compare-root .hc-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.896rem;
    table-layout: fixed;
    margin: 0 !important;
    border: none !important;
}

#hook-compare-root .hc-compare-table th,
#hook-compare-root .hc-compare-table td {
    border: none;
    border-bottom: 1px solid var(--hc-border);
    padding: 0;
    vertical-align: top;
    text-align: left;
}

/* Feature label column */
#hook-compare-root .hc-th-field,
#hook-compare-root .hc-td-field {
    width: 126px;
    min-width: 100px;
    font-size: 0.762rem;
    font-weight: 600;
    color: var(--hc-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: var(--hc-bg-mid);
    padding: 9px 12px;
    border-right: 1px solid var(--hc-border-mid);
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Hook column headers */
#hook-compare-root .hc-th-hook {
    background: var(--hc-bg);
    padding: 0;
    border-right: 1px solid var(--hc-border);
    border-bottom: 2px solid var(--hc-hook-color) !important;
    min-width: 217px;
}

/* Consensus column */
#hook-compare-root .hc-th-consensus,
#hook-compare-root .hc-td-consensus {
    width: 64px;
    min-width: 64px;
    text-align: center;
    padding: 8px 6px;
    border-right: 1px solid var(--hc-border-mid);
    background: var(--hc-bg-mid);
}
#hook-compare-root .hc-th-consensus {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--hc-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#hook-compare-root .hc-consensus-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    font-size: 0.74rem;
    font-weight: 700;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    border-radius: 10px;
    cursor: default;
}
#hook-compare-root .hc-consensus-pill--full     { background: rgba(80, 190, 120, 0.18);  color: #5ec07a; }
#hook-compare-root .hc-consensus-pill--majority { background: rgba(200, 160, 80, 0.20);  color: #d4b468; }
#hook-compare-root .hc-consensus-pill--split    { background: rgba(150, 150, 150, 0.12); color: var(--hc-text-mid); }
#hook-compare-root .hc-consensus-pill--none     { background: rgba(225, 90, 90, 0.18);   color: #e08080; }

#hook-compare-root .hc-th-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hc-hook-color);
    margin: 12px 0 12px 12px;
    vertical-align: middle;
    flex-shrink: 0;
}

#hook-compare-root .hc-th-label {
    font-size: 0.874rem;
    font-weight: 600;
    color: var(--hc-text);
    padding: 11px 8px;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 84px);
}

#hook-compare-root .hc-th-similar {
    background: none;
    border: none;
    font-size: 1.05rem;
    color: var(--hc-text-faint);
    cursor: pointer;
    padding: 11px 4px 11px 8px;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s;
}

#hook-compare-root .hc-th-similar:hover { color: var(--hc-gold); }

#hook-compare-root .hc-th-mini-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #e8c178;
    background: rgba(224, 179, 92, 0.16);
    border: 1px solid rgba(224, 179, 92, 0.45);
    border-radius: 3px;
    vertical-align: middle;
}

#hook-compare-root .hc-th-remove {
    background: none;
    border: none;
    font-size: 1.008rem;
    color: var(--hc-text-faint);
    cursor: pointer;
    padding: 11px 10px;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s;
}

#hook-compare-root .hc-th-remove:hover { color: #e07070; }

/* Data cells */
#hook-compare-root .hc-td-value {
    padding: 9px 12px;
    font-size: 0.896rem;
    color: var(--hc-text);
    border-right: 1px solid var(--hc-border);
    background: var(--hc-bg);
    vertical-align: middle;
}

#hook-compare-root .hc-td-value--mini-untracked {
    background: rgba(224, 179, 92, 0.06);
}

#hook-compare-root .hc-td-value--mini-untracked span {
    color: #b89357;
    cursor: help;
    border-bottom: 1px dotted rgba(224, 179, 92, 0.5);
}

/* Differing rows */
#hook-compare-root .hc-row--diff .hc-td-field {
    color: var(--hc-gold);
}

#hook-compare-root .hc-row--diff .hc-td-value {
    background: var(--hc-diff-bg);
    color: var(--hc-diff-text);
    font-weight: 600;
}

/* Silhouette row */
#hook-compare-root .hc-row--svg .hc-td-field { vertical-align: middle; }

#hook-compare-root .hc-td-svg {
    border-right: 1px solid var(--hc-border);
    background: var(--hc-bg);
    padding: 8px;
    vertical-align: middle;
}

#hook-compare-root .hc-table-thumb {
    width: 100%;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--hc-bg-mid);
    border-radius: 2px;
}

#hook-compare-root .hc-table-thumb svg { width: 100%; height: 100%; display: block; }

/* ── Photo row (FileBird) ───────────────────────────────────── */
#hook-compare-root .hc-td-photo {
    border-right: 1px solid var(--hc-border);
    background: var(--hc-bg);
    padding: 8px;
    vertical-align: middle;
    text-align: center;
}

#hook-compare-root .hc-photo-thumb {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 182px;
    height: 129px;
    padding: 0;
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    background: var(--hc-bg-mid);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s;
}

#hook-compare-root .hc-photo-thumb:hover {
    border-color: var(--hc-gold);
    transform: scale(1.02);
}

#hook-compare-root .hc-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#hook-compare-root .hc-photo-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-family: var(--hc-mono);
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 6px;
    border-radius: 8px;
}

#hook-compare-root .hc-photo-none {
    color: var(--hc-text-faint);
    font-size: 0.9rem;
}

#hook-compare-root .hc-photo-loading {
    width: 100%;
    max-width: 182px;
    height: 129px;
    margin: 0 auto;
}

/* ── Lightbox ───────────────────────────────────────────────── */
/* Top-level (not scoped under #hook-compare-root) because it's appended to
   document.body — the root has a transform, which would otherwise capture
   position:fixed. Colours are literals here since the root's CSS variables
   aren't in scope outside it. Prefixed to avoid theme collisions. */
.hc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.92);
    padding: 24px;
    box-sizing: border-box;
    animation: hc-lb-fade 0.15s ease;
    font-family: system-ui, -apple-system, sans-serif;
}

.hc-lightbox *, .hc-lightbox *::before, .hc-lightbox *::after { box-sizing: border-box; }

@keyframes hc-lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hc-lb-panel {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    max-height: 92vh;
    width: 100%;
    background: #1c1c1c;
    border: 1px solid #4e4a46;
    border-radius: 6px;
    overflow: hidden;
}

.hc-lb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #3e3e3e;
    background: #232323;
}

.hc-lb-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e8e4dc;
    flex: 1;
}

.hc-lb-counter {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #c8a050;
}

.hc-lb-close {
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    border: 1px solid #3e3e3e;
    border-radius: 3px;
    background: #2a2a2a;
    color: #e8e4dc;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.hc-lb-close:hover { background: #303030; color: #c8a050; }

.hc-lb-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px;
    background: #111;
}

.hc-lb-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.hc-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 66px;
    font-size: 2rem;
    line-height: 1;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.12s;
}

.hc-lb-nav:hover { background: rgba(0, 0, 0, 0.75); }
.hc-lb-prev { left: 0; border-radius: 0 4px 4px 0; }
.hc-lb-next { right: 0; border-radius: 4px 0 0 4px; }

.hc-lb-strip {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: #232323;
    border-top: 1px solid #3e3e3e;
}

.hc-lb-strip-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.hc-lb-strip-thumb:hover { opacity: 1; }
.hc-lb-strip-thumb--active { opacity: 1; border-color: #c8a050; }

/* ── Substitution / similar-hooks modal (body-appended) ─────── */
/* ── Scoring config button (always-visible gear in header) ──── */
#hook-compare-root .hc-cfg-btn {
    padding: 5px 10px;
    font-size: 1.05rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--hc-border-dark);
    border-radius: var(--hc-radius);
    cursor: pointer;
    color: var(--hc-text-faint);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

#hook-compare-root .hc-cfg-btn:hover {
    background: var(--hc-gold-dim);
    border-color: var(--hc-gold);
    color: var(--hc-gold);
}

/* ── Help button (mirrors the config gear, sits beside it) ──── */
#hook-compare-root .hc-help-btn {
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--hc-border-dark);
    border-radius: var(--hc-radius);
    cursor: pointer;
    color: var(--hc-text-faint);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
#hook-compare-root .hc-help-btn:hover {
    background: var(--hc-gold-dim);
    border-color: var(--hc-gold);
    color: var(--hc-gold);
}

/* ── Help panel content (reuses the .hc-cfg-* modal shell) ──── */
.hc-help-tabs { flex-wrap: wrap; }
.hc-help-tabs .hc-cfg-tab { font-size: 0.9rem; padding: 9px 14px; }
.hc-help-panel { width: 600px; }
.hc-help-item { margin-bottom: 18px; }
.hc-help-item:last-child { margin-bottom: 4px; }
.hc-help-q {
    font-size: 1.0rem;
    font-weight: 700;
    color: #f0ece4;
    margin-bottom: 5px;
}
.hc-help-a {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #c8c4bc;
}
.hc-help-a code {
    background: #2a2a2a;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
    color: #d8d4cc;
}
.hc-help-foot { justify-content: center; }
.hc-help-foot-text { font-size: 0.9rem; color: #9a958c; }
.hc-help-foot-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #c8a050;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
.hc-help-foot-link:hover { border-bottom-color: #c8a050; }

/* ── Scoring config modal ───────────────────────────────────── */
.hc-cfg-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    padding: 24px;
    animation: hc-lb-fade 0.15s ease;
}
.hc-cfg-modal *, .hc-cfg-modal *::before, .hc-cfg-modal *::after { box-sizing: border-box; }

.hc-cfg-panel {
    width: 520px;
    max-width: 100%;
    max-height: 88vh;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #e8e4dc;
    overflow: hidden;
}

.hc-cfg-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #333;
    background: #1c1c1c;
    flex-shrink: 0;
}
.hc-cfg-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-cfg-title  { font-size: 1.0rem; font-weight: 700; color: #f0ece4; }
.hc-cfg-subtitle { font-size: 0.76rem; color: #9a958c; }

.hc-cfg-tabs {
    display: flex;
    gap: 4px;
    padding: 0 18px;
    background: #1c1c1c;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}
.hc-cfg-tab {
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #9a958c;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.hc-cfg-tab:hover { color: #d8d4cc; }
.hc-cfg-tab--active { color: #c8a050; border-bottom-color: #c8a050; }
.hc-cfg-tab--empty {
    color: #6b6a63;
    font-style: italic;
}
.hc-cfg-tab--empty:hover { color: #908f86; }
.hc-cfg-tab--empty.hc-cfg-tab--active {
    color: #a08d5a;
    border-bottom-color: #6b6258;
}

.hc-cfg-bodyhost {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.hc-cfg-body {
    padding: 14px 18px 8px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1f1f1f;
}

.hc-cfg-section {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c8a050;
    margin: 6px 0 8px;
}
.hc-cfg-section--gap { margin-top: 20px; }

.hc-cfg-hint {
    font-size: 0.78rem;
    color: #7a756d;
    margin: -4px 0 10px;
    font-style: italic;
    line-height: 1.4;
}
.hc-cfg-hint--foot { margin-top: 16px; }

/* Slider row — flex layout so every slider starts at the same x position */
.hc-cfg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #2a2a2a;
}
.hc-cfg-row:last-child { border-bottom: none; }

.hc-cfg-label {
    width: 152px;
    min-width: 152px;
    flex-shrink: 0;
    font-size: 0.84rem;
    color: #c8c4bc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-cfg-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 5px;
    border-radius: 3px;
    background: #3a3530;
    outline: none;
    cursor: pointer;
    margin: 0;
}
.hc-cfg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c8a050;
    cursor: pointer;
    border: 2px solid #1f1f1f;
    box-shadow: 0 0 0 1px #c8a050;
    transition: transform 0.1s;
}
.hc-cfg-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.hc-cfg-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c8a050;
    cursor: pointer;
    border: 2px solid #1f1f1f;
    box-sizing: border-box;
}

/* Live value badge — right of every slider */
.hc-cfg-value {
    width: 38px;
    min-width: 38px;
    flex-shrink: 0;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1c1c1c;
    background: #c8a050;
    border-radius: 4px;
    padding: 2px 0;
    text-align: center;
}

/* Footer */
.hc-cfg-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #333;
    background: #1c1c1c;
    flex-shrink: 0;
}

.hc-cfg-action {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 6px 14px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #4a463e;
    background: transparent;
    color: #c8a050;
    transition: background 0.15s, border-color 0.15s;
}
.hc-cfg-action:hover { background: rgba(200, 160, 80, 0.1); border-color: #c8a050; }
.hc-cfg-action--warn { color: #c07070; border-color: #4a3a3a; }
.hc-cfg-action--warn:hover { background: rgba(180, 80, 80, 0.1); border-color: #b45252; }

/* ── Config import pane ─────────────────────────────────────── */
.hc-cfg-import-shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.hc-cfg-import-box {
    width: 88%;
    max-width: 440px;
    background: #26262c;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 16px 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.hc-cfg-import-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #f0ece4;
    margin-bottom: 10px;
}
.hc-cfg-import-ta {
    width: 100%;
    height: 140px;
    resize: vertical;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 8px 10px;
    background: #1c1c1c;
    color: #d8d4cc;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    box-sizing: border-box;
}
.hc-cfg-import-msg {
    display: none;
    font-size: 0.78rem;
    color: #e0a0a0;
    margin-top: 6px;
}
.hc-cfg-import-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.hc-cfg-import-apply { color: #c8a050; border-color: #4a3f2a; }
.hc-cfg-import-apply:hover { background: rgba(200, 160, 80, 0.12); border-color: #c8a050; }

@media (max-width: 560px) {
    .hc-cfg-row { gap: 8px; }
    .hc-cfg-label { width: 110px; min-width: 110px; font-size: 0.78rem; }
}

/* ── Match Matrix (collapsible, table view) ─────────────────── */
#hook-compare-root .hc-matrix {
    margin: 0 0 16px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    background: var(--hc-bg-mid);
    overflow: hidden;
}

#hook-compare-root .hc-matrix-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: var(--hc-bg);
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--hc-ui);
    transition: background 0.15s;
}
#hook-compare-root .hc-matrix-head:hover { background: #20242b; }
#hook-compare-root .hc-matrix-head--open { border-bottom-color: var(--hc-border); }

#hook-compare-root .hc-matrix-chevron {
    font-size: 0.7rem;
    color: var(--hc-gold);
    flex-shrink: 0;
    width: 12px;
}
#hook-compare-root .hc-matrix-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hc-text);
    letter-spacing: 0.02em;
}
#hook-compare-root .hc-matrix-sub {
    font-size: 0.78rem;
    color: var(--hc-text-faint);
    font-style: italic;
}

#hook-compare-root .hc-matrix-grid {
    display: grid;
    gap: 3px;
    padding: 14px;
}

#hook-compare-root .hc-matrix-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--hc-text-faint);
}

#hook-compare-root .hc-matrix-colhead {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

#hook-compare-root .hc-matrix-rowhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 4px;
    min-width: 0;
}
#hook-compare-root .hc-matrix-rowlabel {
    font-size: 0.8rem;
    color: var(--hc-text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hook-compare-root .hc-matrix-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    color: #14181e;
    flex-shrink: 0;
}
#hook-compare-root .hc-matrix-dot--sm { width: 17px; height: 17px; font-size: 0.66rem; }

#hook-compare-root .hc-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--hc-border);
    border-radius: 4px;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    color: var(--hc-text);
    cursor: pointer;
    transition: border-color 0.12s, transform 0.08s;
}
#hook-compare-root .hc-matrix-cell:hover {
    border-color: var(--hc-gold);
    transform: scale(1.04);
}
#hook-compare-root .hc-matrix-cell--self {
    color: var(--hc-text-faint);
    background: var(--hc-bg);
    cursor: default;
}
#hook-compare-root .hc-matrix-cell--self:hover {
    border-color: var(--hc-border);
    transform: none;
}

#hook-compare-root .hc-matrix-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 14px 12px;
}
#hook-compare-root .hc-matrix-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--hc-text-mid);
}

#hook-compare-root .hc-matrix-note {
    margin: 0;
    padding: 0 14px 12px;
    font-size: 0.74rem;
    color: var(--hc-text-faint);
    font-style: italic;
}

/* ── Match breakdown modal (reuses .hc-cfg-modal shell) ──────── */
.hc-bd-panel { width: 600px; }

.hc-bd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.hc-bd-table th {
    text-align: left;
    padding: 7px 8px;
    border-bottom: 1px solid #3a3a3a;
    color: #9a958c;
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    background: #1f1f1f;
}
.hc-bd-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #2a2a2a;
    color: #d8d4cc;
    vertical-align: top;
}
.hc-bd-num { text-align: right; font-family: "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; }

.hc-bd-row--agree  td:last-child { color: #5ec07a; font-weight: 700; }
.hc-bd-row--close  td:last-child { color: #d4b468; font-weight: 700; }
.hc-bd-row--differ td:last-child { color: #c06868; }
.hc-bd-row--missing td { color: #6a655d; font-style: italic; }
.hc-bd-row--length td:last-child { color: #c8a050; font-weight: 700; }

.hc-bd-row--agree  td:first-child { border-left: 3px solid #5ec07a; }
.hc-bd-row--close  td:first-child { border-left: 3px solid #d4b468; }
.hc-bd-row--differ td:first-child { border-left: 3px solid #c06868; }
.hc-bd-row--length td:first-child { border-left: 3px solid #c8a050; }
.hc-bd-row--missing td:first-child { border-left: 3px solid #3a3a3a; }

@media (max-width: 620px) {
    .hc-bd-panel { width: 100%; }
    .hc-matrix-rowlabel { display: none; }
}

.hc-sim-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 24px;
    animation: hc-lb-fade 0.15s ease;
}
.hc-sim-modal *, .hc-sim-modal *::before, .hc-sim-modal *::after { box-sizing: border-box; }

.hc-sim-panel {
    width: 560px;
    max-width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #e8e4dc;
    overflow: hidden;
}

.hc-sim-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #333;
    background: #1c1c1c;
}
.hc-sim-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-sim-title { font-size: 1.02rem; font-weight: 700; color: #f0ece4; }
.hc-sim-sub { font-size: 0.8rem; color: #c8a050; font-family: "SF Mono", Menlo, Consolas, monospace; }
.hc-sim-close {
    flex-shrink: 0;
    width: 30px; height: 30px;
    font-size: 1.2rem; line-height: 1;
    background: #262626; color: #aaa;
    border: 1px solid #3a3a3a; border-radius: 6px;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.hc-sim-close:hover { background: #303030; color: #c8a050; }

.hc-sim-body { padding: 8px 10px; overflow-y: auto; }

.hc-sim-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.hc-sim-row:hover { background: #272727; border-color: #383838; }

.hc-sim-score {
    flex-shrink: 0;
    width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1c1c1c;
    background: #c8a050;
    border-radius: 5px;
    padding: 6px 0;
}

.hc-sim-info { flex: 1; min-width: 0; }
.hc-sim-name { font-size: 0.92rem; font-weight: 600; color: #f0ece4; margin-bottom: 2px; }
.hc-sim-link { color: #6cc0f0; text-decoration: none; }
.hc-sim-link:hover { text-decoration: underline; }
.hc-sim-mfr { color: #9a958c; font-weight: 400; }
.hc-sim-same { font-size: 0.78rem; color: #7fc89a; }
.hc-sim-diff { font-size: 0.78rem; color: #c8a87f; }
.hc-sim-len  { font-size: 0.78rem; color: #9a958c; font-family: "SF Mono", Menlo, Consolas, monospace; }

.hc-sim-add {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c8a050;
    background: transparent;
    border: 1px solid #4a463e;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.hc-sim-add:hover { background: rgba(200, 160, 80, 0.12); border-color: #c8a050; }
.hc-sim-add:disabled { color: #777; border-color: #333; cursor: default; background: transparent; }

.hc-sim-empty { padding: 22px 14px; color: #9a958c; font-size: 0.9rem; font-style: italic; text-align: center; }

.hc-sim-foot {
    padding: 11px 18px;
    border-top: 1px solid #333;
    background: #1c1c1c;
    font-size: 0.74rem;
    color: #8a857c;
    font-style: italic;
}

@media (max-width: 600px) {
    .hc-sim-row { flex-wrap: wrap; }
    .hc-sim-add { width: 100%; }
}

/* Alternating row tint */
#hook-compare-root .hc-compare-table tbody tr:nth-child(even) .hc-td-value {
    background: var(--hc-bg-mid);
}

#hook-compare-root .hc-compare-table tbody tr:nth-child(even) .hc-row--diff .hc-td-value {
    background: var(--hc-diff-bg);
}

/* Measurements section divider */
#hook-compare-root .hc-row--section-head .hc-td-section {
    background: var(--hc-bg-mid);
    font-size: 0.739rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--hc-gold);
    padding: 7px 12px 5px;
    border-top: 1px solid var(--hc-border-mid);
    border-bottom: 1px solid var(--hc-border);
}

/* Measurement value cells */
#hook-compare-root .hc-td-meas {
    font-family: var(--hc-mono);
    font-size: 0.874rem;
    color: var(--hc-text);
}

/* Method footnote */
#hook-compare-root .hc-row--meas-note .hc-td-meas-note {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--hc-text-faint);
    padding: 4px 12px 7px;
    background: var(--hc-bg-mid);
    border-top: 1px dashed var(--hc-border);
}

/* Hook label link in table header */
#hook-compare-root .hc-th-link {
    color: var(--hc-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--hc-text-faint);
    transition: color 0.15s, border-color 0.15s;
}

#hook-compare-root .hc-th-link:hover {
    color: var(--hc-gold);
    border-bottom-color: var(--hc-gold);
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY VIEW
══════════════════════════════════════════════════════════════ */

#hook-compare-root .hc-overlay-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Overlay canvas */
#hook-compare-root .hc-overlay-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    background: var(--hc-bg-mid);
    border-bottom: 1px solid var(--hc-border-mid);
    overflow: hidden;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* Subtle grid — calibration reference */
#hook-compare-root .hc-overlay-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--hc-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--hc-border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* When the calibrated ruler is active, hide the decorative (uncalibrated)
   grid so there's only one set of gridlines and no confusion. */
#hook-compare-root .hc-overlay-canvas--ruled::before { opacity: 0; }

/* ── Calibrated ruler layer ─────────────────────────────────── */
#hook-compare-root .hc-ruler-layer {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;            /* behind the hooks (z-index 1) */
}

#hook-compare-root .hc-ruler-layer svg { width: 100%; height: 100%; display: block; }

#hook-compare-root .hc-ruler-grid line {
    stroke: var(--hc-gold);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0.22;
}

#hook-compare-root .hc-ruler-ticks line {
    stroke: var(--hc-gold);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

#hook-compare-root .hc-ruler-ticks--half line { opacity: 0.55; }
#hook-compare-root .hc-ruler-ticks--qtr line  { opacity: 0.3; }

/* Interior crosshair hashmarks across the grid */
#hook-compare-root .hc-ruler-cross line {
    stroke: var(--hc-gold);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
#hook-compare-root .hc-ruler-cross--half line { opacity: 0.32; }
#hook-compare-root .hc-ruler-cross--qtr line  { opacity: 0.16; }

/* ── Caliper (measurement line) ─────────────────────────────── */
#hook-compare-root .hc-caliper-layer {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 3;                 /* above the hooks */
    pointer-events: none;       /* only handles/line below capture events */
}

#hook-compare-root .hc-caliper-svg { width: 100%; height: 100%; display: block; pointer-events: none; }

#hook-compare-root .hc-cal-line {
    stroke: #ffffff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

#hook-compare-root .hc-cal-cross {
    stroke: #ffffff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Wide invisible hit area along the line — drag to move the whole caliper */
#hook-compare-root .hc-cal-hit {
    stroke: transparent;
    stroke-width: 16;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
    cursor: move;
}

#hook-compare-root .hc-cal-handle {
    fill: none;
    stroke: var(--hc-gold);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Invisible larger grab target around each handle */
#hook-compare-root .hc-cal-hithandle {
    fill: transparent;
    pointer-events: fill;
    cursor: grab;
}

#hook-compare-root .hc-cal-label {
    fill: #ffffff;
    stroke: #0e0e0e;
    paint-order: stroke;
    stroke-linejoin: round;
    font-family: var(--hc-mono);
    font-weight: 700;
    pointer-events: none;
}

#hook-compare-root .hc-ruler-labels text {
    fill: var(--hc-gold);
    opacity: 0.65;
    font-family: var(--hc-mono);
}

#hook-compare-root .hc-ruler-labels .hc-ruler-legend {
    opacity: 0.85;
    font-weight: 700;
}

/* Hook layers */
#hook-compare-root .hc-hook-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    mix-blend-mode: screen;
    transition: opacity 0.2s ease;
    z-index: 1;
    transform-origin: center center;
    /* Layer container ignores pointer events; only the hook silhouette
       (the SVG path) is grabbable, so empty areas and lower layers stay
       reachable. */
    pointer-events: none;
}

#hook-compare-root .hc-hook-layer svg {
    width: 100%; height: 100%; display: block;
    pointer-events: none;
}

/* The hook ink itself is the drag handle */
#hook-compare-root .hc-hook-layer svg path {
    pointer-events: visiblePainted;
    cursor: grab;
}

#hook-compare-root .hc-hook-layer--dragging {
    transition: none;
}

#hook-compare-root .hc-hook-layer--dragging svg path {
    cursor: grabbing;
}

#hook-compare-root .hc-layer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-size: 0.84rem;
    color: var(--hc-text-faint);
    font-style: italic;
}

/* ── Overlay controls ───────────────────────────────────────── */
#hook-compare-root .hc-overlay-controls {
    background: var(--hc-bg);
    border-top: 1px solid var(--hc-border-mid);
}

#hook-compare-root .hc-overlay-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--hc-border);
    background: var(--hc-bg-mid);
    flex-wrap: wrap;
}

#hook-compare-root .hc-toolbar-label {
    font-size: 0.739rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hc-text-mid);
}

/* Segmented fit/true-scale toggle */
#hook-compare-root .hc-segmented {
    display: inline-flex;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 2px;
    gap: 2px;
}

#hook-compare-root .hc-seg-btn {
    padding: 4px 11px;
    font-size: 0.73rem;
    font-family: var(--hc-ui);
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--hc-text-mid);
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

#hook-compare-root .hc-seg-btn:hover {
    color: var(--hc-text);
}

#hook-compare-root .hc-seg-btn--active {
    background: var(--hc-bg-raised);
    color: var(--hc-gold);
    font-weight: 700;
}

/* Toolbar vertical separator */
#hook-compare-root .hc-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--hc-border-mid);
    margin: 0 4px;
}

/* "Drag a hook to reposition" hint, pushed to the right */
#hook-compare-root .hc-toolbar-hint {
    margin-left: auto;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--hc-text-faint);
}

/* Per-hook position row */
#hook-compare-root .hc-pos-row {
    justify-content: space-between;
}

#hook-compare-root .hc-pos-hint {
    font-size: 0.70rem;
    font-style: italic;
    color: var(--hc-text-faint);
}

/* True-scale basis badge in the hook info strip */
#hook-compare-root .hc-scale-basis {
    font-family: var(--hc-mono);
    font-size: 0.66rem;
    padding: 1px 6px;
    border-radius: 2px;
    white-space: nowrap;
}

#hook-compare-root .hc-scale-basis--measured {
    color: var(--hc-gold);
    background: var(--hc-gold-dim);
}

#hook-compare-root .hc-scale-basis--inferred {
    color: var(--hc-text-faint);
    border: 1px solid var(--hc-border-mid);
}

#hook-compare-root .hc-zoom-value {
    font-family: var(--hc-mono);
    font-size: 0.874rem;
    color: var(--hc-gold);
    min-width: 40px;
    text-align: center;
}

/* ── Per-hook panels ────────────────────────────────────────── */
#hook-compare-root .hc-hook-panels {
    display: flex;
    flex-wrap: wrap;
}

#hook-compare-root .hc-hook-panel {
    flex: 1;
    min-width: 210px;
    padding: 13px 15px;
    border-right: 1px solid var(--hc-border);
    border-bottom: 1px solid var(--hc-border);
    border-top: 2px solid var(--hc-hook-color);
    transition: opacity 0.2s;
    background: var(--hc-bg);
}

#hook-compare-root .hc-hook-panel--hidden { opacity: 0.4; }
#hook-compare-root .hc-hook-panel:last-child { border-right: none; }

#hook-compare-root .hc-hook-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

#hook-compare-root .hc-hook-panel-name {
    font-size: 0.851rem;
    font-weight: 600;
    color: var(--hc-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Control rows ───────────────────────────────────────────── */
#hook-compare-root .hc-ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

#hook-compare-root .hc-ctrl-label {
    font-size: 0.728rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hc-text-mid);
    min-width: 46px;
    flex-shrink: 0;
}

#hook-compare-root .hc-ctrl-value {
    font-family: var(--hc-mono);
    font-size: 0.784rem;
    color: var(--hc-gold);
    min-width: 40px;
    flex-shrink: 0;
    text-align: right;
}

/* ── Color picker ───────────────────────────────────────────── */
#hook-compare-root .hc-color-pick {
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--hc-border-mid);
    border-radius: 50%;
    cursor: pointer;
    background: var(--hc-bg-raised);
    flex-shrink: 0;
    overflow: hidden;
}

#hook-compare-root .hc-color-pick::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
#hook-compare-root .hc-color-pick::-webkit-color-swatch { border: none; border-radius: 50%; }

/* ── Slider ─────────────────────────────────────────────────── */
#hook-compare-root .hc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 2px;
    background: var(--hc-border-mid);
    cursor: pointer;
    outline: none;
    min-width: 0;
}

#hook-compare-root .hc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--hc-gold);
    cursor: pointer;
    border: 2px solid var(--hc-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    transition: background 0.15s, transform 0.1s;
}

#hook-compare-root .hc-slider::-webkit-slider-thumb:hover {
    background: var(--hc-gold-light);
    transform: scale(1.15);
}

#hook-compare-root .hc-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--hc-gold);
    cursor: pointer;
    border: 2px solid var(--hc-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Buttons ────────────────────────────────────────────────── */
#hook-compare-root .hc-btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    background: var(--hc-bg-raised);
    color: var(--hc-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}

#hook-compare-root .hc-btn-icon:hover {
    background: var(--hc-bg-hover);
    border-color: var(--hc-gold);
    color: var(--hc-gold);
}

#hook-compare-root .hc-btn-sm {
    padding: 4px 10px;
    font-size: 0.784rem;
    font-family: var(--hc-ui);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    background: var(--hc-bg-raised);
    color: var(--hc-text-mid);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

#hook-compare-root .hc-btn-sm:hover {
    background: var(--hc-bg-hover);
    color: var(--hc-gold);
    border-color: var(--hc-gold);
}

/* Ruler toggle states */
#hook-compare-root .hc-ruler-btn--active {
    background: var(--hc-bg-raised);
    color: var(--hc-gold);
    border-color: var(--hc-gold);
    font-weight: 700;
}

#hook-compare-root .hc-ruler-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#hook-compare-root .hc-ruler-btn:disabled:hover {
    background: var(--hc-bg-raised);
    color: var(--hc-text-mid);
    border-color: var(--hc-border-mid);
}

/* ── Visibility button ──────────────────────────────────────── */
#hook-compare-root .hc-vis-btn {
    color: var(--hc-hook-color);
    border-color: var(--hc-hook-color);
    font-size: 0.918rem;
}

/* ── Dimension info strip ───────────────────────────────────── */
#hook-compare-root .hc-hook-info {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--hc-border-mid);
}

#hook-compare-root .hc-info-item {
    font-family: var(--hc-mono);
    font-size: 0.739rem;
    color: var(--hc-text-faint);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    #hook-compare-root .hc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #hook-compare-root .hc-th-field,
    #hook-compare-root .hc-td-field {
        width: 86px;
        min-width: 76px;
    }

    #hook-compare-root .hc-th-consensus,
    #hook-compare-root .hc-td-consensus {
        width: 50px;
        min-width: 50px;
        padding: 8px 3px;
    }

    #hook-compare-root .hc-hook-panel {
        min-width: 100%;
        border-right: none;
    }

    #hook-compare-root .hc-hook-grid { max-height: 175px; }
    #hook-compare-root .hc-hook-item { flex: 0 0 100%; }
}

/* ══════════════════════════════════════════════════════════════
   EXPLORE MODE — casual browse surface ([hook_explore])
   ══════════════════════════════════════════════════════════════ */
#hook-explore-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--hc-text);
}
#hook-explore-root * { box-sizing: border-box; }
.hx-tool {
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 12px 32px;
}
.hx-header { text-align: center; margin-bottom: 18px; }
.hx-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--hc-text);
}
.hx-sub {
    font-size: 0.9rem;
    color: var(--hc-text-faint);
    margin-top: 4px;
}

/* Main card */
.hx-card {
    background: var(--hc-bg-mid);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius-lg);
    padding: 22px 22px 18px;
    text-align: center;
}
.hx-silo {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hx-silo-svg { width: 100%; height: 100%; display: block; }
.hx-silo-empty {
    font-size: 0.85rem;
    color: var(--hc-text-faint);
    font-style: italic;
}
.hx-meta { margin-top: 14px; }
.hx-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hc-text);
}
.hx-spec {
    font-size: 0.95rem;
    color: var(--hc-gold);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.hx-size {
    font-size: 0.82rem;
    color: var(--hc-text-faint);
    margin-top: 4px;
}

/* Card actions */
.hx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}
.hx-actions--nav { margin-top: 20px; }
.hx-actions--meta {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--hc-border-mid);
}
.hx-btn {
    padding: 9px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--hc-radius);
    border: 1px solid var(--hc-border-hi);
    background: var(--hc-bg-raised);
    color: var(--hc-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hx-btn:hover { background: var(--hc-bg-hover); border-color: var(--hc-gold); }
.hx-btn:disabled { opacity: 0.4; cursor: default; }
.hx-btn--ghost { background: transparent; }
.hx-btn--accent {
    background: var(--hc-gold-dim);
    border-color: var(--hc-gold);
    color: var(--hc-gold);
}
.hx-btn--accent:hover { background: rgba(200, 160, 80, 0.18); }

/* Similar mini-cards */
.hx-similar-label {
    margin: 26px 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hc-text-faint);
    text-align: center;
}
.hx-similar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.hx-mini {
    background: var(--hc-bg-mid);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 10px 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, transform 0.1s, background 0.15s;
    font-family: inherit;
}
.hx-mini:hover {
    border-color: var(--hc-gold);
    background: var(--hc-bg-hover);
    transform: translateY(-2px);
}
.hx-mini .hx-silo { height: 84px; }
.hx-mini-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hc-text);
    margin-top: 6px;
    line-height: 1.3;
}
.hx-mini-pct {
    font-size: 0.72rem;
    color: var(--hc-gold);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .hx-similar { grid-template-columns: repeat(2, 1fr); }
    .hx-silo { height: 190px; }
    .hx-actions .hx-btn { flex: 1 1 40%; }
}

/* Explore — view-mode toggle */
.hx-modes {
    display: inline-flex;
    gap: 0;
    margin: 0 auto 18px;
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    overflow: hidden;
    background: var(--hc-bg-mid);
}
.hx-modes { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.hx-mode-btn {
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-right: 1px solid var(--hc-border-mid);
    background: transparent;
    color: var(--hc-text-faint);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.hx-mode-btn:last-child { border-right: none; }
.hx-mode-btn:hover { color: var(--hc-text); background: var(--hc-bg-hover); }
.hx-mode-btn--on {
    background: var(--hc-gold-dim);
    color: var(--hc-gold);
}
.hx-mode-btn--on:hover { background: rgba(200, 160, 80, 0.18); color: var(--hc-gold); }

/* Explore — photo + mixed */
.hx-photo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--hc-radius);
    display: block;
}
.hx-silo.hx-mixed { position: relative; }
.hx-mixed-inset {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 30%;
    max-width: 130px;
    height: 38%;
    background: rgba(20, 20, 20, 0.72);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hx-mixed-inset .hx-silo-svg { width: 100%; height: 100%; }
.hx-mini .hx-photo-img { max-height: 84px; }

/* Explore — controls row (mode + steering toggles) */
.hx-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}
.hx-controls .hx-modes { margin: 0; }

/* Explore — anchor (pin) */
.hx-anchor-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto 16px;
    padding: 8px 14px;
    background: var(--hc-gold-dim);
    border: 1px solid var(--hc-gold);
    border-radius: var(--hc-radius);
    font-size: 0.85rem;
    color: var(--hc-text);
}
.hx-anchor-icon { flex-shrink: 0; }
.hx-anchor-text { flex: 1; }
.hx-anchor-unpin {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--hc-gold);
    background: transparent;
    color: var(--hc-gold);
    border-radius: var(--hc-radius);
    cursor: pointer;
    font-family: inherit;
}
.hx-anchor-unpin:hover { background: rgba(200, 160, 80, 0.18); }
.hx-btn--pinned {
    background: var(--hc-gold-dim) !important;
    border-color: var(--hc-gold) !important;
    color: var(--hc-gold) !important;
}

/* Explore — card entry animation (forward / back) */
@keyframes hxSlideFwd {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hxSlideBack {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hx-anim-fwd  { animation: hxSlideFwd 0.26s ease-out; }
.hx-anim-back { animation: hxSlideBack 0.26s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .hx-anim-fwd, .hx-anim-back { animation: none; }
}

/* ── Config: Tune by Example (calibration) pane ─────────────── */
.hc-cal-pick { position: relative; margin-bottom: 10px; }
.hc-cal-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--hc-bg-input);
    border: 1px solid var(--hc-border-hi);
    border-radius: var(--hc-radius);
    color: var(--hc-text);
    font-size: 0.88rem;
    box-sizing: border-box;
}
.hc-cal-menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 5;
    margin-top: 2px;
    background: var(--hc-bg-raised);
    border: 1px solid var(--hc-border-hi);
    border-radius: var(--hc-radius);
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.hc-cal-menu-item {
    padding: 7px 10px;
    font-size: 0.86rem;
    cursor: pointer;
    color: var(--hc-text);
}
.hc-cal-menu-item:hover { background: var(--hc-bg-hover); }

.hc-cal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.hc-cal-empty { font-size: 0.84rem; color: var(--hc-text-faint); font-style: italic; }
.hc-cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: var(--hc-bg-raised);
    border: 1px solid var(--hc-border-mid);
    border-radius: 14px;
    font-size: 0.82rem;
    color: var(--hc-text);
}
.hc-cal-chip-x {
    border: none; background: none; cursor: pointer;
    color: var(--hc-text-faint); font-size: 1rem; line-height: 1; padding: 0 2px;
}
.hc-cal-chip-x:hover { color: var(--hc-text); }
.hc-cal-clear {
    margin-left: 4px; padding: 3px 10px; font-size: 0.78rem;
    background: transparent; border: 1px solid var(--hc-border-mid);
    border-radius: 12px; color: var(--hc-text-faint); cursor: pointer;
}
.hc-cal-clear:hover { color: var(--hc-text); border-color: var(--hc-border-hi); }

.hc-cal-cohesion {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 0 14px; border-bottom: 1px solid var(--hc-border-mid); margin-bottom: 14px;
}
.hc-cal-cohesion-num { font-size: 1.7rem; font-weight: 800; color: var(--hc-gold); }
.hc-cal-cohesion-lbl { font-size: 0.85rem; color: var(--hc-text-faint); }

.hc-cal-bars { display: flex; flex-direction: column; gap: 5px; }
.hc-cal-bar-row {
    display: grid;
    grid-template-columns: 130px 1fr 42px 32px;
    align-items: center; gap: 8px;
    font-size: 0.82rem;
}
.hc-cal-bar-label { color: var(--hc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-cal-bar-track { height: 12px; background: var(--hc-bg-input); border-radius: 6px; overflow: hidden; }
.hc-cal-bar-fill { height: 100%; background: var(--hc-text-faint); border-radius: 6px; }
.hc-cal-bar-pct { text-align: right; color: var(--hc-text-faint); font-variant-numeric: tabular-nums; }
.hc-cal-bar-wt { text-align: right; color: var(--hc-text-faint); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.hc-cal-bar-row--drag .hc-cal-bar-fill { background: #c2683c; }
.hc-cal-bar-row--drag .hc-cal-bar-label { color: #e0a070; font-weight: 600; }

.hc-cal-suggest {
    margin-top: 16px; padding: 11px 14px;
    background: var(--hc-gold-dim); border: 1px solid var(--hc-gold);
    border-radius: var(--hc-radius);
    font-size: 0.86rem; color: var(--hc-text); line-height: 1.5;
}

/* ── Match breakdown: summary + bars (reuses .hc-cal-bar-* visuals) ── */
.hc-bd-summary {
    padding: 11px 14px;
    margin-bottom: 14px;
    background: var(--hc-gold-dim);
    border: 1px solid var(--hc-gold);
    border-radius: var(--hc-radius);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--hc-text);
}
.hc-bd-bars { gap: 6px; }
.hc-bd-bar-row { position: relative; cursor: default; }
/* Track is the positioning context for the values overlay. */
.hc-bd-bar-row .hc-cal-bar-track { position: relative; overflow: visible; }
/* Values sit centered ON the track — no layout shift, no reflow on hover. */
.hc-bd-bar-vals {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--hc-text);
    background: rgba(20, 20, 20, 0.82);
    padding: 3px 8px;
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 2;
    max-width: 96%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-bd-bar-row:hover .hc-bd-bar-vals,
.hc-bd-bar-row--open .hc-bd-bar-vals { display: block; }
@media (hover: none) {
    .hc-bd-bar-row { cursor: pointer; }     /* touch: tap toggles --open */
}

/* ══════════════════════════════════════════════════════════════
   RECORDS MODE — "The Hooks by the Numbers" ([hook_records])
   ══════════════════════════════════════════════════════════════ */
#hook-records-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--hc-text);
}
#hook-records-root * { box-sizing: border-box; }
.hr-tool { max-width: 1080px; margin: 0 auto; padding: 8px 12px 40px; }
.hr-header { text-align: center; margin-bottom: 26px; }
.hr-title { font-size: 1.7rem; font-weight: 800; color: var(--hc-text); }
.hr-sub { font-size: 0.95rem; color: var(--hc-text-faint); margin-top: 6px; }

.hr-section { margin-bottom: 30px; }
.hr-section-title {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--hc-gold); margin: 0 0 14px; padding-bottom: 7px;
    border-bottom: 1px solid var(--hc-border-mid);
}
.hr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.hr-card {
    background: var(--hc-bg-mid);
    border: 1px solid var(--hc-border-mid);
    border-radius: var(--hc-radius-lg);
    padding: 16px 16px 10px;
}
.hr-card-title {
    font-size: 1.0rem; font-weight: 700; color: var(--hc-text);
    margin-bottom: 12px;
}
.hr-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 6px; border-radius: var(--hc-radius);
    text-decoration: none; color: inherit;
    transition: background 0.15s;
}
.hr-row:hover { background: var(--hc-bg-hover); }
.hr-row--first { background: rgba(200, 160, 80, 0.07); }
.hr-medal { font-size: 1.15rem; flex-shrink: 0; width: 24px; text-align: center; }
.hr-silo {
    flex-shrink: 0; width: 76px; height: 50px;
    display: flex; align-items: center; justify-content: center;
}
.hr-silo-svg { width: 100%; height: 100%; display: block; }
.hr-silo-empty { width: 100%; height: 100%; }
.hr-info { flex: 1; min-width: 0; }
.hr-name {
    font-size: 0.9rem; font-weight: 600; color: var(--hc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-meta { font-size: 0.76rem; color: var(--hc-text-faint); margin-top: 1px; }
.hr-value { font-size: 0.88rem; color: var(--hc-gold); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hr-empty {
    text-align: center; color: var(--hc-text-faint); font-style: italic;
    padding: 40px 0;
}

@media (max-width: 600px) {
    .hr-grid { grid-template-columns: 1fr; }
    .hr-title { font-size: 1.4rem; }
}

/* Records — per-card action buttons (Compare / Explore) */
.hr-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hc-border-mid);
}
.hr-card-btn {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--hc-radius);
    border: 1px solid var(--hc-gold);
    background: var(--hc-gold-dim);
    color: var(--hc-gold);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.hr-card-btn:hover {
    background: rgba(200, 160, 80, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hr-card-btn:active { transform: translateY(0); }
/* Second button (Explore) uses a filled-dark variant so the two read as a pair
   without competing. */
.hr-card-btn + .hr-card-btn {
    background: var(--hc-bg-raised);
    border-color: var(--hc-border-hi);
    color: var(--hc-text);
}
.hr-card-btn + .hr-card-btn:hover {
    background: var(--hc-bg-hover);
    border-color: var(--hc-gold);
    color: var(--hc-gold);
}

/* ── Custom Match tab ─────────────────────────────────────────── */
.hc-cm-mode-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 4px;
    flex-wrap: wrap;
}
.hc-cm-mode-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #9a958c;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hc-cm-radio { display: none; }
.hc-cm-radio-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #9a958c;
    padding: 4px 12px;
    border: 1px solid #3a3a3a;
    border-radius: 20px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    user-select: none;
}
.hc-cm-radio-label:hover { color: #d8d4cc; border-color: #5a5a5a; }
.hc-cm-radio:checked + .hc-cm-radio-label {
    color: #c8a050;
    border-color: #c8a050;
    background: rgba(200, 160, 80, 0.10);
}
.hc-cm-mode-desc {
    margin: 0 12px 8px;
    font-size: 0.76rem;
    color: #6a6560;
    font-style: italic;
    min-height: 1em;
}
.hc-cm-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 10px;
    border-bottom: 1px solid #2a2a2a;
}
.hc-cm-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 0.77rem;
    font-weight: 500;
    color: #8a8580;
    background: #222;
    border: 1px solid #333;
    border-radius: 20px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    line-height: 1.35;
    font-family: inherit;
    letter-spacing: 0.01em;
}
.hc-cm-pill:hover:not(:disabled) {
    color: #d8d4cc;
    border-color: #555;
    background: #2a2a2a;
}
.hc-cm-pill--on {
    color: #1c1c1c;
    background: #c8a050;
    border-color: #c8a050;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(200, 160, 80, 0.30);
}
.hc-cm-pill--on:hover {
    background: #d4b060;
    border-color: #d4b060;
    box-shadow: 0 1px 6px rgba(200, 160, 80, 0.45);
}
.hc-cm-pill:disabled {
    color: #3a3a3a;
    border-color: #282828;
    background: #1e1e1e;
    cursor: not-allowed;
    opacity: 0.6;
}
.hc-cm-results { padding-top: 4px; }

/* ── Hook Concept Taxonomy — industry equivalent badge in similar results ── */
.hc-sim-concept-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(45, 212, 158, 0.22);
    color: #6ee7b7;
    border: 1px solid rgba(110, 231, 183, 0.45);
    cursor: default;
}

/* ── "Modern Equiv." tab content — Find Similar modal ──────────────────── */
.hc-modequiv-tab {
    padding: 4px 2px 8px;
}
.hc-modequiv-heading {
    font-size: 15px;
    font-weight: 700;
    color: #6ee7b7;
    margin: 0 0 4px;
}
.hc-modequiv-desc {
    font-size: 12px;
    color: #9c9a92;
    line-height: 1.5;
    margin: 0 0 16px;
}
.hc-modequiv-chip {
    font-size: 12.5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #d4d2c8;
    cursor: default;
    white-space: nowrap;
}
.hc-modequiv-chip--linked {
    background: rgba(110, 231, 183, 0.14);
    border-color: rgba(110, 231, 183, 0.4);
    color: #a7f3d0;
    cursor: pointer;
    text-decoration: none;
}
.hc-modequiv-chip--linked:hover {
    background: rgba(110, 231, 183, 0.24);
}
.hc-modequiv-chip--mini {
    background: rgba(224, 179, 92, 0.16);
    border-color: rgba(224, 179, 92, 0.45);
    color: #e8c178;
    cursor: pointer;
    text-decoration: none;
}
.hc-modequiv-chip--mini:hover {
    background: rgba(224, 179, 92, 0.27);
}
.hc-modequiv-mfr-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.hc-modequiv-mfr-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.hc-modequiv-mfr-name {
    font-size: 12px;
    font-weight: 600;
    color: #b8b6ac;
    min-width: 90px;
    flex-shrink: 0;
}
.hc-modequiv-mfr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.hc-modequiv-footnote {
    font-size: 11px;
    color: #767468;
    line-height: 1.5;
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOOK COMPARISON EMBED WIDGET  (.hc-comparison-embed)
   Phase 2 — styles for the [hook_comparison_svg] shortcode output.
   Uses the same --hc-* design tokens as the rest of the plugin.
   ═══════════════════════════════════════════════════════════════════════════ */

.hc-comparison-embed {
    margin: 1.5rem 0;
    font-family: inherit;
}

/* Toolbar — Fit to frame / True scale / Overlay toggle */
.hc-ce-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.hc-ce-btn {
    background: transparent;
    border: 1px solid var(--hc-border-mid);
    color: var(--hc-text-secondary, #aaa);
    border-radius: 16px;
    padding: 4px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.hc-ce-btn:hover {
    background: var(--hc-bg-hover, rgba(255,255,255,0.07));
    color: var(--hc-text, #fff);
}

.hc-ce-btn--active {
    background: var(--hc-text, #e0e0e0);
    color: var(--hc-bg, #1a1a1a);
    border-color: var(--hc-text, #e0e0e0);
}

/* Canvas */
.hc-ce-canvas {
    position: relative;
    width: 100%;
    background: var(--hc-bg-mid);
    border-radius: 8px;
    overflow: hidden;
}

/* Side-by-side modes: row of equal columns */
.hc-ce-canvas--side,
.hc-ce-canvas--true {
    display: flex;
    gap: 1px;
    min-height: 200px;
    align-items: stretch;
}

/* Overlay mode: shared canvas, full aspect ratio */
.hc-ce-canvas--overlay {
    aspect-ratio: 5 / 3;
}

/* Individual hook column (side-by-side modes) */
.hc-ce-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    min-width: 0;
}

/* SVG wrapper — fills column, constrains height */
.hc-ce-svg-wrap {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hc-ce-svg-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Overlay mode: hook layers re-use the existing .hc-hook-layer styles
   (position:absolute, mix-blend-mode:screen) — no extra rules needed. */

/* Legend row */
.hc-ce-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0 2px;
}

.hc-ce-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 12px;
    color: var(--hc-text-secondary, #aaa);
    line-height: 1;
}

.hc-ce-legend-item:hover {
    color: var(--hc-text, #e0e0e0);
}

.hc-ce-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* "Open in Compare tool" CTA */
.hc-ce-cta {
    margin-top: 10px;
}

.hc-ce-cta-link {
    font-size: 12px;
    color: var(--hc-accent, #5DB7E0);
    text-decoration: none;
}

.hc-ce-cta-link:hover {
    text-decoration: underline;
}

/* ── End: Comparison Embed Widget ────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   HOOK COMPARISON PAGE  (.gw-comparison-*)
   Phase 3 — front-end styles for template-hook-comparison.php.
   Uses site CSS variables (--color-*, etc.) where possible so the page
   inherits the site's light/dark theme. Falls back to literal values for
   colours that are comparison-specific (amber callout, badge tints, star).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────────────────── */
.gw-comparison-header {
    margin-bottom: 1.75rem;
}
.gw-comparison-title {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    line-height: 1.25;
    color: #1a1a1a;
}
.gw-comparison-subtitle {
    font-size: 1rem;
    color: #555;
    margin: 0 0 .4rem;
    font-weight: 400;
}
.gw-comparison-meta {
    font-size: 0.8125rem;
    color: #999;
    margin: 0;
}

/* ── Section rhythm ───────────────────────────────────────────────────────── */
.gw-comparison-section {
    margin-bottom: 2rem;
}
.gw-comparison-section-eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    margin: 0 0 .6rem;
}
.gw-comparison-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 .85rem;
    padding: 0;
    border: none;
}
.gw-comparison-divider {
    border: none;
    border-top: 1px solid #e8eaec;
    margin: 0 0 2rem;
}

/* ── Editorial callout (amber hero block) ─────────────────────────────────── */
.gw-comparison-callout {
    background: #FAEEDA;
    border-left: 3px solid #EF9F27;
    border-radius: 0 8px 8px 0;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
}
.gw-comparison-callout-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #854F0B;
    margin-bottom: .3rem;
}
.gw-comparison-callout-hook {
    font-size: 1.2rem;
    font-weight: 600;
    color: #412402;
    margin: 0 0 .4rem;
    padding: 0;
    border: none;
}
.gw-comparison-callout-hook a {
    color: inherit;
    text-decoration: none;
}
.gw-comparison-callout-hook a:hover { text-decoration: underline; }
.gw-comparison-callout-text {
    font-size: 0.9rem;
    color: #633806;
    line-height: 1.6;
    margin: 0;
}

/* ── Quick Picks table ────────────────────────────────────────────────────── */
.gw-comparison-picks-table td:last-child {
    color: #666;
    font-size: 0.875rem;
}
.gw-comparison-pick-link {
    font-weight: 600;
    text-decoration: none;
    color: #1a1a1a;
}
.gw-comparison-pick-link:hover { text-decoration: underline; }
.gw-comparison-pick-reason {
    font-size: 0.875rem;
    color: #666;
}

/* Badges — Auto (teal) and Editor (amber) */
.gw-comp-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 3px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: 5px;
    line-height: 1.5;
}
.gw-comp-badge--auto {
    background: #E1F5EE;
    color: #085041;
}
.gw-comp-badge--editor {
    background: #FAEEDA;
    color: #854F0B;
}

/* ── Hook profiles ────────────────────────────────────────────────────────── */
.gw-comparison-profile {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #f7f8f9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .75rem;
}
.gw-comparison-profile-accent {
    width: 4px;
    flex-shrink: 0;
    border-left: 4px solid #ccc; /* overridden by inline style per hook */
    border-radius: 0;
}
.gw-comparison-profile-body {
    padding: 1rem 1.1rem;
    flex: 1;
    min-width: 0;
}
.gw-comparison-profile-mfr {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    margin: 0 0 .2rem;
}
.gw-comparison-profile-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: #1a1a1a;
}
.gw-comparison-profile-name a {
    color: inherit;
    text-decoration: none;
}
.gw-comparison-profile-name a:hover { text-decoration: underline; }
.gw-comparison-profile-headline {
    font-weight: 400;
    color: #555;
}
.gw-comparison-profile-text {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.65;
    margin-bottom: .6rem;
}
.gw-comparison-profile-text p:last-child { margin-bottom: 0; }
.gw-comparison-profile-spec {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
    font-style: italic;
}

/* ── Spec table ───────────────────────────────────────────────────────────── */
.gw-comparison-spec-scroll {
    overflow-x: auto;
    margin-bottom: .5rem;
}
.gw-comparison-spec-table {
    table-layout: fixed;
    min-width: 480px;
}
.gw-comparison-spec-table th:first-child,
.gw-comparison-spec-table td:first-child {
    width: 22%;
}
.gw-comparison-spec-table th a {
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
}
.gw-comparison-spec-table th a:hover { text-decoration: underline; }
.gw-comparison-spec-label {
    color: #777;
    font-weight: 500;
    font-size: 0.875rem;
}
/* Gold-star highlight cell */
.gw-comparison-spec-star {
    background: #FAEEDA;
    font-weight: 600;
    color: #633806;
}
.gw-comp-star {
    color: #BA7517;
    font-size: 0.8rem;
}
.gw-comparison-spec-note {
    font-size: 0.75rem;
    color: #aaa;
    margin: .25rem 0 0;
}

/* ── Closing guidance & CTA ───────────────────────────────────────────────── */
.gw-comparison-closing {
    background: #f7f8f9;
    border-radius: 8px;
    padding: 1.25rem 1.35rem;
}
.gw-comparison-closing .gw-comparison-section-title {
    margin-bottom: .7rem;
}
.gw-comparison-closing-text {
    font-size: 0.9375rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 1.1rem;
}
.gw-comparison-closing-text p:last-child { margin-bottom: 0; }
.gw-comparison-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}
.gw-comparison-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    padding: .55rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}
.gw-comparison-cta-btn:hover { background: #333; color: #fff; }
.gw-comparison-cta-refs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
}
.gw-comparison-cta-ref {
    font-size: 0.8125rem;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}
.gw-comparison-cta-ref:hover { color: #1a1a1a; }

/* ── End: Comparison Page styles ──────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPARISON PAGE — BUG FIXES (v2.93.1)

   Root cause of most issues: the original .hc-ce-* embed CSS used --hc-*
   custom properties that are only defined inside #hook-compare-root (the
   dark-themed tool context). On the light site those variables are undefined,
   so buttons show white-on-white and the canvas background is transparent.
   This block replaces all --hc-* usage with explicit light-theme values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fix 1: Hero suppression ──────────────────────────────────────────────── */
/* CSS belt-and-suspenders alongside the PHP post_thumbnail + the_title filters.
   Covers common Imagely / NextGEN Gallery hero class names.                   */
body.hc-comp-page .page-header,
body.hc-comp-page .page-banner,
body.hc-comp-page .imagely-page-header,
body.hc-comp-page .entry-header-image,
body.hc-comp-page .single-featured-image-header,
body.hc-comp-page .site-header-image,
body.hc-comp-page .wp-post-image,
body.hc-comp-page .post-thumbnail { display: none !important; }

/* ── Fix 2: SVG widget button states — explicit light-theme colors ─────────── */
.hc-ce-btn {
    border-color: #b8b8b8;
    color: #555;
    background: transparent;
}
.hc-ce-btn:hover {
    background: #e8e8e8;
    color: #1a1a1a;
    border-color: #888;
}
.hc-ce-btn--active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}

/* ── Fix 3a: Overlay canvas — dark background so mix-blend-mode:screen works  */
.hc-ce-canvas { background: #f0f0f0; }
.hc-ce-canvas--overlay { background: #1c1c1e; }

/* Fix 3b: Overlay hook layers — must be absolutely positioned to stack.
   .hc-hook-layer normally gets position:absolute from the scoped rule
   #hook-compare-root .hc-hook-layer, which doesn't apply here.               */
.hc-ce-canvas--overlay .hc-hook-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    mix-blend-mode: screen;
    pointer-events: none;
}
.hc-ce-canvas--overlay .hc-hook-layer svg {
    width: 100%; height: 100%; display: block;
}

/* ── Fix 4: Spec table header — lighter background, readable dark text ──────── */
.gw-comparison-spec-table thead th,
.gw-comparison-spec-table thead tr th {
    background: #f0f2f5 !important;
    color: #333 !important;
}
.gw-comparison-spec-table thead th a,
.gw-comparison-spec-table thead th a:link,
.gw-comparison-spec-table thead th a:visited {
    color: #1a1a1a !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
}
.gw-comparison-spec-table thead th a:hover { text-decoration: underline; }

/* ── Fix 5: Profile text — increase from 0.9rem ─────────────────────────────── */
.gw-comparison-profile-text { font-size: 0.9375rem; }
.gw-comparison-profile-spec { font-size: 0.8125rem; }

/* ── Fix 6: CTA button — force white text over theme's global a{} rule ─────── */
.gw-comparison-cta-btn,
.gw-comparison-cta-btn:link,
.gw-comparison-cta-btn:visited,
.gw-comparison-cta-btn:hover,
.gw-comparison-cta-btn:active { color: #fff !important; }

/* Fix legend + CTA link colors on the light page background */
.hc-ce-legend-item         { color: #555; }
.hc-ce-legend-item:hover   { color: #1a1a1a; }
.hc-ce-cta-link            { color: #0b6dc7; }
.hc-ce-cta-link:hover      { text-decoration: underline; }

/* ── End: v2.93.1 bug fixes ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPARISON EMBED — Photos mode, Lightbox, Size label  (v2.94.0)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Photos mode canvas */
.hc-ce-canvas--photos {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #f0f0f0;
    min-height: 220px;
    align-items: stretch;
}
.hc-ce-photo-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hc-ce-photo-thumb {
    width: 100%;
    border: none;
    background: #ddd;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: block;
    transition: opacity 0.15s;
}
.hc-ce-photo-thumb:hover { opacity: 0.88; }
.hc-ce-photo-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.hc-ce-photo-more {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    padding: 2px 6px;
    pointer-events: none;
}
.hc-ce-photo-ph {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    border-radius: 6px;
    color: #aaa;
    font-size: 12px;
}
.hc-ce-photo-name {
    font-size: 11px;
    color: #666;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hc-ce-no-photos {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #888;
    font-size: 13px;
    width: 100%;
}

/* Size reference label */
.hc-ce-size-ref {
    font-size: 11px;
    color: #999;
    margin: 5px 0 0;
    font-style: italic;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.hc-ce-lb {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
}
.hc-ce-lb--open { display: flex !important; }

.hc-ce-lb-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    cursor: pointer;
}
.hc-ce-lb-inner {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hc-ce-lb-img {
    max-width: 88vw;
    max-height: 82vh;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 60px rgba(0,0,0,0.7);
}
.hc-ce-lb-close {
    position: fixed;
    top: 14px; right: 18px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
}
.hc-ce-lb-close:hover { background: rgba(255,255,255,0.22); }
.hc-ce-lb-nav {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
}
.hc-ce-lb-nav:hover { background: rgba(255,255,255,0.22); }
.hc-ce-lb-prev { left: 12px; }
.hc-ce-lb-next { right: 12px; }
.hc-ce-lb-counter {
    position: fixed;
    bottom: 14px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    z-index: 2;
    pointer-events: none;
}
body.hc-ce-lb-open { overflow: hidden; }

/* ── Footer suppression ───────────────────────────────────────────────────── */
body.hc-comp-page footer,
body.hc-comp-page .site-footer,
body.hc-comp-page #colophon,
body.hc-comp-page .footer-widgets,
body.hc-comp-page #footer,
body.hc-comp-page .footer-area,
body.hc-comp-page .imagely-footer { display: none !important; }

/* ── End: v2.94.0 additions ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   v2.95.0 — Lightbox (Compare-style), Size selector, CSS overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lightbox — full Compare-tool style ─────────────────────────────────── */
/* Overrides the previous lightbox CSS */
.hc-ce-lb {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    flex-direction: column;
    background: rgba(18,18,20,0.97);
}
.hc-ce-lb--open { display: flex !important; }

.hc-ce-lb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(0,0,0,0.45);
    flex-shrink: 0;
    min-height: 46px;
}
.hc-ce-lb-bar-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-ce-lb-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.hc-ce-lb-counter {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.hc-ce-lb-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 24px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    position: static;
    top: auto; right: auto;
    transform: none;
}
.hc-ce-lb-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.hc-ce-lb-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    overflow: hidden;
}
.hc-ce-lb-img {
    max-width: 92%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 3px;
}

/* Nav arrows — inside .hc-ce-lb-main (position relative), not fixed */
.hc-ce-lb-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 38px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1;
}
.hc-ce-lb-nav:hover { background: rgba(255,255,255,0.2); }
.hc-ce-lb-prev { left: 10px; }
.hc-ce-lb-next { right: 10px; }

/* Thumbnail strip */
.hc-ce-lb-thumbs {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 10px 16px;
    background: rgba(0,0,0,0.45);
    flex-shrink: 0;
    overflow-x: auto;
}
.hc-ce-lb-thumb {
    flex-shrink: 0;
    width: 58px; height: 44px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #333;
    padding: 0;
    transition: border-color 0.15s;
}
.hc-ce-lb-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.hc-ce-lb-thumb:hover img { opacity: 0.9; }
.hc-ce-lb-thumb--active { border-color: #5DB7E0; }
.hc-ce-lb-thumb--active img { opacity: 1; }

/* ── Size selector ─────────────────────────────────────────────────────── */
.hc-ce-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.hc-ce-size-lbl {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}
.hc-ce-size-sel {
    font-size: 12px;
    color: #1a1a1a;
    background: #f5f5f5;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    appearance: auto;
}
.hc-ce-size-sel:focus {
    outline: 2px solid #5DB7E0;
    outline-offset: 1px;
}

/* ── End: v2.95.0 ─────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   v2.95.1 — Table header readability (both comparison tables)
   The theme's .gw-table thead th rule paints a dark background; links inherit
   the global blue. Force a light header with dark text on BOTH the Quick Picks
   and Specifications tables. Scoped to body.hc-comp-page for safety.
   ═══════════════════════════════════════════════════════════════════════════ */
body.hc-comp-page .gw-comparison-picks-table thead,
body.hc-comp-page .gw-comparison-picks-table thead tr,
body.hc-comp-page .gw-comparison-picks-table thead th,
body.hc-comp-page .gw-comparison-spec-table thead,
body.hc-comp-page .gw-comparison-spec-table thead tr,
body.hc-comp-page .gw-comparison-spec-table thead th {
    background: #eef1f5 !important;
    background-color: #eef1f5 !important;
    color: #1a1a1a !important;
    border-color: #dde2e8 !important;
    text-shadow: none !important;
}
body.hc-comp-page .gw-comparison-picks-table thead th,
body.hc-comp-page .gw-comparison-spec-table thead th {
    font-weight: 600;
    font-size: 0.8125rem;
}
body.hc-comp-page .gw-comparison-spec-table thead th a,
body.hc-comp-page .gw-comparison-spec-table thead th a:link,
body.hc-comp-page .gw-comparison-spec-table thead th a:visited,
body.hc-comp-page .gw-comparison-spec-table thead th a:hover {
    color: #1a1a1a !important;
    text-decoration: none;
}
/* ── End: v2.95.1 ─────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   v2.96.0 — Per-hook size selection + 1/10" measurement grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* SVG foreground must sit above the grid */
.hc-ce-svg-wrap { position: relative; }
.hc-ce-svg-fg   { position: relative; z-index: 1; }

/* 1/10" grid — fills the svg wrap (side-by-side) or canvas (overlay) */
.hc-ce-grid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.hc-ce-grid-line {
    stroke: #cfe3f5;          /* pale blue, echoes the photo grid */
    stroke-width: 0.4;
    vector-effect: non-scaling-stroke;
}
/* Overlay grid sits on the dark canvas — lighten the lines */
.hc-ce-canvas--overlay .hc-ce-grid-line { stroke: rgba(120,170,210,0.28); }
.hc-ce-grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

/* Per-hook size control — laid out as a labelled block */
.hc-ce-hook-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}
.hc-ce-hook-size-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hc-ce-hook-size-sw {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hc-ce-hook-size-name {
    font-size: 12px;
    color: #444;
    font-weight: 500;
}
.hc-ce-hook-size-sel {
    font-size: 12px;
    color: #1a1a1a;
    background: #f5f5f5;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    appearance: auto;
    max-width: 100%;
}
.hc-ce-hook-size-sel:focus { outline: 2px solid #5DB7E0; outline-offset: 1px; }
.hc-ce-hook-size-static {
    font-size: 12px;
    color: #666;
}

/* Size control strip below the canvas — even columns, matches canvas layout */
.hc-ce-size-strip {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.hc-ce-size-strip-item {
    flex: 1;
    min-width: 0;
}

/* Per-hook size reference + honesty warning */
.hc-ce-size-warn {
    font-size: 11px;
    color: #9a6a00;
    margin: 3px 0 0;
}

/* ── End: v2.96.0 ─────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   v2.98.0 — Phase 5: Compare tool comparison banner
   Renders inside #hook-compare-root (dark theme), above the comparison table.
   ═══════════════════════════════════════════════════════════════════════════ */
.hc-cmp-banner-slot { margin: 0 0 14px; }

.hc-cmp-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--hc-bg-raised, #232730);
    border: 1px solid var(--hc-border-mid, #38404d);
    border-left: 3px solid var(--hc-accent, #5DB7E0);
    border-radius: 8px;
    padding: 12px 15px;
}
.hc-cmp-banner-icon {
    color: var(--hc-accent, #5DB7E0);
    font-size: 15px;
    line-height: 1.4;
    flex-shrink: 0;
}
.hc-cmp-banner-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hc-cmp-banner-lead {
    font-size: 13px;
    color: var(--hc-text-secondary, #aab2bd);
}
.hc-cmp-banner-links {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hc-cmp-banner-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hc-accent, #5DB7E0);
    text-decoration: none;
}
.hc-cmp-banner-link:hover { text-decoration: underline; }
/* ── End: v2.98.0 ─────────────────────────────────────────────────────── */