/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
    --bg:           #f0f2f5;
    --surface:      #ffffff;
    --surface-2:    #f8f9fa;
    --border:       #e2e8f0;
    --accent:       #3b82f6;
    --accent-dark:  #2563eb;
    --text:         #1e293b;
    --text-muted:   #64748b;
    --danger:       #ef4444;
    --warning:      #f59e0b;
    --success:      #22c55e;
    --info:         #06b6d4;
    --font:         'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono:         'Consolas', 'Cascadia Code', monospace;
    --radius:       10px;
    --radius-sm:    6px;
    --shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  }
  
  /* ── Reset / base ───────────────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  body { background: var(--bg); font-family: var(--font); color: var(--text); margin: 0; }
  code { font-family: var(--mono); font-size: 0.88em; background:#f1f5f9; padding:1px 5px; border-radius:4px; }
  
  /* ── App shell ──────────────────────────────────────────────────────────────── */
  .app-shell { display: flex; flex-direction: column; min-height: 100vh; }
  
  .app-header {
    background: #1e293b;
    color: #fff;
    padding: 0 1.5rem;
    height: 52px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  }
  .app-header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .app-title  { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
  .app-version { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-left: 8px; }
  .app-build  { font-size: 0.68rem; color: rgba(255,255,255,0.3); }
  
.app-content {
    flex: 1;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
}
  
  /* ── Landing ─────────────────────────────────────────────────────────────────── */
.landing-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4vh 1rem 2rem;
    min-height: calc(100vh - 52px);
}

