/* main-7-csp-migrated-styles.css
 * CSP style-src hardening (3rd-party audit): index.html previously had 5 separate inline
 * <style> blocks (one already named "csp-migrated-styles", containing 98 classes from an
 * earlier, incomplete attempt at this same migration -- the class DEFINITIONS were never
 * actually moved out of the inline block, so that earlier work alone did not achieve CSP
 * compliance). All 5 moved here verbatim (content unchanged, only relocated) so style-src
 * can drop 'unsafe-inline' -- external stylesheets are governed by origin allow-listing
 * ('self'), not by the inline-content restriction that blocks <style> blocks/attributes.
 * Loaded last in index.html's stylesheet list, preserving these blocks' original relative
 * position (all 5 previously loaded after every other <link> tag in the document).
 */

/* --- moved from index.html inline <style> block (was lines 86-104) --- */
#state-gate-row{align-items:center;}
#state-gate-row .state-gate-btn{
  padding:3px 10px;border-radius:3px;border:1px solid transparent;
  background:transparent;color:var(--smoke2);
  font-family:var(--f-ui);font-size:10px;letter-spacing:0.10em;
  text-transform:uppercase;cursor:pointer;transition:all 0.15s;
}
#state-gate-row .state-gate-btn:hover{
  color:var(--smoke);
}
#state-gate-row .state-gate-btn.active{
  background:rgba(160,120,32,0.22);
  border:1px solid var(--gold);
  color:var(--gold-lt);
  text-shadow:0 0 10px rgba(160,120,32,0.40);
  font-weight:600;
}
/* Frontend #15 (3rd-party audit): --gold-lt (the active state's text color above) was
   verified to pass WCAG AA comfortably in dark theme (6.72:1) but fail badly in light
   theme (2.10:1) -- discovered while investigating this same element's default/hover
   states, and fixed here since it's the same component. --smoke is guaranteed
   max-contrast by design in every theme. */
body[data-theme="light"] #state-gate-row .state-gate-btn.active{
  color:var(--smoke);
}

