/*
 * 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-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;
}

@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-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;
}

/* 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);
}

/* ── 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;
    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-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; }

@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%; }
}