/* ==========================================================================
   SKB REFERENCE CHECKER — page styles

   Extracted from the <style> block that used to sit in skbref.html. The
   rules are unchanged; only their home is.
   ========================================================================== */

    header { position: fixed; inset: 0 0 auto; z-index: 20; background: var(--footer-bg); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
    body { overflow-x: hidden; }
    /* kvot.css already positions .content below the header with
       top: var(--header-height), so the top padding is breathing room only.
       Adding the header height again left 43px of dead space. */
    .content { min-height: calc(100vh - var(--header-height) - 61px); padding: 13px 0 48px; }
    #app { box-sizing: border-box; width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 28px 56px; }

    #dropzone { margin-bottom: 24px; padding: 48px 24px; border: 2px dashed var(--border-color); border-radius: 14px; background: var(--bg-secondary); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
    #dropzone.drag-over { border-color: var(--color-kvot-bright); background: color-mix(in srgb, var(--color-kvot-bright) 6%, var(--bg-secondary)); }
    #dropzone input { display: none; }
    #dropzone .dz-icon { margin-bottom: 10px; font-size: 2.4rem; opacity: .6; }
    #dropzone .dz-label { margin-bottom: 4px; color: var(--text-primary); font-size: 1rem; font-weight: 600; }
    #dropzone .dz-sub { color: var(--text-muted); font-size: .84rem; }
    .primary-btn { display: inline-block; padding: 8px 20px; border: 0; border-radius: 20px; background: var(--color-kvot-bright); color: var(--on-bright); font-size: .88rem; font-weight: 600; cursor: pointer; transition: opacity .15s; }
    #dropzone .primary-btn { margin-top: 14px; }
    .primary-btn:hover:not(:disabled) { opacity: .88; }
    .primary-btn:disabled { cursor: wait; opacity: .6; }

    #status-bar { display: none; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); color: var(--text-secondary); font-size: .88rem; }
    #status-bar.show { display: flex; }
    .spinner { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid var(--border-color); border-top-color: var(--color-kvot-bright); border-radius: 50%; animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .settings-heading { margin: 0 0 8px; color: var(--text-secondary); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .rule-pack-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .rule-pack-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid var(--border-color);
      border-radius: 9px;
      background: var(--bg-surface);
      font-size: .85rem;
    }
    .rule-pack-row.built-in { background: transparent; border-style: dashed; }
    .rule-pack-row label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
    .rule-pack-row label:has(input:disabled) { cursor: default; color: var(--text-secondary); }
    .rule-pack-row input[type=checkbox] { accent-color: var(--color-kvot-bright); }
    .rule-pack-count {
      padding: 2px 8px;
      border-radius: 12px;
      background: var(--bg-secondary);
      color: var(--text-muted);
      font-size: .74rem;
      white-space: nowrap;
    }
    .rule-pack-note { grid-column: 1 / -1; margin: -2px 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
    .rule-pack-remove {
      padding: 3px 9px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: none;
      color: var(--text-muted);
      font: inherit;
      font-size: .76rem;
      cursor: pointer;
    }
    .rule-pack-remove:hover { border-color: var(--color-kvot-accent); color: var(--color-kvot-accent); }
    #rule-pack-status { color: var(--text-secondary); font-size: .8rem; }
    #rule-pack-status.error { color: var(--color-kvot-accent); font-weight: 600; }
    .spacing-group { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); }
    .spacing-group > summary { cursor: pointer; font-weight: 600; }
    .spacing-group-row { padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: .86rem; }
    .spacing-group-row:last-child { border-bottom: 0; }
    .spacing-group-count { display: inline-block; min-width: 2.6em; color: var(--text-muted); font-family: ui-monospace, monospace; }

    #doc-info { display: none; margin-bottom: 20px; padding: 10px 16px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); font-size: .84rem; line-height: 1.6; }
    #doc-info.show { display: block; }
    #format-notice { display: none; margin: -12px 0 20px; padding: 10px 16px; border: 1px solid var(--border-color); border-left: 3px solid var(--color-kvot-bright); border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); font-size: .82rem; line-height: 1.6; }
    #format-notice.show { display: block; }
    #format-notice strong { color: var(--text-primary); }
    #format-notice ul { margin: 6px 0 0; padding-left: 20px; }
    #format-notice li { margin: 2px 0; }
    #doc-info strong { color: var(--text-primary); }

    #summary-cards { display: none; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
    #summary-cards.show { display: grid; }
    .sum-card { padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); text-align: center; }
    .sum-card.warn { border-color: var(--color-kvot-accent); background: color-mix(in srgb, var(--color-kvot-accent) 8%, var(--bg-secondary)); }
    .sum-card.ok { border-color: #5cb85c; background: color-mix(in srgb, #5cb85c 8%, var(--bg-secondary)); }
    .sum-label { margin-bottom: 4px; color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
    .sum-value { color: var(--text-primary); font: 700 1.5rem 'SF Mono', Menlo, monospace; }
    .sum-card.warn .sum-value { color: var(--color-kvot-accent); }
    .sum-card.ok .sum-value { color: #5cb85c; }

    /* Animated progress bar used during document processing. */
    #progress-track {
      display: none;
      position: relative;
      height: 7px;
      margin: -10px 0 20px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--border-color);
    }
    #progress-track.show { display: block; }
    #progress-fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--color-kvot-bright);
      transition: width .28s ease;
    }
    #progress-track.indeterminate #progress-fill {
      width: 35%;
      animation: progress-sweep 1.15s ease-in-out infinite;
    }
    @keyframes progress-sweep {
      0% { transform: translateX(-110%); }
      100% { transform: translateX(320%); }
    }
    @media (prefers-reduced-motion: reduce) {
      #progress-fill { transition: none; }
      #progress-track.indeterminate #progress-fill { animation-duration: 2.5s; }
    }

    #style-actions { display: flex; justify-content: flex-start; margin: 0 0 14px; }
    #result-actions {
      display: none;
      justify-content: flex-end;
      margin: -4px 0 20px;
    }
    #result-actions.show { display: flex; }
    #zotero-settings, #citation-styles, #rule-packs { position: relative; }
    #zotero-settings { margin-right: 8px; }
    #rule-packs { margin-right: auto; }
    #zotero-settings > summary,
    #citation-styles > summary,
    #rule-packs > summary {
      padding: 7px 14px;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
      list-style: none;
    }
    #zotero-settings > summary::-webkit-details-marker,
    #citation-styles > summary::-webkit-details-marker,
    #rule-packs > summary::-webkit-details-marker { display: none; }
    #zotero-settings > summary::before { content: '⚙ '; }
    #citation-styles > summary::before { content: '↓ '; }
    #rule-packs > summary::before { content: '▤ '; }
    #zotero-settings > summary:hover,
    #citation-styles > summary:hover,
    #rule-packs > summary:hover { border-color: var(--color-kvot-bright); }
    #zotero-settings[open] > summary,
    #citation-styles[open] > summary,
    #rule-packs[open] > summary {
      border-color: var(--color-kvot-bright);
      background: var(--bg-surface);
    }
    .zotero-settings-panel, .settings-panel {
      position: absolute;
      z-index: 30;
      top: calc(100% + 8px);
      left: 0;
      width: min(620px, calc(100vw - 48px));
      padding: 16px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-secondary);
      box-shadow: 0 8px 28px rgba(0,0,0,.2);
    }
    .zotero-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .zotero-setting { display: flex; flex-direction: column; gap: 4px; }
    /* display: flex outranks the hidden attribute, which left every source's
       fields showing whatever the source. */
    .zotero-setting[hidden] { display: none; }
    .zotero-setting.full { grid-column: 1 / -1; }
    .zotero-setting label { color: var(--text-secondary); font-size: .78rem; font-weight: 700; }
    .zotero-setting input, .zotero-setting select {
      box-sizing: border-box;
      width: 100%;
      padding: 8px 9px;
      border: 1px solid var(--border-color);
      border-radius: 7px;
      background: var(--bg-surface);
      color: var(--text-primary);
    }
    .zotero-settings-actions, .settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .zotero-settings-note, .settings-note { margin-top: 10px; color: var(--text-muted); font-size: .76rem; line-height: 1.4; }
    .settings-note code { padding: 1px 4px; border-radius: 4px; background: var(--bg-surface); font-size: .95em; }
    #zotero-settings-status { color: var(--text-muted); font-size: .78rem; }
    @media (max-width: 650px) {
      .zotero-settings-grid { grid-template-columns: 1fr; }
      .zotero-setting.full { grid-column: auto; }
    }
    #download-results-btn, #download-rule-summary-btn {
      padding: 7px 16px;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
    }
    #download-results-btn:hover, #download-rule-summary-btn:hover { border-color: var(--color-kvot-bright); }

    #reset-btn { display: none; float: right; margin-top: -4px; padding: 5px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); font-size: .82rem; cursor: pointer; }
    #reset-btn.show { display: inline-block; }
    #reset-btn:hover { border-color: var(--color-kvot-bright); color: var(--text-primary); }

    .result-section { margin-bottom: 16px; border-radius: 10px; }
    .result-section summary { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: .88rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
    .result-section summary::-webkit-details-marker { display: none; }
    .result-section summary::before { content: '▸'; flex: 0 0 auto; color: var(--text-muted); font-size: .72em; transition: transform .2s; }
    .result-section[open] > summary::before { transform: rotate(90deg); }
    .result-section[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
    .result-section summary:hover { border-color: var(--color-kvot-bright); background: var(--bg-surface); }
    .section-body { padding: 16px 18px; border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg-secondary); }
    .section-badge { margin-left: auto; padding: 2px 10px; border-radius: 12px; background: var(--border-color); color: var(--text-muted); font-size: .74rem; font-weight: 700; }
    .section-badge.error { background: color-mix(in srgb, var(--color-kvot-accent) 18%, var(--bg-secondary)); color: var(--accent-text); }
    .section-badge.warn { background: color-mix(in srgb, #f0ad4e 18%, var(--bg-secondary)); color: #c87d0a; }
    .section-badge.good { background: color-mix(in srgb, #5cb85c 18%, var(--bg-secondary)); color: #357a35; }

    .ref-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
    .ref-table th { padding: 8px 10px; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
    .ref-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); line-height: 1.4; vertical-align: top; }
    .ref-table tr:last-child td { border-bottom: 0; }
    .ref-table tr:hover td { background: var(--bg-surface); }
    .ref-key { color: var(--color-kvot-accent); font: .83rem 'SF Mono', Menlo, monospace; white-space: nowrap; }
    /*
      The reference list is the one table whose cell contents have no upper
      bound: a key can be an author list of seven names and the reference text
      a full paragraph. With the default automatic layout the widest key sets
      the column width, so one long key took 700 of the 980 available pixels,
      squeezed the reference text into a word-wide ribbon and pushed the Zotero
      column off the right edge. Fixed proportions keep the table inside its
      container whatever a document contains, and the key wraps instead of
      forcing the table wider.
    */
    .ref-list-table { table-layout: fixed; }
    .ref-list-table col.col-key { width: 20%; }
    .ref-list-table col.col-text { width: 38%; }
    .ref-list-table col.col-cited { width: 7%; }
    .ref-list-table col.col-sections { width: 16%; }
    .ref-list-table col.col-zotero { width: 19%; }
    .ref-list-table .ref-key { display: block; white-space: normal; overflow-wrap: anywhere; }
    .ref-list-table .ref-text { max-width: none; }
    .ref-list-table td { overflow-wrap: anywhere; }
    .ref-list-table .zotero-cell { min-width: 0; }
    .ref-text { max-width: 420px; color: var(--text-secondary); }
    /* The cell is set in the secondary colour, which a bold run would
       inherit and barely stand out in — the same reason #format-notice
       strong is lifted to the primary colour. */
    .ref-text strong { color: var(--text-primary); }
    .cite-count { color: var(--text-primary); font-weight: 700; }
    .cite-pages { margin-top: 2px; color: var(--text-muted); font-size: .78rem; }
    .warn-row td { background: color-mix(in srgb, #f0ad4e 5%, var(--bg-secondary)); }
    .error-row td { background: color-mix(in srgb, var(--color-kvot-accent) 5%, var(--bg-secondary)); }
    .issue-list { margin: 0; padding-left: 16px; color: var(--color-kvot-accent); font-size: .84rem; }
    .tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); font-size: .82rem; font-weight: 500; }
    .tag.warn-tag { border-color: #f0ad4e; background: color-mix(in srgb, #f0ad4e 8%, var(--bg-secondary)); color: #c87d0a; }
    .empty-notice { padding: 6px 0; color: var(--text-muted); font-size: .88rem; font-style: italic; }

    .zotero-cell { min-width: 165px; }
    .zotero-row-btn {
      padding: 6px 12px;
      border: 1px solid var(--color-kvot-bright);
      border-radius: 16px;
      background: var(--bg-secondary);
      color: var(--color-kvot-bright);
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
    }
    a.zotero-row-btn { display: inline-block; text-decoration: none; }
    .zotero-row-btn:hover:not(:disabled) { background: var(--bg-surface); }
    .style-download-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .style-download-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .style-download-row .style-download-what { color: var(--text-secondary); font-size: .8rem; }
    .zotero-row-btn.searching { border-color: var(--color-kvot-accent); color: var(--color-kvot-accent); }
    .zotero-inline-results { margin-top: 8px; }
    .zotero-inline-status { color: var(--text-muted); font-size: .78rem; }
    .zotero-candidate {
      margin-top: 8px;
      padding: 9px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-surface);
      color: var(--text-secondary);
      font-size: .8rem;
    }
    .zotero-candidate-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; }
    .zotero-candidate-title { flex: 1 1 16em; min-width: 0; color: var(--text-primary); font-weight: 700; }
    .zotero-probability { flex: 0 0 auto; padding: 2px 7px; border-radius: 10px; background: color-mix(in srgb, var(--accent-success) 18%, var(--bg-secondary)); color: var(--accent-success); font-weight: 700; white-space: nowrap; }
    .zotero-candidate a { color: var(--color-kvot-bright); }
    .zotero-formatted-reference { margin-top:9px; padding:9px 10px; border-left:3px solid var(--color-kvot-bright); background:var(--bg-secondary); color:var(--text-primary); line-height:1.5; }
    .zotero-copy-reference { margin-top:7px; }
    .zotero-candidate-links { margin-top: 3px; }
    /*
      A result has two parts. The verdict sits in the row's own Zotero cell,
      which is a fifth of the table and too narrow for anything more: a
      candidate's title set there wrapped every two or three words. The
      items behind the verdict go in a row of their own under it, across the
      whole table, as cards side by side where there is room.
    */
    .zotero-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
    .zotero-verdict:empty { display: none; }
    .zotero-verdict-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--border-color); color: var(--text-muted); font-size: .74rem; font-weight: 700; white-space: nowrap; }
    /* The theme's signal colours, which kvot.css keeps readable on both
       backgrounds; fixed greens and ambers are not on the dark page. */
    .zotero-verdict-chip.good { background: color-mix(in srgb, var(--accent-success) 18%, var(--bg-secondary)); color: var(--accent-success); }
    .zotero-verdict-chip.warn { background: color-mix(in srgb, var(--accent-line) 18%, var(--bg-secondary)); color: var(--accent-line); }
    .zotero-verdict-chip.bad { background: color-mix(in srgb, var(--accent-text) 18%, var(--bg-secondary)); color: var(--accent-text); }
    .zotero-detail-toggle { padding: 0; border: 0; background: none; color: var(--color-kvot-bright); font: inherit; font-size: .76rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
    .ref-table tr.zotero-detail-row td { padding: 0 10px 14px; }
    .ref-table tr.zotero-detail-row:hover td { background: transparent; }
    .ref-table tr:has(+ tr.zotero-detail-row:not([hidden])) td { border-bottom-color: transparent; }
    .zotero-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-secondary); font-size: .8rem; }
    .zotero-detail-row .zotero-inline-results { margin-top: 0; }
    .zotero-detail-row .zotero-inline-status { margin-top: 6px; }
    .zotero-candidates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; margin-top: 8px; }
    .zotero-candidates .zotero-candidate { margin-top: 0; }
    .zotero-only-unmatched tr[data-zotero-status="matched"],
    .zotero-only-unmatched tr[data-zotero-status="matched"] + tr.zotero-detail-row { display: none; }
    .zotero-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
    .zotero-bulk-hint, .zotero-bulk-status { color: var(--text-muted); font-size: .8rem; }
    .zotero-bulk-hint:empty, .zotero-bulk-status:empty { display: none; }
    .zotero-bulk-filter { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .8rem; }
    .zotero-bulk-filter[hidden] { display: none; }
    .zotero-bulk-filter input { accent-color: var(--color-kvot-bright); }
    .zotero-row-btn:disabled { opacity: .55; cursor: default; }
    .zotero-db-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: .84rem; }
    .zotero-db-drop.drag-over { border-color: var(--color-kvot-bright); background: var(--bg-surface); }
    .zotero-db-about { color: var(--text-muted); font-size: .76rem; line-height: 1.4; }
    .zotero-db-info:empty { display: none; }
    .zotero-db-name { color: var(--text-primary); font-size: .84rem; font-weight: 700; overflow-wrap: anywhere; }
    .zotero-db-meta { color: var(--text-secondary); font-size: .78rem; }
    .zotero-db-warn { color: var(--accent-line); font-size: .78rem; }
    .forbidden-match { color: var(--color-kvot-accent); font-weight: 700; }
    .forbidden-context { max-width: 520px; color: var(--text-secondary); }
    .forbidden-rule { font-family: 'SF Mono', Menlo, monospace; font-size: .76rem; color: var(--text-muted); }
    .rule-name{display:block;color:var(--text-primary);font-weight:800;line-height:1.35}.rule-id{display:block;margin-top:3px;color:var(--text-muted);font:.7rem 'SF Mono',Menlo,monospace;overflow-wrap:anywhere}.rule-legacy-id{display:block;margin-top:2px;color:var(--text-muted);font:.66rem 'SF Mono',Menlo,monospace;opacity:.78;overflow-wrap:anywhere}
    .invalid-citation-match { color: var(--color-kvot-accent); font-weight: 700; }
    .invalid-citation-context { max-width: 560px; color: var(--text-secondary); }
    .invalid-citation-reason { color: var(--text-secondary); font-size: .82rem; }
    .official-rule-source { color: var(--text-muted); font-size: .74rem; margin-top: 3px; }
    .official-rule-match { color: var(--color-kvot-accent); font-weight: 700; }
    .official-rule-context { max-width: 560px; color: var(--text-secondary); }
    .citation-source-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; white-space:nowrap; }
    .citation-source-badge.zotero { background:color-mix(in srgb,#2f7d32 16%,var(--bg-secondary)); color:#2f7d32; border:1px solid color-mix(in srgb,#2f7d32 48%,var(--border-color)); }
    .citation-source-badge.plain { background:color-mix(in srgb,#6b7280 12%,var(--bg-secondary)); color:var(--text-secondary); border:1px solid var(--border-color); }
    .citation-source-badge.field { background:color-mix(in srgb,#c87d0a 14%,var(--bg-secondary)); color:#9a6108; border:1px solid color-mix(in srgb,#c87d0a 45%,var(--border-color)); }
    .citation-source-detail { margin-top:3px; color:var(--text-muted); font-size:.72rem; line-height:1.35; }
    .citation-context { max-width:560px; color:var(--text-secondary); line-height:1.48; overflow-wrap:anywhere; }

    /* The orphan table carries a lot of columns; fix their proportions so the
       context keeps enough width to read as running text. */
    .orphan-table { table-layout: fixed; }
    .orphan-table th { white-space: normal; line-height: 1.3; }
    .orphan-table th:nth-child(1), .orphan-table td:nth-child(1) { width: 17%; }
    .orphan-table th:nth-child(2), .orphan-table td:nth-child(2) { width: 16%; }
    .orphan-table th:nth-child(3), .orphan-table td:nth-child(3) { width: 41%; }
    .orphan-table th:nth-child(4), .orphan-table td:nth-child(4) { width: 12%; }
    .orphan-table th:nth-child(5), .orphan-table td:nth-child(5) { width: 14%; }
    .orphan-table .ref-key { display: block; white-space: normal; overflow-wrap: anywhere; }
    .orphan-table .citation-context { max-width: none; }
    .orphan-table .zotero-cell { min-width: 0; }
    .orphan-table .zotero-row-btn { width: 100%; }
    .citation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; }
    .citation-type { color: var(--text-muted); font-size: .72rem; }
    .suggestion-score { margin-top: 3px; color: var(--text-muted); font-size: .74rem; cursor: help; }
    @media (max-width: 820px) {
      .orphan-table { table-layout: auto; }
      .orphan-table th, .orphan-table td { width: auto !important; }
    }
    .citation-context-match { color:var(--text-primary); font-weight:800; background:color-mix(in srgb,var(--color-kvot-bright) 17%,transparent); border-radius:3px; padding:0 2px; }
    .citation-location-region { display:block; color:var(--text-primary); font-weight:700; }
    .citation-location-paragraph { display:block; margin-top:2px; color:var(--text-muted); font-size:.76rem; }
    .rule-summary-filters { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin:0 0 14px; padding:12px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; }
    .rule-summary-filters label { display:grid; gap:4px; color:var(--text-secondary); font-size:.78rem; font-weight:700; }
    .rule-summary-filters select { min-width:180px; padding:7px 9px; color:var(--text-primary); background:var(--bg-primary); border:1px solid var(--border-color); border-radius:6px; }
    .rule-location-link { display:inline-block; color:var(--color-kvot-bright); text-decoration:underline; text-underline-offset:2px; font-weight:700; }
    .rule-full-context { max-width:760px; color:var(--text-secondary); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
    .rule-context-match{color:var(--text-primary);font-weight:800;background:color-mix(in srgb,#f0ad4e 24%,transparent);border-radius:3px;padding:0 2px}
    .rule-finding-row:target { outline:3px solid var(--color-kvot-bright); outline-offset:-3px; background:color-mix(in srgb,var(--color-kvot-bright) 9%,var(--bg-primary)); scroll-margin-top:24px; }
    .rule-summary-row[hidden], .rule-detail-item[hidden], .rule-document-group[hidden] { display:none; }
    .rule-document-group { margin:14px 0; border:1px solid var(--border-color); border-radius:8px; overflow:hidden; }
    .rule-document-group > summary { cursor:pointer; padding:10px 12px; font-weight:800; background:var(--bg-secondary); }
    .rule-document-group-body { padding:10px; }
    .rule-detail-item { margin:0 0 10px; padding:10px; border:1px solid var(--border-color); border-radius:7px; background:var(--bg-primary); }
    .rule-detail-item:last-child { margin-bottom:0; }
    .rule-detail-head { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:7px; }
    .rule-detail-guidance { margin:6px 0; color:var(--text-secondary); }
    .language-summary { display:flex; gap:8px; flex-wrap:wrap; margin-top:7px; }
    .language-badge { display:inline-flex; gap:4px; align-items:center; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:800; border:1px solid var(--border-color); background:var(--bg-secondary); }
    .language-badge.sv { color:#165b9c; }
    .language-badge.en { color:#6c3b93; }
    .language-badge.mixed { color:#9a6108; }
    .language-badge.unknown { color:var(--text-muted); }
    .language-intervals{margin-top:8px;padding:8px 10px;border-left:3px solid var(--border-color);background:var(--bg-secondary);font-size:.76rem}.language-intervals>summary{cursor:pointer;font-weight:800}.language-interval{padding:6px 8px;border:1px solid var(--border-color);border-radius:6px;margin-top:6px}.language-interval-text{display:block;margin-top:3px;white-space:pre-wrap}.language-source{color:var(--text-muted);font-family:'SF Mono',Menlo,monospace}

    @media (max-width: 700px) { #summary-cards { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { #app { padding: 14px 12px 32px; } #summary-cards { gap: 8px; } }