/* --- moved from index.html inline <style> block (was lines 105-143) --- */
#rw-panel{position:fixed;top:0;right:0;bottom:0;width:344px;background:var(--ink);z-index:150;display:flex;flex-direction:column;transform:translateX(344px);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:inset 6px 0 14px rgba(0,0,0,.45),-3px 0 0 0 rgba(0,0,0,.8),-5px 0 0 0 rgba(160,120,32,.05);}
#rw-panel.rw-open{transform:translateX(0);}
.rw-tab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:151;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 7px;background:linear-gradient(180deg,var(--ink2),var(--ink));border:1px solid rgba(160,120,32,.28);border-right:none;border-radius:8px 0 0 8px;cursor:pointer;box-shadow:-2px 2px 10px rgba(0,0,0,.4);transition:background .2s,right .35s cubic-bezier(.4,0,.2,1);}
body.rw-panel-open .rw-tab{right:344px;}
.rw-tab:hover{background:linear-gradient(180deg,#16233d,var(--ink2));}
.rw-tab-label{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;color:var(--gold-lt);text-transform:uppercase;}
.rw-tab-count{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:rgba(220,90,90,.92);color:#fff;font-family:var(--f-mono);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.rw-tab-count:empty{display:none;}
.rw-header{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px;border-bottom:1px solid rgba(160,120,32,.12);}
.rw-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);}
.rw-head-btns{display:flex;gap:6px;}
/* 2026-07-30: the refresh and collapse controls were 24px, fully transparent,
   with a 20%-opacity border and dim --smoke2 text -- effectively invisible against
   the panel. Larger, a filled background, a 45%-opacity border and brighter text
   so they read as controls at a glance. */
.rw-icon-btn{min-width:30px;height:30px;padding:0 8px;display:flex;align-items:center;justify-content:center;background:rgba(160,120,32,.10);border:1px solid rgba(160,120,32,.45);border-radius:5px;color:var(--gold-lt);cursor:pointer;font-size:15px;line-height:1;transition:all .15s;}
.rw-icon-btn:hover{background:rgba(160,120,32,.22);border-color:rgba(160,120,32,.85);color:#fff;}
/* The Reg Watch shortcut carries text, so it needs room and a smaller type size. */
.rw-icon-btn-wide{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
/* One-control filter strip. Deliberately minimal: the rail is a glance surface. */
.rw-filter{padding:8px 12px 0;}
.rw-filter select{width:100%;background:rgba(5,8,16,.6);color:var(--smoke1,#cfd6e4);border:1px solid rgba(160,120,32,.35);border-radius:5px;padding:5px 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;cursor:pointer;}
.rw-filter select:hover{border-color:rgba(160,120,32,.7);}
.rw-list{flex:1;overflow-y:auto;padding:10px 12px 22px;display:flex;flex-direction:column;gap:8px;}
.rw-empty{padding:42px 16px;text-align:center;color:var(--smoke3);font-size:12px;line-height:1.7;}
.rw-item{border:1px solid rgba(160,120,32,.14);border-left:2px solid rgba(160,120,32,.4);border-radius:6px;background:rgba(255,255,255,.02);padding:10px 12px;transition:border-color .15s,background .15s;}
.rw-item:hover{background:rgba(255,255,255,.035);}
.rw-item.tier-critical{border-left-color:rgba(220,90,90,.7);}
.rw-item.tier-important{border-left-color:rgba(180,130,35,.7);}
.rw-item.tier-info{border-left-color:rgba(120,190,140,.6);}
.rw-item-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap;}
.rw-tier{font-family:var(--f-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:3px;font-weight:600;}
.rw-tier.tier-critical{background:rgba(220,90,90,.16);color:#e07a7a;}
.rw-tier.tier-important{background:rgba(180,130,35,.16);color:var(--gold-lt);}
.rw-tier.tier-info{background:rgba(120,190,140,.14);color:#7dc48c;}
.rw-state{font-family:var(--f-mono);font-size:9px;letter-spacing:.05em;color:var(--smoke2);}
.rw-when{font-size:9px;color:var(--smoke3);margin-left:auto;}
.rw-title{font-family:var(--f-display);font-size:14px;line-height:1.3;color:var(--smoke);cursor:pointer;}
.rw-title:hover{color:var(--gold-lt);}
.rw-summary{font-size:11px;line-height:1.55;color:var(--smoke2);margin-top:7px;display:none;}
.rw-item.rw-expanded .rw-summary{display:block;}
.rw-src{font-size:9px;color:var(--smoke3);margin-top:6px;}
.rw-eff{font-size:9px;color:var(--smoke3);margin-top:3px;font-family:var(--f-mono);letter-spacing:.04em;}
.rw-actions{display:flex;gap:6px;margin-top:9px;}
.rw-act{font-family:var(--f-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:4px;border:1px solid rgba(160,120,32,.3);background:transparent;color:var(--gold-lt);cursor:pointer;transition:all .15s;}
.rw-act:hover{background:rgba(160,120,32,.14);border-color:rgba(160,120,32,.6);}
@media (max-width:1024px){#rw-panel{width:88vw;max-width:344px;}body.rw-panel-open .rw-tab{right:0;opacity:0;pointer-events:none;}}

/* --- moved from index.html inline <style> block (was lines 144-168) --- */
/* Professional regulation document view (Session VIEW) */
.fvdoc{max-width:720px;margin:0 auto;padding:40px 48px 48px;background:#faf9f6;color:#1a1a1a;
  font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:1.7;}
.fvdoc-rulenum{font-family:var(--f-body);font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:#8a6d1f;font-weight:600;margin:0 0 4px;}
.fvdoc-title{font-family:Georgia,serif;font-size:26px;font-weight:700;line-height:1.25;
  color:#111;margin:0 0 20px;padding:0 0 16px;border-bottom:2px solid #d8d2c4;}
.fvdoc-masthead{margin:0 0 26px;padding:14px 18px;background:#f2efe8;border-radius:4px;
  border-left:3px solid #b89b3e;}
.fvdoc-meta-row{display:flex;gap:10px;font-family:var(--f-body);
  font-size:12.5px;line-height:1.9;}
.fvdoc-meta-label{color:#8a7a52;font-weight:600;min-width:130px;flex-shrink:0;}
.fvdoc-meta-val{color:#333;}
.fvdoc-body{margin:0;}
.fvdoc-para{margin:0 0 16px;text-align:justify;}
.fvdoc-sub{display:flex;gap:12px;margin:0 0 14px;align-items:baseline;}
.fvdoc-sub-mark{font-weight:700;color:#5a4a1e;flex-shrink:0;min-width:32px;
  font-family:Georgia,serif;font-size:15px;}
.fvdoc-sub-text{flex:1;text-align:justify;}
.fvdoc-footer{margin:28px 0 0;padding:14px 0 0;border-top:1px solid #d8d2c4;
  font-family:var(--f-body);font-size:11.5px;
  color:#8a7a52;letter-spacing:0.03em;}
@media (max-width:640px){.fvdoc{padding:24px 20px 32px;font-size:14px;}.fvdoc-title{font-size:22px;}}

/* --- moved from index.html inline <style> block (was lines 169-268) --- */
.csp-mig-1 { margin-bottom:10px; }
.csp-mig-2 { margin-top:4px; }
.csp-mig-3 { letter-spacing:0.08em;text-align:center; }
.csp-mig-4 { pointer-events:none; }
.csp-mig-5 { color:#22c55e;background:#22c55e; }
.csp-mig-6 { background:#22c55e; }
.csp-mig-7 { display:none;align-items:center;gap:7px;padding:5px 11px;border-radius:3px;cursor:pointer;position:relative; }
.csp-mig-8 { width:11px;height:11px;flex-shrink:0; }
.csp-mig-9 { font-family:var(--f-ui);font-size:9px;font-weight:300;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap; }
.csp-mig-10 { font-family:var(--f-mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase; }
.csp-mig-11 { position:relative;margin-left:4px; }
.csp-mig-12 { width:32px;height:32px;background:transparent;border:1px solid rgba(160,120,32,0.2);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;flex-shrink:0; }
.csp-mig-13 { width:14px;height:14px; }
.csp-mig-14 { display:none;position:absolute;top:calc(100% + 8px);right:0;width:210px;background:linear-gradient(135deg,rgba(22,32,52,0.98) 0%,rgba(32,48,75,0.98) 100%);border:1px solid rgba(160,120,32,0.40);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.5);backdrop-filter:blur(10px);z-index:9999;padding:14px 12px; }
.csp-mig-15 { margin-bottom:14px; }
.csp-mig-16 { display:flex;justify-content:space-between;align-items:center;margin-bottom:7px; }
.csp-mig-17 { font-family:var(--f-ui);font-size:10px;font-weight:500;color:#e8eaf0;letter-spacing:0.1em;text-transform:uppercase; }
.csp-mig-18 { font-family:var(--f-mono);font-size:10px;color:#9aa3b4; }
.csp-mig-19 { display:flex;align-items:center;gap:7px; }
.csp-mig-20 { width:10px;height:10px;flex-shrink:0; }
.csp-mig-21 { width:13px;height:13px;flex-shrink:0; }
.csp-mig-22 { border-top:1px solid rgba(160,120,32,0.1);margin-bottom:14px; }
.csp-mig-23 { display:none;margin-top:10px;padding-top:10px;border-top:1px solid rgba(160,120,32,0.10); }
.csp-mig-24 { width:100%;background:transparent;border:1px solid rgba(160,120,32,0.35);color:rgba(160,120,32,0.85);font-family:var(--f-ui);font-size:11px;font-weight:300;letter-spacing:0.08em;padding:8px 12px;border-radius:4px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:8px; }
.csp-mig-25 { display:none;margin-top:8px;font-family:var(--f-mono);font-size:9px;color:var(--smoke4);letter-spacing:0.04em;line-height:1.5;text-align:center; }
.csp-mig-26 { width:32px;height:32px;background:transparent;border:1px solid rgba(160,120,32,0.2);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;margin-left:4px; }
.csp-mig-27 { color:rgba(160,120,32,0.24);font-size:11px;flex-shrink:0; }
.csp-mig-28 { display:flex;gap:4px;flex-shrink:0;align-items:center; }
.csp-mig-29 { display:none; }
.csp-mig-30 { margin-left:auto;flex-shrink:0; }
.csp-mig-31 { flex:1; }
.csp-mig-32 { margin-left:6px; }
.csp-mig-33 { position:relative;display:inline-block; }
.csp-mig-34 { display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r);min-width:210px;z-index:999;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.4); }
.csp-mig-35 { display:block;width:100%;padding:10px 14px;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--smoke2);font-family:var(--f-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;text-align:left; }
.csp-mig-36 { display:block;width:100%;padding:10px 14px;background:transparent;border:none;color:var(--smoke2);font-family:var(--f-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;text-align:left; }
.csp-mig-37 { width:0%; }
.csp-mig-38 { display:none; }
.csp-mig-39 { display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden; }
.csp-mig-40 { padding-bottom:10px;margin-bottom:18px; }
.csp-mig-41 { margin:-8px 0 14px; }
.csp-mig-42 { display:flex;align-items:center;gap:12px;margin-top:8px; }
.csp-mig-43 { font-family:var(--f-mono);font-size:9px;color:var(--smoke4);letter-spacing:0.06em; }
.csp-mig-44 { margin-bottom:10px;display:flex;gap:8px;align-items:center; }
.csp-mig-45 { padding:8px 16px; }
.csp-mig-46 { margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.csp-mig-47 { padding:8px 12px;background:var(--ink2,#111);color:inherit;border:1px solid rgba(255,255,255,0.14);border-radius:4px;font-size:12px; }
.csp-mig-48 { background:var(--ink2,#0c0c0c);border:1px solid rgba(255,255,255,0.10);border-radius:4px;padding:12px;font-family:var(--f-mono);font-size:11px;line-height:1.55;max-height:340px;overflow:auto;white-space:pre-wrap;margin:0;color:var(--smoke2,#c8c8c8); }
.csp-mig-49 { display:flex;align-items:center;gap:8px;cursor:pointer;flex:1; }
.csp-mig-50 { accent-color:var(--gold); }
.csp-mig-51 { margin-top:6px; }
.csp-mig-52 { margin-top:14px;flex-wrap:wrap;gap:8px; }
.csp-mig-53 { flex:0 0 140px; }
.csp-mig-54 { margin-top:8px;align-items:center;gap:12px; }
.csp-mig-55 { display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;color:var(--smoke3);letter-spacing:.06em;cursor:pointer; }
.csp-mig-56 { flex-shrink:0; }
.csp-mig-57 { margin-top:12px;align-items:center;gap:12px;flex-wrap:wrap; }
.csp-mig-58 { font-family:var(--f-mono);font-size:10px;color:var(--smoke3);letter-spacing:.06em;white-space:nowrap; }
.csp-mig-59 { flex:1;min-width:160px; }
.csp-mig-60 { display:none;padding:0;margin:-18px;height:calc(100vh - 160px); }
.csp-mig-61 { width:100%;height:100%;border:none;display:block; }
.csp-mig-62 { width:min(800px,92vw);max-height:85vh;display:flex;flex-direction:column; }
.csp-mig-63 { display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.csp-mig-64 { font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;color:var(--gold);text-transform:uppercase; }
.csp-mig-65 { display:flex;gap:8px;align-items:center; }
.csp-mig-66 { font-size:9px;padding:5px 12px; }
.csp-mig-67 { font-family:var(--f-mono);font-size:9px;color:var(--smoke4);letter-spacing:0.06em;margin:4px 0 12px;flex-shrink:0; }
.csp-mig-68 { display:flex;gap:8px;align-items:center;margin:0 0 8px;flex-shrink:0; }
.csp-mig-69 { font-size:8px;padding:4px 10px;opacity:0.75; }
.csp-mig-70 { font-family:var(--f-mono);font-size:8px;color:var(--smoke4);letter-spacing:0.08em; }
.csp-mig-71 { flex:1;overflow-y:auto;background:#faf9f6;border:1px solid var(--line);border-radius:4px;padding:0;scrollbar-width:thin;scrollbar-color:rgba(160,120,32,0.3) transparent; }
.csp-mig-72 { max-width:360px; }
.csp-mig-73 { display:flex;flex-direction:column;gap:10px;margin-top:16px; }
.csp-mig-74 { font-family:var(--f-mono);font-size:8px;letter-spacing:0.14em;color:var(--smoke4);text-transform:uppercase;margin-bottom:5px; }
.csp-mig-75 { width:100%;box-sizing:border-box; }
.csp-mig-76 { display:flex;align-items:center;gap:10px;margin-top:4px; }
.csp-mig-77 { color:var(--smoke4);border-color:var(--line2); }
.csp-mig-78 { margin-top:18px;font-family:var(--f-body);font-size:13px;color:var(--smoke2);line-height:1.6; }
.csp-mig-79 { margin-bottom:12px; }
.csp-mig-80 { color:var(--smoke3);font-size:12px; }
.csp-mig-81 { margin-top:18px; }
.csp-mig-82 { font-family:var(--f-mono);font-size:10px;color:var(--smoke3);letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:6px; }
.csp-mig-83 { width:100%; }
.csp-mig-84 { margin-top:14px;display:none;font-family:var(--f-mono);font-size:9px;color:var(--smoke4);letter-spacing:0.06em;line-height:1.7;max-height:120px;overflow-y:auto;padding:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(180,130,35,0.15);border-radius:3px; }
.csp-mig-85 { margin-top:24px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap; }
.csp-mig-86 { background:transparent;border:1px solid var(--line2);color:var(--smoke3); }
.csp-mig-87 { background:transparent;border:1px solid rgba(180,130,35,0.4);color:rgba(180,130,35,0.85); }
.csp-mig-88 { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px; }
.csp-mig-89 { margin:0; }
.csp-mig-90 { display:flex;gap:8px;flex-wrap:wrap; }
.csp-mig-91 { background:transparent;border:1px solid var(--gold-dim);color:var(--gold-lt); }
.csp-mig-92 { flex:1;overflow-y:auto;padding:14px 18px;background:rgba(5,8,16,0.55);border:1px solid var(--line2);border-radius:6px;font-family:var(--f-body);font-size:13px;line-height:1.6;color:var(--smoke); }
.csp-mig-93 { max-width:520px; }
.csp-mig-94 { max-width:480px; }
.csp-mig-95 { font-family:var(--f-mono);font-size:9px;color:var(--smoke4);margin-top:4px;letter-spacing:0.04em; }
.csp-mig-96 { max-width:440px; }
.csp-mig-97 { color:var(--smoke4);font-size:9px; }
.csp-mig-98 { font-family:var(--f-mono);font-size:9px;color:var(--smoke4);line-height:1.7;padding:10px 14px;background:var(--ink3);border:1px solid var(--line);border-radius:var(--r); }

/* --- moved from index.html inline <style> block (was lines 512-517) --- */
          .bc-slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;background:rgba(160,120,32,0.2);outline:none;cursor:pointer;}
          .bc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#8f6d18;cursor:pointer;box-shadow:0 0 6px rgba(160,120,32,0.5);}
          .bc-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#8f6d18;cursor:pointer;border:none;box-shadow:0 0 6px rgba(160,120,32,0.5);}
          .bc-slider::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,rgba(160,120,32,0.6) 0%,rgba(160,120,32,0.6) var(--pct,50%),rgba(160,120,32,0.2) var(--pct,50%),rgba(160,120,32,0.2) 100%);}

/* --- moved from compliance-ui/reg-watch.js (was a runtime-injected <style>
   block inside body.innerHTML -- CSP style-src has no unsafe-inline, so this
   silently stopped applying and every button/select on the Reg Watch page
   rendered unstyled; index.html's own <style>-tag scan could not see it,
   since it never appears in index.html at all, only in the DOM at runtime) --- */
.kc-rf-select {
  background: rgba(5,8,16,0.55);
  border: 1px solid var(--line2, rgba(180,130,35,0.25));
  color: var(--smoke, #e8d5a3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 28px 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a07820' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s;
}
.kc-rf-select:hover { border-color: var(--gold-dim, rgba(180,130,35,0.5)); }
.kc-rf-select:focus { outline: none; border-color: var(--gold, #a07820); }
.kc-rf-select option { background: #0a0e1a; color: var(--smoke, #e8d5a3); }
.kc-rf-btn {
  background: transparent;
  border: 1px solid var(--line2, rgba(180,130,35,0.3));
  color: var(--smoke3, #888);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.kc-rf-btn:hover {
  border-color: var(--gold, #a07820);
  color: var(--gold-lt, #c8a030);
}
.kc-rf-btn-primary {
  background: var(--gold, #a07820);
  border-color: var(--gold, #a07820);
  color: #000;
}
.kc-rf-btn-primary:hover {
  background: var(--gold-lt, #c8a030);
  color: #000;
}
.kc-rf-card-summary {
  font-size: 13.5px;
  color: var(--smoke, #e8d5a3);
  line-height: 1.65;
  opacity: 0.92;
}

/* ===========================================================================
 * MIGRATED FROM RUNTIME-INJECTED <style> ELEMENTS -- H24 remainder, 2026-07-31
 * ---------------------------------------------------------------------------
 * Four frontend modules built a <style> element with createElement('style') and
 * appended it to document.head. style-src here is 'self' plus one hash with no
 * 'unsafe-inline', so the browser dropped all four in silence: no console error
 * the operator would ever see, just permanently unstyled UI. The rule that owns
 * this class (tests/gates/rules/no-runtime-style-tag.mjs) matched only a literal
 * "<style" in a string, so it stayed green through the entire remediation while
 * every surviving instance of its own defect class was live. Both shapes are
 * matched now.
 *
 * Content below is moved verbatim -- only the delivery mechanism changed.
 * =========================================================================== */

/* was app/01-core.js -- update banner slide-up (#kait-update-style) */
@keyframes kait-slide-up{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* was app/01-core-2.js -- spoken-intro player widget (#kait-audio-widget-styles) */
.kait-audio-widget {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: rgba(10,15,26,0.92);
  color: #e8d5a3;
  border: 1px solid rgba(232,213,163,0.35);
  padding: 10px 14px;
  border-radius: 12px;
  font: 12px/1.35 var(--f-body);
  letter-spacing: 0.02em;
  z-index: 99999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  max-width: 340px;
  animation: kait-aw-in .25s ease-out;
}
@keyframes kait-aw-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kait-aw-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kait-aw-dots {
  display: flex;
  gap: 4px;
}
.kait-aw-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232,213,163,0.22);
  transition: background .3s, box-shadow .3s;
}
.kait-aw-dot.done { background: rgba(232,213,163,0.55); }
.kait-aw-dot.active {
  background: #e8d5a3;
  box-shadow: 0 0 10px rgba(232,213,163,0.7);
}
.kait-aw-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kait-aw-close {
  background: transparent;
  border: 0;
  color: #e8d5a3;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.65;
  transition: opacity .2s;
}
.kait-aw-close:hover { opacity: 1; }

/* was compliance-ui/core.js -- user-management state chips (#kc-umm-sc-style) */
.kc-umm-state-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.kc-umm-sc{background:transparent;border:1px solid var(--line2,rgba(255,255,255,0.12));border-radius:20px;padding:3px 10px;font-size:11px;font-family:var(--f-mono);color:var(--smoke3,#aaa);cursor:pointer;transition:all .15s;font-weight:600;}
.kc-umm-sc:hover{border-color:var(--gold,#A07820);color:var(--gold-lt,#C9A832);}
.kc-umm-sc.kc-umm-sc-on{background:rgba(160,120,32,0.15);border-color:var(--gold,#A07820);color:var(--gold-lt,#C9A832);}

/* was compliance-ui/kait-integration.js -- typing indicator + streaming cursor
 * (#kc-kait-anim-style). REFERENCED BY .gsc-28fd9e1a2a / .gsc-2256c32a54 /
 * .gsc-998dd0fb4d / .gsc-1593968488 in generated-inline-styles.css, which is why
 * those dots have been rendering static: the classes were in a stylesheet, the
 * animations they name were in the dropped block. main-6-library-misc-2.css
 * disables them under prefers-reduced-motion and that still applies. */
@keyframes kcKaitPulse{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}
@keyframes kcKaitBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------------------------------------------------------------------------
 * Sources expand/collapse (2026-08-01). A citation list of 56 links under a
 * four-line answer buries the answer; five show inline and the rest sit behind
 * this toggle. Styled as quiet text rather than a button so it reads as part of
 * the citation line, not as an action competing with the answer.
 * ------------------------------------------------------------------------- */
.msg-sources-toggle {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-family: var(--f-ui, inherit);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #A07820);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .15s;
}
.msg-sources-toggle:hover { opacity: 1; text-decoration: underline; }
.msg-sources-rest[hidden] { display: none; }

/* ── Library health ────────────────────────────────────────────────────────────
   The Admin > Library surface. Shaped after MenuIQ's Scrape Health: a headline
   sentence, then counters, then only what needs a decision. The previous surface
   listed every discrepancy with no severity, so a healthy library read as a wall
   of red to a non-technical reader. Tokens are the suite's existing ones -- no
   new palette. */
.lh-headline {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; margin-bottom: 14px;
  border: 1px solid var(--line2); border-left: 2px solid var(--red);
  border-radius: 3px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.03em;
  color: var(--smoke);
}
.lh-headline.ok { border-left-color: var(--green); }
.lh-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex: 0 0 auto;
}
.lh-headline.ok .lh-dot { background: var(--green); }
.lh-runall {
  margin-left: auto; padding: 5px 12px;
  background: transparent; border: 1px solid var(--line2); border-radius: 3px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--gold-lt); cursor: pointer;
}
.lh-runall:hover:not(:disabled) { border-color: var(--gold); }
.lh-runall:disabled { color: var(--smoke4); cursor: default; }

.lh-counts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; margin-bottom: 20px;
  border: 1px solid var(--line2); border-radius: 3px; overflow: hidden;
}
.lh-count { padding: 12px 14px; background: transparent; }
.lh-count-val {
  font-family: var(--f-mono); font-size: 21px; color: var(--smoke);
  line-height: 1.1;
}
.lh-count.ok   .lh-count-val { color: var(--green); }
.lh-count.bad  .lh-count-val { color: var(--red); }
.lh-count.warn .lh-count-val { color: var(--amber-lt); }
.lh-count-label {
  margin-top: 4px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--smoke4);
}

.lh-section { margin-bottom: 20px; }
.lh-section-title {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 7px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line2);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gold-lt);
}
.lh-section-sub {
  text-transform: none; letter-spacing: 0.02em;
  font-size: 11px; color: var(--smoke4);
}

.lh-row {
  padding: 10px 13px; margin-bottom: 7px;
  border: 1px solid var(--line2); border-radius: 3px;
}
.lh-row.attn  { border-left: 2px solid var(--red); }
.lh-row.watch { border-left: 2px solid var(--amber-lt); }
.lh-row-head { display: flex; align-items: center; gap: 9px; }
.lh-tag {
  padding: 1px 6px; border-radius: 2px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(216,83,83,0.14); color: var(--red);
}
.lh-row.watch .lh-tag { background: rgba(200,150,40,0.14); color: var(--amber-lt); }
.lh-row-name { font-family: var(--f-body); font-size: 13px; color: var(--smoke); }
.lh-row-state {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--smoke4);
}
.lh-row-reason {
  margin-top: 5px; padding-left: 1px;
  font-family: var(--f-body); font-size: 12px; line-height: 1.45;
  color: var(--smoke3);
}
.lh-clear .lh-section-title { color: var(--green); border-bottom-color: var(--line2); }

/* ── Admin panel scrolling ─────────────────────────────────────────────────────
   Any panel that renders a list of unknown length scrolls INSIDE itself rather
   than pushing the page. Without this the audit log, the security log and the
   collections list each grow without limit, so the tab becomes a single very long
   scroll and the panel below the long one is effectively invisible.

   ⚠ The cap is on the LIST, never on the panel: the heading and any action stay
   put while the rows scroll, otherwise the button you need scrolls away with the
   content. */
.asec-scroll,
#audit-wrap,
#security-wrap,
#libidx-collections-wrap,
#covaudit-wrap,
#lib-health .lh-section {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The headline and counters must never scroll out of view -- they are the summary
   the whole surface exists to deliver. */
#lib-health .lh-headline,
#lib-health .lh-counts { max-height: none; overflow: visible; }

/* A quiet scrollbar, so a scrolling panel does not look like a defect. */
.asec-scroll::-webkit-scrollbar,
#audit-wrap::-webkit-scrollbar,
#security-wrap::-webkit-scrollbar,
#libidx-collections-wrap::-webkit-scrollbar,
#covaudit-wrap::-webkit-scrollbar,
#lib-health .lh-section::-webkit-scrollbar { width: 8px; }
.asec-scroll::-webkit-scrollbar-thumb,
#audit-wrap::-webkit-scrollbar-thumb,
#security-wrap::-webkit-scrollbar-thumb,
#libidx-collections-wrap::-webkit-scrollbar-thumb,
#covaudit-wrap::-webkit-scrollbar-thumb,
#lib-health .lh-section::-webkit-scrollbar-thumb {
  background: var(--line2); border-radius: 4px;
}

/* ── Ingest Activity ───────────────────────────────────────────────────────────
   The overnight-run panel. It was a paragraph: examined/changed/failed joined with
   dots in a single div, the same size and weight as the prose around it, so a
   reader's eye had nothing to land on. This gives each run a titled row, its counts
   as number tiles, and its failures as chips -- the MenuIQ Scrape Health shape. */
.ing-run {
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--line2); border-radius: 4px;
}
.ing-run-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ing-run-name { font-family: var(--f-display); font-size: 16px; color: var(--smoke); }
.ing-run-age  { font-family: var(--f-mono); font-size: 11px; color: var(--smoke4); }

.ing-tag {
  padding: 1px 7px; border-radius: 2px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(160,120,32,0.14); color: var(--gold-lt);
}
.ing-tag.bad { background: rgba(216,83,83,0.15); color: var(--red); }

/* the number tiles -- the actual fix for "no significance" */
.ing-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 1px; margin: 2px 0 4px;
  border: 1px solid var(--line2); border-radius: 3px; overflow: hidden;
}
.ing-tile { padding: 9px 11px; background: transparent; }
.ing-tile-val {
  font-family: var(--f-mono); font-size: 20px; line-height: 1.1; color: var(--smoke);
}
.ing-tile.bad .ing-tile-val { color: var(--red); }
.ing-tile-label {
  margin-top: 3px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--smoke4);
}

.ing-line {
  margin-top: 6px;
  font-family: var(--f-body); font-size: 12px; color: var(--smoke3); line-height: 1.4;
}
.ing-note {
  margin: 2px 0; padding: 8px 11px;
  border-left: 2px solid var(--gold); border-radius: 2px;
  font-family: var(--f-body); font-size: 12px; color: var(--smoke3);
}
.ing-fails { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ing-chip {
  padding: 2px 8px; border-radius: 2px;
  border: 1px solid var(--line2);
  font-family: var(--f-mono); font-size: 11px; color: var(--smoke3);
}
.ing-chip.bad { border-color: rgba(216,83,83,0.4); color: var(--red); }

/* the failing-source list -- was the worst offender, a flat run of same-weight text */
.ing-src {
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--line2); border-left: 2px solid var(--red); border-radius: 3px;
}
.ing-src-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ing-src-name { font-family: var(--f-body); font-size: 13px; color: var(--smoke); }
.ing-src-state { font-family: var(--f-mono); font-size: 10px; color: var(--smoke4); }