.landing-scan-scope {
    width: min(500px, calc(100vw - 2rem));
    margin-top: 1.25rem;
}
  .landing-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    max-width: 500px;
    width: 100%;
  }
  .landing-icon { font-size: 3rem; color: var(--accent); margin-bottom: 1rem; }
  .landing-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
  .landing-sub { color: var(--text-muted); margin-bottom: 2rem; line-height: 1.6; }
  
  .btn-load {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    padding: 0.7rem 2rem; border-radius: 8px;
    font-weight: 600; font-size: 0.95rem;
    border: none; cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }
  .btn-load:hover { background: var(--accent-dark); transform: translateY(-1px); }
  
  /* ── Alert ───────────────────────────────────────────────────────────────────── */
  .insp-alert {
    display: flex; align-items: center; gap: 8px;
    padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    margin-bottom: 1rem; font-size: 0.9rem;
  }
  .insp-alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
  .insp-alert-close {
    background: none; border: none; cursor: pointer; margin-left: auto;
    color: inherit; opacity: 0.6; font-size: 1.1rem; padding: 0;
  }
  .insp-alert-close:hover { opacity: 1; }
  
  /* ── Toolbar ─────────────────────────────────────────────────────────────────── */
  .insp-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 8px; margin-bottom: 1rem;
    background: var(--surface); padding: 0.65rem 1rem;
    border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }
  .insp-toolbar-title { font-weight: 600; font-size: 0.9rem; }
  .badge-count {
    background: #e0e7ff; color: #4338ca;
    font-size: 0.72rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px;
  }
  
  .btn-toolbar-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-muted); border-radius: var(--radius-sm);
    padding: 0.35rem 0.85rem; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
  }
  .btn-toolbar-action:hover { background: var(--border); color: var(--text); }
  
  /* ── Tabs ────────────────────────────────────────────────────────────────────── */
  .insp-tabs {
    display: flex; gap: 4px; margin-bottom: 1rem;
    background: var(--surface); padding: 4px;
    border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid var(--border);
    width: fit-content;
  }
  .insp-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 0.45rem 1.1rem; border-radius: 7px;
    font-size: 0.875rem; font-weight: 500;
    border: none; cursor: pointer; background: transparent;
    color: var(--text-muted); transition: all 0.15s;
  }
  .insp-tab:hover { background: var(--surface-2); color: var(--text); }
  .insp-tab.active { background: var(--accent); color: #fff; }
  
  .tab-badge {
    font-size: 0.68rem; font-weight: 700; padding: 1px 6px;
    border-radius: 10px; margin-left: 2px;
  }
  .tab-badge-crit { background: rgba(239,68,68,0.18); color: #dc2626; }
  .tab-badge-warn { background: rgba(245,158,11,0.18); color: #b45309; }
  .insp-tab.active .tab-badge-crit { background: rgba(255,255,255,0.25); color: #fff; }
  .insp-tab.active .tab-badge-warn { background: rgba(255,255,255,0.25); color: #fff; }
  
  /* ── Panel ───────────────────────────────────────────────────────────────────── */
  .insp-panel {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); border: 1px solid var(--border);
    overflow: hidden;
  }
  .insp-panel-header {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 0.95rem;
    background: var(--surface-2);
  }
  
  /* ── Result cards (mismatch analyzer) ──────────────────────────────────────── */
  .result-card { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
  .result-card-header {
    display: flex; align-items: center; gap: 6px;
    padding: 0.6rem 0.9rem; font-weight: 600; font-size: 0.85rem;
    color: #fff;
  }
  .result-card-warn   .result-card-header { background: #d97706; }
  .result-card-danger .result-card-header { background: #dc2626; }
  .result-card-info   .result-card-header { background: #0891b2; color:#fff; }
  .result-card-success .result-card-header { background: #16a34a; }
  
  .result-card-body { max-height: 420px; overflow-y: auto; }
  
  .result-group-header {
    display: flex; align-items: center; gap: 4px;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 600;
    color: var(--text);
  }
  .result-list { list-style: none; margin: 0; padding: 0; }
  .result-list-item {
    display: flex; align-items: center;
    padding: 0.3rem 0.75rem 0.3rem 1rem;
    font-size: 0.82rem; border-bottom: 1px solid var(--border);
    transition: background 0.1s;
  }
  .result-list-item:hover { background: var(--surface-2); }
  .result-list-item.checked-item { text-decoration: line-through; opacity: 0.45; }
  .result-empty {
    padding: 1.5rem; text-align: center;
    font-size: 0.85rem; color: var(--text-muted);
  }
  
  .match-badge {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 7px; font-size: 0.75rem; color: var(--text-muted);
  }
  
  /* ── Rules tab ───────────────────────────────────────────────────────────────── */
  .insp-select {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.3rem 0.6rem;
    font-size: 0.8rem; color: var(--text); cursor: pointer;
  }
  
  .rules-summary {
    display: flex; align-items: center; gap: 0;
    padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }
  .rules-summary-item { display: flex; flex-direction: column; align-items: center; padding: 0 1.5rem; }
  .rsi-val { font-size: 1.4rem; font-weight: 700; line-height: 1; }
  .rsi-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
  .rules-summary-sep { width: 1px; height: 32px; background: var(--border); }
  
  /* Badges */
  .badge-crit {
    background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
    font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 10px;
  }
  .badge-warn {
    background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
    font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 10px;
  }
  
  .canvas-block {
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
  }
  .canvas-block.has-critical { border-left-color: var(--danger); }
  .canvas-block.has-warning  { border-left-color: var(--warning); }
  
  .canvas-block-header {
    display: flex; align-items: center; padding: 0.65rem 1.25rem;
    cursor: pointer; transition: background 0.15s; gap: 4px;
    font-size: 0.88rem;
  }
  .canvas-block-header:hover { background: var(--surface-2); }
  .canvas-name { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 0.85rem; }
  
  .canvas-block-body { padding: 0 1.25rem 1rem; overflow-x: auto; }
  
  .viol-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.5rem; }
  .viol-table th {
    text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.6rem; text-align: left; font-weight: 600;
  }
  .viol-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .viol-row:last-child td { border-bottom: none; }
  .viol-row.viol-critical td:first-child { border-left: 2px solid var(--danger); }
  .viol-row.viol-warning  td:first-child { border-left: 2px solid var(--warning); }
  .viol-row:hover td { background: var(--surface-2); }
  
  .rule-badge {
    background: #f1f5f9; border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 6px;
    font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted);
  }

/* ═══════════════════════════════════════════════════════════════════════════
   OPTIONAL SVG VISUAL REVIEW
═══════════════════════════════════════════════════════════════════════════ */

.visual-review-shell {
    margin: 0.75rem 0 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.visual-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
}

.visual-review-collapsed {
    padding: 0.75rem 0.85rem;
    color: #64748b;
    background: #fff;
    font-size: 0.82rem;
}

.visual-review-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.visual-control-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.visual-control-label {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

.visual-preview-note {
    margin-left: auto;
    color: #64748b;
    font-size: 0.76rem;
}

.visual-review-legend {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--border);
    color: #475569;
    background: #f8fafc;
    font-size: 0.76rem;
}

.visual-review-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.legend-swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(15, 23, 42, 0.28);
    border-radius: 3px;
}

.legend-groupbox {
    background: #dbeafe;
    border-color: #60a5fa;
}

.legend-button {
    background: #475569;
    border-color: #1e293b;
}

.legend-bitstate {
    background: #a5f3fc;
    border-color: #0891b2;
}

.legend-warning {
    background: #fef3c7;
    border-color: #f59e0b;
}

.legend-critical {
    background: #fee2e2;
    border-color: #ef4444;
}

.svg-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    max-height: 520px;
    padding: 0.85rem;
    overflow: auto;
    background: #e2e8f0;
}

.svg-canvas {
    display: block;
    width: 100%;
    min-width: 400px;
    max-width: 100%;
    max-height: 480px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}

.svg-background {
    fill: #ffffff;
}

.svg-grid {
    opacity: 0.65;
    pointer-events: none;
}

.svg-element-group {
    cursor: pointer;
    outline: none;
    transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-box: fill-box;
    transform-origin: center;
}

.svg-element {
    stroke-width: 1.4;
    transition: opacity 0.15s ease, stroke-width 0.15s ease;
}

.svg-element-group:hover .svg-element {
    stroke-width: 2.5;
}

.svg-element-group:focus .svg-element {
    stroke: #2563eb;
    stroke-width: 3;
}

/* Base colors */
.svg-type-groupbox {
    fill: rgba(219, 234, 254, 0.34);
    stroke: #3b82f6;
    stroke-dasharray: 3 1;
}

.svg-type-card {
    fill: rgba(224, 231, 255, 0.42);
    stroke: #6366f1;
}

.svg-type-button {
    fill: #475569;
    stroke: #1e293b;
}

.svg-type-bitstate {
    fill: #a5f3fc;
    stroke: #0891b2;
}

.svg-type-control {
    fill: #e2e8f0;
    stroke: #64748b;
}

/* Rule status */
.svg-status-warning {
    stroke: #f59e0b !important;
    stroke-width: 2.5;
}

.svg-status-critical {
    stroke: #ef4444 !important;
    stroke-width: 3;
}

.svg-element-selected .svg-element {
    stroke: #2563eb !important;
    stroke-width: 3.5 !important;
}

.svg-selected-outline {
    fill: none;
    stroke: #2563eb;
    stroke-width: 2;
    stroke-dasharray: 3 2;
    pointer-events: none;
}

.svg-element-label {
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 6px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    paint-order: stroke;
    stroke-width: 1.25px;
    stroke-linejoin: round;
}

.svg-label-light {
    fill: #ffffff;
    stroke: rgba(15, 23, 42, 0.35);
}

/* Fixes the unreadable white GroupBox/Card labels. */
.svg-label-dark {
    fill: #0f172a;
    stroke: rgba(255, 255, 255, 0.95);
}

.visual-selection-panel {
    min-height: 74px;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.selected-issue-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.selected-issue {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    font-size: 0.77rem;
    line-height: 1.35;
}

.selected-issue.critical {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.selected-issue.warning {
    color: #92400e;
    border: 1px solid #fde68a;
    background: #fffbeb;
}

@media (max-width: 950px) {
    .visual-preview-note {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 850px) {
    .svg-canvas-wrap {
        min-height: 210px;
        padding: 0.5rem;
    }

    .svg-canvas {
        min-width: 330px;
    }
}
/* ── Visual review: control list + SVG workspace ────────────────────────── */

.visual-workspace {
    display: flex;
    min-height: 390px;
    border-bottom: 1px solid var(--border);
    background: #e2e8f0;
}

.visual-control-list {
    display: flex;
    width: clamp(190px, 20%, 290px);
    min-width: 190px;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    background: #fff;
    transition: width 0.22s ease, min-width 0.22s ease;
}

.visual-control-list.collapsed {
    width: 42px;
    min-width: 42px;
}

.visual-control-list-header {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.55rem 0.45rem 0.7rem;
    border-bottom: 1px solid var(--border);
    color: #334155;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.visual-control-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 10px;
    color: #475569;
    background: #e2e8f0;
    font-size: 0.68rem;
}

.visual-list-toggle {
    width: 29px;
    height: 28px;
    padding: 0;
    flex: 0 0 auto;
}

.visual-control-search {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0.5rem;
    padding: 0.34rem 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    background: #fff;
}

.visual-control-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #1e293b;
    font-size: 0.75rem;
}

.visual-control-search button {
    display: flex;
    padding: 0;
    border: 0;
    color: #64748b;
    background: transparent;
    cursor: pointer;
}

.visual-control-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.15rem 0;
}

.visual-control-item {
    display: flex;
    width: 100%;
    min-height: 47px;
    align-items: flex-start;
    gap: 7px;
    padding: 0.45rem 0.55rem;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    cursor: pointer;
}

.visual-control-item:hover {
    background: #f8fafc;
}

.visual-control-item.selected {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.visual-control-status {
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: #94a3b8;
}

.visual-control-status.clean {
    background: #22c55e;
}

.visual-control-status.warning {
    background: #f59e0b;
}

.visual-control-status.critical {
    background: #ef4444;
}

.visual-control-item-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.visual-control-name {
    overflow: hidden;
    color: #334155;
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-control-meta {
    overflow: hidden;
    color: #94a3b8;
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-control-empty {
    padding: 1rem 0.6rem;
    color: #64748b;
    font-size: 0.75rem;
    text-align: center;
}

.visual-svg-stage {
    display: flex;
    min-width: 0;
    flex: 1;
}

/* Override prior SVG wrapper styling inside the split workspace. */
.visual-svg-stage .svg-canvas-wrap {
    width: 100%;
    min-height: 390px;
    max-height: 570px;
    border: 0;
}

@media (max-width: 850px) {
    .app-content {
        padding: 1rem 0.75rem;
    }

    .visual-control-list {
        width: 180px;
        min-width: 180px;
    }

    .visual-svg-stage .svg-canvas-wrap {
        min-height: 300px;
    }
}

@media (max-width: 620px) {
    .visual-workspace {
        flex-direction: column;
    }

    .visual-control-list,
    .visual-control-list.collapsed {
        width: 100%;
        min-width: 100%;
        max-height: 180px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .visual-control-list.collapsed {
        max-height: none;
    }
}

/* ── Canvas focus / measurement extensions ─────────────────────────────── */

.visual-control-row {
    display: flex;
    width: 100%;
    min-height: 47px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.visual-control-row:hover {
    background: #f8fafc;
}

.visual-control-row.selected {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.visual-control-row .visual-control-item {
    border-bottom: 0;
}

.visual-focus-button {
    width: 30px;
    flex: 0 0 30px;
    margin: 0.35rem 0.35rem 0.35rem 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.visual-control-row:hover .visual-focus-button,
.visual-control-row.selected .visual-focus-button {
    opacity: 1;
}

.visual-focus-button:hover {
    color: #2563eb;
    background: #dbeafe;
}

.measurement-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    color: #475569;
    background: #fff;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
}

.measurement-toggle:hover {
    border-color: #a78bfa;
    background: #faf5ff;
}

.measurement-toggle input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #7c3aed;
}

.measurement-legend {
    margin-left: auto;
    color: #7c3aed;
}

/* SVG transform animation for Before / Suggested After movement. */
.svg-element-group {
    transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Measurements use violet so they remain distinct from red/amber rule status. */
.svg-measurement-line {
    stroke: #7c3aed;
    stroke-width: 1.2;
    stroke-dasharray: 2 1;
}

.svg-measurement-label {
    fill: #5b21b6;
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 6px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 1.5px;
    stroke-linejoin: round;
}
/* ── Visual review refinements: selection, focus, toggle, measurements ─── */

/* Target/focus button: neutral by default, shown only on hover.
   It does not inherit the selected-row blue styling. */
.visual-focus-button {
    width: 30px;
    flex: 0 0 30px;
    margin: 0.35rem 0.35rem 0.35rem 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.visual-control-row:hover .visual-focus-button {
    opacity: 1;
}

.visual-focus-button:hover {
    color: #475569;
    background: #e2e8f0;
}

/* Only the actually focused GroupBox/Card gets a blue focus indicator. */
.visual-control-row.focused .visual-focus-button {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #dbeafe;
    opacity: 1;
}

.visual-control-row.focused {
    background: #f8fbff;
    box-shadow: inset 3px 0 0 #60a5fa;
}

/* Selected control remains visibly selected in the list. */
.visual-control-row.selected {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.visual-control-row.selected.focused {
    background: #eaf3ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

/* Before / Suggested After compact click switch. */
.before-after-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.before-after-switch span.active {
    color: #2563eb;
}

.before-after-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.switch-slider {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    border-radius: 99px;
    background: #cbd5e1;
    transition: background 0.2s ease;
}

.switch-slider::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    content: "";
    transition: transform 0.2s ease;
}

.before-after-switch input:checked + .switch-slider {
    background: #2563eb;
}

.before-after-switch input:checked + .switch-slider::after {
    transform: translateX(14px);
}

/* Measurement display */
.measurement-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    color: #475569;
    background: #ffffff;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
}

.measurement-toggle:hover {
    border-color: #a78bfa;
    background: #faf5ff;
}

.measurement-toggle input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #7c3aed;
}

.measurement-legend {
    margin-left: auto;
    color: #7c3aed;
}

.svg-measurement-line {
    stroke: #7c3aed;
    stroke-width: 1.2;
    stroke-dasharray: 2 1;
}

.svg-measurement-label {
    fill: #5b21b6;
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 6px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 1.5px;
    stroke-linejoin: round;
}
/* ── Refined visual review interactions ─────────────────────────────────── */

/* Strong, always-visible list selection state. */
.visual-control-row.selected {
    background: #eaf3ff !important;
    box-shadow: inset 4px 0 0 #2563eb !important;
}

.visual-control-row.selected .visual-control-name {
    color: #1d4ed8;
}

.visual-control-row.selected .visual-control-meta {
    color: #3b82f6;
}

.visual-control-row.selected .visual-control-status {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

/* Focus is separate from selection. */
.visual-control-row.focused:not(.selected) {
    background: #f8fbff;
    box-shadow: inset 3px 0 0 #93c5fd;
}

/* Focus icon is neutral. It only appears while the row is hovered,
   unless that container is actually focused. */
.visual-focus-button {
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
    opacity: 0;
}

.visual-control-row:hover .visual-focus-button {
    opacity: 1;
}

.visual-focus-button:hover {
    color: #475569;
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.visual-control-row.focused .visual-focus-button {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #93c5fd;
    opacity: 1;
}

/* Before / Suggested After click switch. */
.before-after-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 600;
    user-select: none;
}

.before-after-switch span.active {
    color: #2563eb;
}

.before-after-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.switch-slider {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    border-radius: 99px;
    background: #cbd5e1;
    transition: background 0.2s ease;
}

.switch-slider::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    content: "";
    transition: transform 0.2s ease;
}

.before-after-switch input:checked + .switch-slider {
    background: #2563eb;
}

.before-after-switch input:checked + .switch-slider::after {
    transform: translateX(14px);
}

/* Measurements: violet, clearly separate from rule warning/error colors. */
.svg-measurement-line {
    stroke: #7c3aed;
    stroke-width: 1.2;
    stroke-dasharray: 2 1;
}

.svg-measurement.small .svg-measurement-line {
    stroke: #9333ea;
    stroke-width: 1.45;
}

.svg-measurement-label {
    fill: #5b21b6;
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 6px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 1.7px;
    stroke-linejoin: round;
}
/* Coordinate comparison mini-table */
.coordinate-compare {
    margin-top: 0.45rem;
    border-collapse: collapse;
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 0.72rem;
}

.coordinate-compare th,
.coordinate-compare td {
    padding: 2px 8px;
    text-align: right;
    border: 1px solid #dbe3ee;
}

.coordinate-compare th:first-child,
.coordinate-compare td:first-child {
    text-align: left;
    font-family: inherit;
    font-weight: 700;
}

.coordinate-compare th {
    color: #64748b;
    background: #f8fafc;
}

.coordinate-compare .suggested-row {
    color: #1d4ed8;
    background: #eff6ff;
}

/* Keep selected state visibly stronger than normal/focused rows. */
.visual-control-row.selected,
.visual-control-row.selected .visual-control-item {
    background: #eaf3ff !important;
    box-shadow: inset 4px 0 0 #2563eb !important;
}

.visual-control-row.selected .visual-control-name {
    color: #1d4ed8 !important;
}

.visual-control-row.selected .visual-control-meta {
    color: #3b82f6 !important;
}

.visual-control-row.selected .visual-control-status {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Measurement extension lines and readable labels */
.svg-measurement-extension {
    stroke: #a78bfa;
    stroke-width: 0.75;
    stroke-dasharray: 1 1;
}

.svg-measurement-line {
    stroke: #7c3aed;
    stroke-width: 1.25;
}

.svg-measurement.small .svg-measurement-line {
    stroke: #9333ea;
    stroke-width: 1.55;
}

.svg-measurement-label {
    fill: #5b21b6;
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 6px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255,255,255,0.98);
    stroke-width: 1.8px;
    stroke-linejoin: round;
}
/* ── Landing / loading card: long folder and canvas names ──────────────── */

.landing-card {
    width: min(500px, calc(100vw - 2rem));
    min-width: 0;
    overflow: hidden;
}

.loading-progress-status {
    display: -webkit-box;
    max-width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.loading-progress-bar {
    width: min(320px, 100%) !important;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 520px) {
    .landing-card {
        padding: 2rem 1.25rem;
    }
}
/* ── Landing / loading card: long folder and canvas names ──────────────── */

.landing-card {
    width: min(500px, calc(100vw - 2rem));
    min-width: 0;
    overflow: hidden;
}

.loading-progress-status {
    display: -webkit-box;
    max-width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.loading-progress-bar {
    width: min(320px, 100%) !important;
    max-width: 100%;
    margin: 0 auto;
}

/* ── Visual review: persistent selected-element details ────────────────── */

.visual-selection-panel-sticky {
    position: sticky;
    top: 52px;
    z-index: 20;
    max-height: 250px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.visual-selection-panel-sticky .selected-issue-list {
    max-height: 125px;
    overflow-y: auto;
    padding-right: .2rem;
}

@media (max-width: 850px) {
    .visual-selection-panel-sticky {
        position: static;
        max-height: 300px;
    }
}

@media (max-width: 520px) {
    .landing-card {
        padding: 2rem 1.25rem;
    }
}
/* ── In-page visual-review navigation ─────────────────────────────────── */

/*
 * The sticky application navbar is 52px high. These values ensure an anchor
 * target is not hidden behind it after a Canvas/Details navigation click.
 */
#visual-review-header,
#visual-details,
#visual-drawing {
    scroll-margin-top: 68px;
    scroll-behavior: smooth;
}
.regex-warn-icon {
    color: #d97706;       /* amber-600, matches badge-warn tone */
    font-size: 0.8rem;
    margin-left: 6px;
    cursor: help;
    vertical-align: middle;
}