/* RLS Safeguard Tables — shared styles
   Scoped to .rls-table-root to avoid conflicts with theme CSS. */

:root {
  --rls-navy:   #1a3a5c;
  --rls-gold:   #9e7520;
  --rls-light:  #f5f5f0;
  --rls-border: #d0d5dd;
  --rls-white:  #ffffff;
  --rls-alt:    #f9f9f6;
  --rls-muted:  #6b7280;
  --rls-radius: 15px;
}

/* ── Wrapper ── */
.rls-table-root {
  max-width: 980px;
  margin: 0 auto;
  background: var(--rls-white);
  border: 1px solid var(--rls-border);
  border-radius: var(--rls-radius);
  overflow: hidden;
  box-sizing: border-box;
}
.rls-table-root *, .rls-table-root *::before, .rls-table-root *::after {
  box-sizing: border-box;
}

/* ── Header ── */
.rls-table-root .rls-header { background: var(--rls-navy); color: #fff; padding: 22px 28px 18px; }
.rls-table-root .rls-header h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 4px; color: #fff; }
.rls-table-root .rls-header p  { font-size: .85rem; opacity: .8; font-family: Arial, sans-serif; margin: 0; }

/* ── Controls ── */
.rls-table-root .rls-controls { padding: 14px 20px; border-bottom: 1px solid var(--rls-border); background: #fafafa; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rls-table-root .rls-controls-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }

/* ── Single-row controls (Type 1) ── */
.rls-table-root .rls-controls-row--single {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.rls-table-root .rls-pill-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rls-table-root .rls-search-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Search (Type 1) ── */
.rls-table-root .rls-search { padding: 6px 12px; border: 1.5px solid var(--rls-border); border-radius: 20px; font-size: .82rem; font-family: Arial, sans-serif; outline: none; width: 160px; transition: width .2s ease; }
.rls-table-root .rls-search:focus { border-color: var(--rls-navy); width: 200px; }

/* ── Row count ── */
.rls-table-root .rls-row-count { font-size: .75rem; font-family: Arial, sans-serif; color: var(--rls-muted); white-space: nowrap; }

@media (max-width: 600px) {
  .rls-table-root .rls-controls-row--single { flex-wrap: wrap !important; }
  .rls-table-root .rls-search-wrap { width: 100%; }
  .rls-table-root .rls-search { width: 100%; }
}

/* ── Filter pills ── */
.rls-table-root .rls-filter-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--rls-muted); font-family: Arial, sans-serif; text-transform: uppercase; margin-right: 2px; }
.rls-table-root .pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--rls-border); background: var(--rls-white); font-size: .78rem; font-family: Arial, sans-serif; cursor: pointer; transition: all .15s; color: #333; font-weight: 500; }
.rls-table-root .pill:hover { border-color: var(--rls-navy); color: var(--rls-navy); }
.rls-table-root .pill.active { background: var(--rls-navy); border-color: var(--rls-navy); color: #fff; }
.rls-table-root .pill .cnt { font-size: .7rem; opacity: .75; }
.rls-table-root .pill.cat-pill { font-size: .74rem; padding: 4px 11px; }
.rls-table-root .pill.cat-pill.active { background: var(--rls-gold); border-color: var(--rls-gold); color: #fff; }

/* ── Compare button ── */
.rls-table-root .btn-compare { padding: 6px 15px; border-radius: 20px; border: 1.5px solid var(--rls-gold); background: transparent; color: var(--rls-gold); font-size: .78rem; font-family: Arial, sans-serif; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; }
.rls-table-root .btn-compare:hover, .rls-table-root .btn-compare.active { background: var(--rls-gold); color: #fff; }
.rls-table-root .btn-exit-compare { padding: 6px 15px; border-radius: 20px; border: 1.5px solid #888; background: transparent; color: #555; font-size: .78rem; font-family: Arial, sans-serif; font-weight: 600; cursor: pointer; white-space: nowrap; display: none; }
.rls-table-root .btn-exit-compare.visible { display: inline-flex; align-items: center; gap: 5px; }

/* ── Legend (Type 1) ── */
.rls-table-root .rls-legend { display: flex; gap: 14px; align-items: center; font-size: .78rem; font-family: Arial, sans-serif; color: #555; }
.rls-table-root .rls-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.rls-table-root .rls-legend-dot.yes { background: var(--rls-navy); }
.rls-table-root .rls-legend-dot.no  { background: #ddd; }

/* ── Table ── */
.rls-table-root .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rls-table-root table { width: 100%; border-collapse: collapse; }
.rls-table-root thead th { background: var(--rls-navy); color: #fff; padding: 10px 18px; font-size: .78rem; font-family: Arial, sans-serif; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.rls-table-root thead th.th-dots { text-align: center; width: 130px; }
.rls-table-root thead th.th-dl   { text-align: center; width: 110px; }

/* ── Body rows ── */
.rls-table-root tbody tr.sr { border-bottom: 1px solid var(--rls-border); transition: background .1s; cursor: pointer; }
.rls-table-root tbody tr.sr:nth-child(4n+1) { background: var(--rls-white); }
.rls-table-root tbody tr.sr:nth-child(4n+3) { background: rgb(252, 250, 245); }
.rls-table-root .rls-tbody tr:nth-child(even) { background: rgb(252, 250, 245); }
.rls-table-root tbody tr.sr:hover { background: linear-gradient(180deg, rgb(252, 250, 245) 0%, rgb(255, 255, 255) 100%); }
.rls-table-root tbody tr.sr.compare-selected { background: #fffbef !important; border-left: 3px solid var(--rls-gold); }
.rls-compare-banner { display: none; align-items: center; gap: 8px; background: #fffbef; border: 1.5px solid var(--rls-gold); border-radius: 6px; padding: 9px 14px; margin: 8px 0 4px; font-size: .82rem; font-family: Arial, sans-serif; color: #5a4a00; }
.rls-compare-banner.visible { display: flex; }
.rls-compare-banner-icon { font-size: 1rem; flex-shrink: 0; }
.rls-table-root td { padding: 10px 18px; vertical-align: middle; font-size: .9rem; }

/* ── State cell ── */
.rls-table-root td.sc { color: var(--rls-navy); white-space: nowrap; }
.rls-table-root .state-inner { display: flex; align-items: center; gap: 10px; }
.rls-table-root .chevron { display: inline-flex; align-items: center; color: var(--rls-navy); transition: transform .2s; flex-shrink: 0; opacity: .85; }
.rls-table-root .chevron svg { display: block; }
.rls-table-root tr.sr.open .chevron { transform: rotate(180deg); }
.rls-table-root .state-name { font-weight: 700; font-size: .95rem; }
.rls-table-root .state-score-sub { font-size: .76rem; font-style: italic; color: var(--rls-muted); font-weight: 400; line-height: 1.3; display: block; margin-top: 1px; }

/* ── Dot cluster cell (Type 2) ── */
.rls-table-root td.dc { text-align: center; padding: 8px 10px; width: 130px; }

/* ── Yes/No dot (Type 1) ── */
.rls-table-root .rls-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.rls-table-root .rls-dot.yes { background: var(--rls-navy); }
.rls-table-root .rls-dot.no  { background: #ddd; }

/* ── Download cell ── */
.rls-table-root td.dlc { text-align: center; white-space: nowrap; width: 110px; }
.rls-table-root td.dlc a { color: var(--rls-navy); opacity: .7; transition: opacity .15s; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: .65rem; font-family: Arial, sans-serif; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.rls-table-root td.dlc a:hover { opacity: 1; }

/* ── Compare checkmark ── */
.rls-table-root .compare-check { display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--rls-gold); align-items: center; justify-content: center; flex-shrink: 0; }
.rls-table-root .compare-check svg { width: 11px; height: 11px; }
.rls-table-root tr.sr.compare-selected .compare-check { display: flex; }
.rls-table-root tr.sr.compare-selected .chevron { display: none; }

/* ── Expand panel (Type 2) ── */
.rls-table-root tr.xr { display: table-row; }
.rls-table-root tr.xr td { padding: 0; }
.rls-table-root .xpanel-outer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.rls-table-root tr.xr.open .xpanel-outer {
  grid-template-rows: 1fr;
}
.rls-table-root .xpanel-inner { overflow: hidden; }
.rls-table-root .xpanel { padding: 22px 28px; background: linear-gradient(180deg, rgb(252, 250, 245) 0%, rgb(255, 255, 255) 100%); border-bottom: 3px solid var(--rls-navy); }
.rls-table-root .xpanel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.rls-table-root .xcard { background: var(--rls-white); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--rls-border); }
.rls-table-root .xcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rls-table-root .xcard-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rls-table-root .xcard-dot.yes { background: var(--rls-navy); }
.rls-table-root .xcard-dot.no  { background: #ddd; }
.rls-table-root .xcard-label { font-size: .8rem; font-weight: 700; color: var(--rls-navy); font-family: Arial, sans-serif; }
.rls-table-root .xcard-code { font-size: .73rem; color: #555; line-height: 1.45; font-style: italic; margin-bottom: 6px; }
.rls-no-citation { color: var(--rls-muted); font-style: italic; font-size: .85em; }
.rls-table-root .xcard-stat { font-size: .75rem; color: #555; line-height: 1.5; }
.rls-table-root .xcard-stat a { color: var(--rls-navy); text-decoration: underline; text-decoration-color: rgba(26,58,92,.3); }
.rls-table-root .xcard-stat a:hover { text-decoration-color: var(--rls-navy); }
.rls-table-root .xcard-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .68rem; font-weight: 700; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.rls-table-root .xcard-badge.yes { background: #e8f0e9; color: #2d6a4f; margin-bottom: 8px; }
.rls-table-root .xcard-badge.no  { background: #f5f5f5; color: #999; margin-bottom: 8px; }

/* ── Spinner ── */
.rls-table-root .rls-spinner-wrap { padding: 48px; text-align: center; }
.rls-table-root .rls-spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--rls-navy); border-radius: 50%; width: 36px; height: 36px; animation: rls-spin .8s linear infinite; margin: 0 auto 12px; }
@keyframes rls-spin { to { transform: rotate(360deg); } }
.rls-table-root .rls-error { padding: 32px 28px; color: #c00; font-family: Arial, sans-serif; font-size: .9rem; }

/* ── Compare tray (fixed global overlay, injected once) ── */
#rls-compare-tray { position: fixed; bottom: 0; left: 0; right: 0; background: var(--rls-navy); color: #fff; padding: 16px 24px; transform: translateY(100%); transition: transform .3s ease; z-index: 1000; box-shadow: 0 -4px 20px rgba(0,0,0,.3); }
#rls-compare-tray.open { transform: translateY(0); }
.rls-tray-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.rls-tray-title { font-size: .85rem; font-weight: 700; font-family: Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.rls-tray-actions { display: flex; gap: 8px; align-items: center; }
.rls-tray-btn { padding: 5px 14px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: .75rem; font-family: Arial, sans-serif; cursor: pointer; transition: all .15s; }
.rls-tray-btn:hover { background: rgba(255,255,255,.15); }
.rls-tray-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rls-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 16px; font-size: .78rem; font-family: Arial, sans-serif; }
.rls-chip-remove { background: rgba(255,255,255,.2); border: none; color: #fff; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.rls-chip-remove:hover { background: rgba(255,255,255,.4); }
.rls-tray-grid-wrap { overflow-x: auto; }
.rls-tray-grid { border-collapse: collapse; font-size: .78rem; font-family: Arial, sans-serif; min-width: 100%; }
.rls-tray-grid th { background: rgba(255,255,255,.1); padding: 7px 14px; text-align: left; font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.15); }
.rls-tray-grid th.state-col { text-align: left; min-width: 160px; }
.rls-tray-grid td { padding: 6px 14px; border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: middle; }
.rls-tray-grid tr:last-child td { border-bottom: none; }
.rls-tray-grid tr.total-row td { background: rgba(255,255,255,.08); font-weight: 700; }
.rls-yes-pill  { display: inline-block; background: rgba(100,200,120,.2); color: #7eeaa0; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.rls-no-pill   { display: inline-block; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); padding: 2px 8px; border-radius: 10px; font-size: .7rem; }
.rls-score-gold { display: inline-block; background: var(--rls-gold); color: #fff; padding: 2px 9px; border-radius: 10px; font-size: .75rem; font-weight: 700; }
.rls-score-norm { display: inline-block; background: rgba(255,255,255,.15); color: #fff; padding: 2px 9px; border-radius: 10px; font-size: .75rem; font-weight: 600; }
.rls-tray-hint { font-size: .72rem; opacity: .5; font-family: Arial, sans-serif; font-style: italic; margin-top: 8px; }

/* ── Tooltip (fixed global, injected once) ── */
#rls-tooltip { position: fixed; pointer-events: none; background: #111; color: #fff; font-size: .72rem; font-family: Arial, sans-serif; padding: 4px 9px; border-radius: 5px; z-index: 9999; display: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ── Dot fill animation ── */
@keyframes rls-dot-fill {
  0%   { background: #e0e0e0; transform: scale(0.4); }
  65%  { transform: scale(1.2); background: #1a3a5c; }
  100% { transform: scale(1);   background: #1a3a5c; }
}

/* ── Shake animation ── */
@keyframes rls-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.rls-shake { animation: rls-shake .4s ease; }

/* ── External link SVG ── */
.rls-ext-icon { margin-left: 3px; vertical-align: middle; opacity: .7; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .rls-table-root .rls-header { padding: 16px 16px 12px; }
  .rls-table-root .rls-header h2 { font-size: 1.1rem; }
  .rls-table-root .rls-controls { padding: 10px 12px; }
  .rls-table-root td { padding: 8px 10px; }
  .rls-table-root .xpanel { padding: 14px 12px; }
  .rls-table-root .xpanel-grid { grid-template-columns: 1fr 1fr; }
  .rls-table-root thead th.th-dl { display: none; }
  .rls-table-root td.dlc { display: none; }
  .rls-table-root td.dc { width: 70px; }
  .rls-table-root thead th.th-dots { width: 70px; }
  .rls-table-root .state-name { font-size: .85rem; }
  .rls-table-root .state-score-sub { font-size: .7rem; }
  #rls-tooltip { display: none !important; }
}
@media (max-width: 420px) {
  .rls-table-root .xpanel-grid { grid-template-columns: 1fr; }
  .rls-table-root .pill { font-size: .7rem; padding: 4px 9px; }
}