/* =============================================================================
   AU Decisions Database — Integrate Africa Advisory Services brand theme
   Palette and logo applied from the official brand guide:
     Primary deep blue  #004181   Primary cyan  #04B1DB
     Secondary navy     #00101E   White         #FFFFFF
   The refined editorial structure is retained; institutional green/gold has
   been replaced by the brand blues throughout.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');
:root {
  --au-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --au-font-arabic: "Noto Sans Arabic", "Atkinson Hyperlegible", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --au-font-ui: "Atkinson Hyperlegible", "Noto Sans Arabic", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Brand palette (Integrate Africa Advisory Services) */
  --au-green:       #004181;  /* primary deep blue (kept var name for compatibility) */
  --au-green-deep:  #00101E;  /* secondary navy */
  --au-green-soft:  #0a5aa6;  /* lighter blue */
  --au-gold:        #04B1DB;  /* primary cyan accent */
  --au-gold-soft:   #5fd0ec;  /* soft cyan */

  /* Brand-named aliases (preferred for new code) */
  --brand-blue:       #004181;
  --brand-blue-deep:  #00101E;
  --brand-cyan:       #04B1DB;
  --brand-cyan-soft:  #5fd0ec;

  /* Neutrals — clean, cool paper tones to suit a blue brand */
  --paper:          #f6f8fb;
  --paper-2:        #eef2f7;
  --card:           #ffffff;
  --ink:            #14202b;
  --ink-soft:       #44515e;
  --muted:          #71808d;
  --line:           #e2e8f0;
  --line-strong:    #cdd7e2;

  /* Status colors */
  --verified:       #04B1DB;
  --review:         #9a6a00;
  --provisional:    #8a7320;
  --danger:         #9c3a2e;
  --warning-bg:     #faf4e2;

  /* Typography */
  --display: var(--au-font-ui);
  --body:    var(--au-font-ui);
  --mono:    var(--au-font-ui);

  /* Shape & depth */
  --radius:    5px;
  --radius-lg: 9px;
  --shadow-sm: 0 1px 2px rgba(0,16,30,.04), 0 1px 3px rgba(0,16,30,.05);
  --shadow:    0 3px 12px rgba(0,16,30,.07), 0 1px 3px rgba(0,16,30,.05);
  --shadow-lg: 0 16px 44px rgba(0,65,129,.15);
  --maxw: 1140px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .15s;
  --t: .25s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Base styling for every text-like input and textarea, so nothing renders with
   the browser's default look regardless of where it sits in the markup. More
   specific rules (.filters, .search-row, .modal, etc.) refine this. */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="url"], input[type="number"],
input:not([type]), textarea, select {
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:not([type]):focus, input[type="text"]:focus, input[type="search"]:focus,
input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--au-green);
  box-shadow: 0 0 0 3px rgba(0,65,129,.09);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 12% 6%, rgba(0,65,129,.03), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(184,134,11,.035), transparent 36%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Refined typographic scale ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); margin: 0 0 .45em; }
h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; }
h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: .98rem; font-weight: 600; }
p { margin: 0 0 .9rem; }
a { color: var(--au-green); text-decoration: none; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--au-gold); text-decoration: underline; }

/* =============================================================================
   HEADER & NAVIGATION
   ============================================================================= */
header {
  position: relative;
  background: linear-gradient(165deg, var(--au-green-deep), var(--au-green));
  color: #f4f1e8;
  overflow: hidden;
  border-bottom: 2px solid var(--au-gold);
}
header::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 72px);
  pointer-events: none;
}
.header-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 36px 0; position: relative; z-index: 1; }
.header-inner.centered { text-align: center; }
.header-inner.centered header h1,
.header-inner.centered h1 { margin-left: auto; margin-right: auto; }
.header-inner.centered p { margin-left: auto; margin-right: auto; }
.header-inner.centered nav { justify-content: center; }
.header-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--au-gold-soft); margin-bottom: 12px;
  animation: fade .6s var(--ease) both;
}
header h1 { color: #ffffff; margin: 0 0 10px; max-width: 20ch; animation: fade .6s .05s var(--ease) both; }
header p { color: #cfe0ee; max-width: 64ch; font-size: .98rem; margin: 0 0 24px; animation: fade .6s .1s var(--ease) both; }

/* Brand logo lockup in the header */
.brand-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0 4px; animation: fade .6s var(--ease) both;
}
.header-inner.centered .brand-bar { justify-content: center; }
.brand-bar img.brand-logo {
  height: 46px; width: auto; display: block;
  /* logo art is dark-on-transparent; sit it on a soft white chip so it
     reads cleanly on the deep-blue header */
  background: #ffffff; padding: 8px 14px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 600px) { .brand-bar img.brand-logo { height: 38px; } }

nav { display: flex; gap: 2px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); margin-top: 6px; }
nav button {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: #c5d0c6; font-family: var(--display); font-size: .92rem; font-weight: 500;
  padding: 14px 16px; cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
nav button:hover { color: #fff; background: rgba(255,255,255,.045); }
nav button.active { color: #fff; border-bottom-color: var(--au-gold); }

/* =============================================================================
   LAYOUT & ENTRANCE MOTION
   ============================================================================= */
main { max-width: var(--maxw); margin: 0 auto; padding: 40px 36px 72px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view { animation: fadeUp .4s var(--ease) both; }

/* Stagger children of grids/lists for a smooth reveal */
.grid > *, #resultsList > .result {
  animation: fadeUp .42s var(--ease) both;
}
.grid > *:nth-child(2), #resultsList > .result:nth-child(2) { animation-delay: .04s; }
.grid > *:nth-child(3), #resultsList > .result:nth-child(3) { animation-delay: .08s; }
.grid > *:nth-child(4), #resultsList > .result:nth-child(4) { animation-delay: .12s; }
.grid > *:nth-child(5), #resultsList > .result:nth-child(5) { animation-delay: .16s; }
.grid > *:nth-child(6), #resultsList > .result:nth-child(6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  *, .view, .grid > *, #resultsList > .result { animation: none !important; transition: none !important; }
}

/* =============================================================================
   HERO (home)
   ============================================================================= */
.hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px 42px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.hero::after { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--au-green), var(--au-gold)); }
.hero h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 24ch; }
.hero > p { color: var(--ink-soft); font-size: 1rem; max-width: 60ch; }

.search-row { display: flex; gap: 10px; margin: 24px 0 14px; }
.search-row input {
  flex: 1; font-family: var(--body); font-size: 1rem; padding: 13px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-row input:focus { outline: none; border-color: var(--au-green); box-shadow: 0 0 0 3px rgba(0,65,129,.09); }

/* =============================================================================
   BUTTONS
   ============================================================================= */
button.primary, .btn-primary {
  font-family: var(--display); font-weight: 600; font-size: .95rem; white-space: nowrap;
  background: var(--au-green); color: #fdfcf7; border: 0; border-radius: var(--radius);
  padding: 12px 24px; cursor: pointer; letter-spacing: .005em; box-shadow: var(--shadow-sm);
  transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
button.primary:hover { background: var(--au-green-deep); box-shadow: var(--shadow); transform: translateY(-1px); }
button.primary:active { transform: translateY(0); }

button.secondary {
  font-family: var(--display); font-weight: 500; font-size: .9rem; white-space: nowrap;
  background: var(--card); color: var(--au-green); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 10px 16px; cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
button.secondary:hover { border-color: var(--au-green); background: var(--paper-2); transform: translateY(-1px); }

button.danger {
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  background: var(--danger); color: #fff; border: 0; border-radius: var(--radius);
  padding: 10px 16px; cursor: pointer; transition: filter var(--t) var(--ease);
}
button.danger:hover { filter: brightness(.92); }

/* =============================================================================
   CARDS & GRID
   ============================================================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card h3 { margin-top: 0; }
.card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }

main > section > h2 { margin-top: 6px; margin-bottom: 5px; }
main > section > p { color: var(--ink-soft); margin-bottom: 24px; }
#homeView h2 { margin-top: 48px; }
#homeView .hero + h2 { position: relative; padding-bottom: 9px; }
#homeView .hero + h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: var(--au-gold); }

/* =============================================================================
   NOTICE
   ============================================================================= */
.notice {
  background: var(--warning-bg); border: 1px solid #ecdcab; border-left: 3px solid var(--au-gold);
  border-radius: var(--radius); padding: 16px 20px; margin: 22px 0; font-size: .94rem;
  color: #5c4f29; line-height: 1.5;
}

/* =============================================================================
   SEARCH PAGE
   ============================================================================= */
.layout { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; }
.filters {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; position: sticky; top: 18px; box-shadow: var(--shadow-sm);
}
.filters h3 {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
  font-family: var(--mono); font-weight: 500; border-bottom: 1px solid var(--line);
  padding-bottom: 11px; margin-bottom: 4px;
}
.filters label {
  display: block; font-family: var(--mono); font-size: .67rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 16px 0 5px;
}
.filters input, .filters select {
  width: 100%; font-family: var(--body); font-size: .94rem; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.filters input:focus, .filters select:focus { outline: none; border-color: var(--au-green); box-shadow: 0 0 0 3px rgba(0,65,129,.07); }

.results-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.results-toolbar p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.results-toolbar strong { font-family: var(--display); color: var(--au-green); font-size: 1.2rem; }

.result {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; margin-bottom: 14px; cursor: pointer; position: relative;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.result::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  background: var(--au-gold); border-radius: 2px; opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.result:hover { box-shadow: var(--shadow); transform: translateX(3px); border-color: var(--line-strong); }
.result:hover::before { opacity: 1; }
.result h3 { margin: 10px 0 7px; font-size: 1.15rem; line-height: 1.32; transition: color var(--t-fast) var(--ease); }
.result:hover h3 { color: var(--au-green); }
.meta { color: var(--muted); font-size: .82rem; font-family: var(--mono); letter-spacing: .01em; }
.small { font-size: .85rem; color: var(--ink-soft); }

/* =============================================================================
   BADGES
   ============================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: .64rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; background: var(--paper-2); color: var(--ink-soft);
  border: 1px solid var(--line); margin: 2px 4px 2px 0;
}
.badge.green   { background: #e7f0ea; color: var(--verified); border-color: #c3dbc9; }
.badge.warning { background: var(--warning-bg); color: var(--review); border-color: #ecdcab; }
.badge.red     { background: #f7e8e5; color: var(--danger); border-color: #e8c9c3; }
.badge.gray    { background: var(--paper-2); color: var(--muted); }

/* =============================================================================
   DECISION PROFILE
   ============================================================================= */
.profile-header {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 36px; margin: 16px 0 0; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.profile-header::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--au-green), var(--au-gold) 60%, transparent);
}
.profile-header h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 12px 0; max-width: 34ch; }

.kv { display: grid; grid-template-columns: 210px 1fr; gap: 9px 20px; font-size: .94rem; margin-top: 6px; }
.kv strong {
  color: var(--muted); font-weight: 500; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .05em; text-transform: uppercase; padding-top: 2px;
}
.kv span { color: var(--ink); }

.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 24px 0 20px; }
.tab-btn {
  font-family: var(--display); font-weight: 500; font-size: .94rem; background: transparent;
  border: 0; border-bottom: 2px solid transparent; padding: 12px 16px; cursor: pointer;
  color: var(--muted); transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--au-green); border-bottom-color: var(--au-gold); }

.paragraph {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--au-green);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 13px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t) var(--ease);
}
.paragraph:hover { box-shadow: var(--shadow); }
.paragraph p { font-size: 1rem; line-height: 1.58; margin: 11px 0; }

.text-clean {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 36px; line-height: 1.75; font-size: 1.02rem; white-space: pre-wrap;
  box-shadow: var(--shadow-sm); max-width: 76ch;
}

/* =============================================================================
   TABLES
   ============================================================================= */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .92rem; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  background: var(--paper-2); color: var(--ink-soft); font-family: var(--mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
}
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover { background: var(--paper); }
tbody tr:last-child td { border-bottom: 0; }

/* =============================================================================
   PAGINATION
   ============================================================================= */
.pagination { display: flex; gap: 5px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.pagination button {
  font-family: var(--mono); font-size: .85rem; background: var(--card); color: var(--au-green);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 13px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pagination button:hover:not(:disabled) { background: var(--au-green); color: #fff; transform: translateY(-1px); }
.pagination button.active { background: var(--au-green); color: #fff; border-color: var(--au-green); }
.pagination button:disabled { opacity: .35; cursor: not-allowed; }

/* =============================================================================
   EMPTY STATES & MISC
   ============================================================================= */
.empty {
  padding: 44px 30px; text-align: center; color: var(--muted); background: var(--card);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  font-family: var(--body); font-style: italic;
}
.hidden { display: none !important; }

/* Standalone page-level search input (e.g. glossary filter) */
.page-search {
  width: 100%;
  max-width: 360px;
  margin-bottom: 22px;
  display: block;
}

/* =============================================================================
   MODALS (legacy in-page modals; SweetAlert handles most dialogs now)
   ============================================================================= */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,16,30,.42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  animation: fade .2s var(--ease) both;
}
.modal {
  background: var(--card); border-radius: var(--radius-lg); padding: 32px;
  max-width: 540px; width: calc(100% - 32px); box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--au-gold); animation: fadeUp .28s var(--ease) both;
}
.modal h3 { margin-top: 0; }
.modal input, .modal select, .modal textarea {
  width: 100%; font-family: var(--body); font-size: .98rem; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
}
.modal textarea { min-height: 110px; resize: vertical; }

/* =============================================================================
   FOOTER
   ============================================================================= */
footer { margin-top: 56px; padding: 36px; background: var(--au-green-deep); color: #a8b6a8; border-top: 2px solid var(--au-gold); }
footer p { max-width: var(--maxw); margin: 0 auto; font-size: .88rem; }
footer a { color: var(--au-gold-soft); }

/* =============================================================================
   SWEETALERT2 — themed to match the design system
   ============================================================================= */
.swal2-popup {
  font-family: var(--body) !important; border-radius: var(--radius-lg) !important;
  border-top: 3px solid var(--au-gold) !important; padding: 28px !important;
}
.swal2-title { font-family: var(--display) !important; font-weight: 600 !important; color: var(--ink) !important; font-size: 1.3rem !important; }
.swal2-html-container { color: var(--ink-soft) !important; font-size: 1rem !important; }
.swal2-confirm.swal2-styled {
  font-family: var(--display) !important; font-weight: 600 !important;
  background: var(--au-green) !important; border-radius: var(--radius) !important;
  padding: 11px 24px !important; box-shadow: none !important;
}
.swal2-cancel.swal2-styled {
  font-family: var(--display) !important; font-weight: 500 !important;
  background: var(--card) !important; color: var(--au-green) !important;
  border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; padding: 11px 24px !important;
}
.swal2-input, .swal2-textarea, .swal2-select {
  font-family: var(--body) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--line-strong) !important;
}
.swal2-input:focus, .swal2-textarea:focus { border-color: var(--au-green) !important; box-shadow: 0 0 0 3px rgba(0,65,129,.09) !important; }
.swal2-toast { font-family: var(--body) !important; border-left: 3px solid var(--au-gold) !important; }
.swal2-timer-progress-bar { background: var(--au-gold-soft) !important; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 860px) {
  .header-inner, main { padding-left: 20px; padding-right: 20px; }
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .search-row { flex-direction: column; }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv strong { padding-top: 11px; }
  .hero { padding: 28px 22px; }
  .profile-header { padding: 26px 22px; }
  nav { overflow-x: auto; flex-wrap: nowrap; }
  nav button { white-space: nowrap; }
}

/* =============================================================================
   Centred page note — shown instead of a bare menu with an empty body
   (e.g. "please sign in", or a role-restricted message). Client request 3.
   ============================================================================= */
.page-note {
  max-width: 520px; margin: 56px auto; text-align: center;
  padding: 40px 36px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  animation: fadeUp .3s var(--ease) both;
}
.page-note .page-note-emblem {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--brand-blue);
}
.page-note h3 { margin: 0 0 8px; font-size: 1.25rem; }
.page-note p { color: var(--muted); margin: 0 auto 18px; max-width: 40ch; line-height: 1.55; }
.page-note .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* AI assist guardrail box */
.ai-guardrails { margin-top: 14px; padding: 14px 16px; background: var(--paper-2); border-radius: var(--radius); border: 1px solid var(--line); }
.ai-guardrails ul { margin: 8px 0 0; padding-left: 18px; }
.ai-guardrails li { margin-bottom: 5px; line-height: 1.5; }

/* Search transparency */
.snippet {
  margin-top: 8px;
  padding: 10px;
  border-left: 3px solid #888;
  background: rgba(0,0,0,0.03);
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.95;
}

.result .small strong {
  color: #444;
}

/* Search transparency */
.snippet {
  margin-top: 8px;
  padding: 10px;
  border-left: 3px solid #888;
  background: rgba(0,0,0,0.03);
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.95;
}

.result .small strong {
  color: #444;
}

/* Search autocomplete */
.suggestions {
  display: grid;
  gap: 6px;
  margin: 6px 0 12px;
  padding: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.suggestion {
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  font-size: 0.9rem;
}

.suggestion:hover {
  background: rgba(0,0,0,0.08);
}

/* Visible suggested searches */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}

.quick-search {
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  font-size: 0.85rem;
}

.quick-search:hover {
  background: rgba(0,0,0,0.09);
}

.suggestion {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.suggestion-type {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
}

/* Force autocomplete dropdown to be clearly visible */
.filters {
  overflow: visible !important;
}

#searchSuggestions {
  display: grid;
  position: relative;
  z-index: 9999;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 14px;
  padding: 8px;
  border: 2px solid #0b4aa2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

#searchSuggestions.hidden {
  display: none !important;
}

#searchSuggestions .suggestion {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 6px;
  padding: 9px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #f7f7f7;
  color: #111;
  cursor: pointer;
}

#searchSuggestions .suggestion:hover {
  background: #e9f1ff;
}

#searchSuggestions .suggestion-type {
  font-size: 0.72rem;
  opacity: 0.75;
  text-transform: uppercase;
}

.profile-export-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.link-button {
  border: none;
  background: transparent;
  color: var(--link, #0b4aa2);
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.paragraph-highlight {
  outline: 3px solid #f5b400;
  background: rgba(245, 180, 0, 0.16);
  transition: background 0.3s ease, outline 0.3s ease;
}

.search-hit {
  background: #fff1a8;
  color: #111;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
}

/* Legacy select — hidden, replaced by flag buttons */
.language-switcher select { display: none; }

/* Flag button group */
.lang-switcher-flags {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  flex-shrink: 0;
}

.lang-flag-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast, .15s) ease,
              border-color var(--t-fast, .15s) ease,
              transform var(--t-fast, .15s) ease;
  line-height: 1;
}

.lang-flag-btn:hover {
  background: var(--paper-2, #f5f5f5);
  border-color: var(--line, #ddd);
  transform: translateY(-1px);
}

.lang-flag-btn.active {
  background: var(--paper-2, #f0f4f8);
  border-color: var(--au-green, #004181);
  box-shadow: 0 0 0 2px rgba(0,65,129,.12);
}

.lang-flag-emoji {
  font-size: 1.15rem;
  line-height: 1;
  display: block;
}

.lang-flag-label {
  font-size: .6rem;
  font-family: var(--mono, monospace);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted, #888);
  text-transform: uppercase;
  display: block;
}

.lang-flag-btn.active .lang-flag-label {
  color: var(--au-green, #004181);
}

/* RTL: reverse button order visually */
body.rtl, :root[lang=ar] body .lang-switcher-flags,
[lang=ar] .lang-switcher-flags {
  flex-direction: row-reverse;
  margin-left: 0;
  margin-right: 10px;
}

@media (max-width: 600px) {
  .lang-flag-label { display: none; }
  .lang-flag-btn { padding: 4px 5px; }
  .lang-flag-emoji { font-size: 1rem; }
}

body.rtl, :root[lang=ar] body {
  direction: rtl;
  text-align: right;
}

body.rtl, :root[lang=ar] body .kv {
  direction: rtl;
}

body.rtl, :root[lang=ar] body input,
body.rtl, :root[lang=ar] body textarea,
body.rtl, :root[lang=ar] body select {
  direction: rtl;
  text-align: right;
}

body.rtl, :root[lang=ar] body .table-wrap table {
  direction: rtl;
}

body.rtl, :root[lang=ar] body .badge {
  margin-left: 4px;
  margin-right: 0;
}

.rtl-text {
  direction: rtl;
  text-align: right;
  line-height: 1.8;
}

.rtl-text .text-clean {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

.rtl-text {
  direction: rtl;
  text-align: right;
  line-height: 1.8;
}

.rtl-text .text-clean {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

#decisionLanguageDisplay .text-clean {
  white-space: pre-wrap;
  max-height: 720px;
  overflow: auto;
}

.union-hero-card {
  text-align: center;
  padding: 34px;
}

.union-hero-card h1 {
  margin: 10px 0;
  font-size: clamp(28px, 4vw, 46px);
}

.union-hero-card p {
  max-width: 860px;
  margin: 0 auto;
}

.union-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.union-stat-card {
  text-align: center;
}

.union-stat-card h2 {
  font-size: 34px;
  margin: 0;
}

.union-task-grid,
.union-family-grid,
.union-law-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.union-task-card,
.union-family-card {
  border: 1px solid var(--border, #ddd);
  border-radius: 18px;
  padding: 18px;
  background: var(--card-bg, #fff);
  text-align: left;
  cursor: pointer;
  min-height: 120px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.union-task-card:hover,
.union-family-card:hover,
.union-law-card:hover {
  transform: translateY(-3px);
}

.union-task-card strong,
.union-family-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.union-task-card span,
.union-family-card span {
  display: block;
  font-size: 13px;
  opacity: .8;
}

.union-persona-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.union-law-card {
  transition: transform .18s ease;
}

.ul-shell {
  max-width: 1440px;
  margin: 0 auto;
  color: #1a2b3c;
}

.ul-header {
  margin-bottom: 28px;
}

.ul-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: #0b2b4f;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ul-title-icon {
  color: #c89b3b;
}

.ul-subtitle {
  font-size: 19px;
  color: #3e5a6b;
  margin-top: 8px;
  border-left: 4px solid #c89b3b;
  padding-left: 18px;
  max-width: 760px;
}

.ul-search-panel {
  background: #fff;
  border-radius: 32px;
  padding: 16px 22px;
  box-shadow: 0 20px 35px rgba(0,0,0,0.05), 0 8px 16px rgba(0,20,40,0.04);
  margin: 24px 0 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px solid #e9edf4;
}

.ul-search-icon {
  color: #5e6f82;
  font-size: 20px;
}

.ul-search-input {
  flex: 3;
  min-width: 250px;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  outline: none;
  background: transparent;
}

.ul-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.ul-chip {
  background: #eef2f6;
  border: none;
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1e3b4f;
  cursor: pointer;
}

.ul-chip:hover,
.ul-chip.active {
  background: #0b2b4f;
  color: #fff;
}

.ul-mode-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  background: #fff;
  padding: 10px 18px;
  border-radius: 48px;
  width: fit-content;
  box-shadow: 0 8px 18px rgba(0,0,0,0.02);
  border: 1px solid #e0e6ed;
}

.ul-mode-label {
  font-weight: 700;
  color: #2c3e50;
  margin-right: 4px;
}

.ul-mode-btn {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 32px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}

.ul-mode-btn.active-mode {
  background: #0b2b4f;
  color: #fff;
  box-shadow: 0 6px 12px rgba(11,43,79,0.2);
}

.ul-persona-note {
  margin-bottom: 26px;
  color: #3e5a6b;
  font-size: 14px;
}

.ul-cards-grid,
.ul-laws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 16px;
}

.ul-feature-card,
.ul-law-card {
  background: #fff;
  border-radius: 28px;
  padding: 24px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.03);
  transition: all .25s ease;
  border: 1px solid #edf1f7;
  display: flex;
  flex-direction: column;
}

.ul-feature-card:hover,
.ul-law-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 38px rgba(0,32,64,0.08);
  border-color: #cdd9e6;
}

.ul-card-visual {
  font-size: 24px;
  color: #c89b3b;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ul-icon-box {
  background: #f7f2e6;
  padding: 12px 15px;
  border-radius: 18px;
  display: inline-flex;
}

.ul-mini-label {
  font-size: 13px;
  color: #4b5c6e;
}

.ul-feature-card h3,
.ul-law-card h3 {
  font-size: 21px;
  font-weight: 750;
  margin-bottom: 8px;
  color: #0a2538;
}

.ul-feature-card p,
.ul-law-card p {
  color: #4a5c6e;
  font-size: 15px;
}

.ul-card-action {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #0b2b4f;
  border: none;
  border-top: 1px solid #eef2f6;
  padding-top: 16px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}

.ul-feature-card:hover .ul-card-action span:last-child {
  transform: translateX(5px);
  color: #c89b3b;
}

.ul-graph-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f9fafc;
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
}

.ul-orb {
  border-radius: 50%;
  display: inline-block;
}

.orb-blue { background: #0b2b4f; }
.orb-gold { background: #c89b3b; }
.orb-green { background: #256b4e; }
.ul-orb.big { width: 22px; height: 22px; }
.ul-orb.medium { width: 17px; height: 17px; }
.ul-orb.small { width: 12px; height: 12px; }

.ul-node-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
}

.node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.node-dot.blue { background: #0b2b4f; }
.node-dot.gold { background: #c89b3b; }
.node-dot.green { background: #256b4e; }

.ul-heatmap-sim {
  background: #f2f5f9;
  height: 48px;
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 0 12px;
  margin: 12px 0;
}

.ul-heatmap-sim span {
  width: 13px;
  background: #256b4e;
  border-radius: 6px 6px 0 0;
}

.ul-heatmap-sim span.short {
  background: #c89b3b;
}

.ul-article-sim {
  background: #f4f7fb;
  border-radius: 14px;
  padding: 12px;
  font-size: 13px;
  margin: 12px 0;
}

.ul-article-sim div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ul-article-sim span {
  background: #0b2b4f;
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
}

.ul-article-sim span:last-child {
  background: #c89b3b;
}

.ul-timeline-dots {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 14px 0;
}

.ul-timeline-dots span {
  width: 10px;
  height: 10px;
  background: #0b2b4f;
  border-radius: 50%;
  position: relative;
}

.ul-timeline-dots span:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 2px;
  background: #cbd5e1;
  top: 4px;
  left: 12px;
}

.ul-mini-date {
  font-size: 13px;
  color: #2c3e50;
}

.ul-compare-sim {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.ul-compare-sim span {
  background: #eef2f6;
  width: 50%;
  height: 42px;
  border-radius: 14px;
}

.ul-law-section {
  margin-top: 38px;
}

.ul-footer-note {
  margin-top: 42px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  padding-top: 28px;
}

@media (max-width: 650px) {
  .ul-search-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .ul-filter-chips {
    margin-left: 0;
  }

  .ul-mode-selector {
    border-radius: 22px;
  }
}

.union-console-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.union-console-item {
  text-align: left;
  border: 1px solid var(--border, #ddd);
  background: var(--card-bg, #fff);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
}

.union-console-item strong {
  display: block;
  margin-bottom: 4px;
}

.union-console-item span {
  display: block;
  font-size: 13px;
  opacity: .75;
}

.union-console-item:hover,
.union-console-law:hover {
  transform: translateY(-2px);
}

.union-console-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.union-console-law-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}

.union-console-law {
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  padding: 14px;
  background: var(--card-bg, #fff);
}

.union-console-law strong,
.union-console-law span {
  display: block;
  margin-bottom: 5px;
}

.union-console-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.union-console-item {
  text-align: left;
  border: 1px solid var(--border, #ddd);
  background: var(--card-bg, #fff);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
}

.union-console-item strong {
  display: block;
  margin-bottom: 4px;
}

.union-console-item span {
  display: block;
  font-size: 13px;
  opacity: .75;
}

.union-console-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.union-console-law-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}

.union-console-law {
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  padding: 14px;
  background: var(--card-bg, #fff);
}

.union-console-law strong,
.union-console-law span {
  display: block;
  margin-bottom: 5px;
}

.ul-console {
  max-width: 1280px;
  margin: 0 auto;
}

.ul-console-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ul-console-header h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 8px 0;
}

.ul-console-header p {
  max-width: 900px;
}

.ul-console-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ul-builder-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.ul-builder-item {
  text-align: left;
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  padding: 14px;
  background: var(--card-bg, #fff);
  cursor: pointer;
}

.ul-builder-item strong {
  display: block;
  margin-bottom: 5px;
}

.ul-builder-item span {
  display: block;
  font-size: 13px;
  opacity: .75;
}

.ul-builder-item:hover,
.ul-law-row:hover {
  transform: translateY(-2px);
}

.ul-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ul-law-list {
  display: grid;
  gap: 12px;
}

.ul-law-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  padding: 14px;
  background: var(--card-bg, #fff);
}

.ul-law-row strong,
.ul-law-row span {
  display: block;
  margin-bottom: 5px;
}

@media (max-width: 720px) {
  .ul-law-row {
    grid-template-columns: 1fr;
  }
}

.ul-home {
  max-width: 1440px;
  margin: 0 auto;
  color: #1a2b3c;
}

.ul-hero {
  margin-bottom: 28px;
}

.ul-hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  color: #0b2b4f;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ul-hero h1 span {
  color: #c89b3b;
}

.ul-hero p {
  font-size: 19px;
  color: #3e5a6b;
  border-left: 4px solid #c89b3b;
  padding-left: 18px;
  max-width: 760px;
}

.ul-search {
  background: white;
  border-radius: 32px;
  padding: 16px 22px;
  box-shadow: 0 20px 35px rgba(0,0,0,0.05), 0 8px 16px rgba(0,20,40,0.04);
  margin: 24px 0 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px solid #e9edf4;
}

.ul-search-icon {
  color: #5e6f82;
  font-size: 20px;
}

.ul-search input {
  flex: 3;
  min-width: 250px;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  outline: none;
  background: transparent;
}

.ul-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.ul-chip {
  background: #eef2f6;
  border: none;
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1e3b4f;
  cursor: pointer;
}

.ul-chip:hover,
.ul-chip.active {
  background: #0b2b4f;
  color: white;
}

.ul-mode-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  background: white;
  padding: 10px 18px;
  border-radius: 48px;
  width: fit-content;
  box-shadow: 0 8px 18px rgba(0,0,0,0.02);
  border: 1px solid #e0e6ed;
}

.ul-mode-selector > span {
  font-weight: 700;
  color: #2c3e50;
}

.ul-mode {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 32px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}

.ul-mode.active-mode {
  background: #0b2b4f;
  color: white;
  box-shadow: 0 6px 12px rgba(11,43,79,0.2);
}

.ul-persona-note {
  margin-bottom: 26px;
  color: #3e5a6b;
  font-size: 14px;
}

.ul-card-grid,
.ul-law-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 28px;
  margin-top: 16px;
}

.ul-feature-card,
.ul-law-card {
  background: white;
  border-radius: 28px;
  padding: 24px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.03);
  transition: all .25s ease;
  border: 1px solid #edf1f7;
  display: flex;
  flex-direction: column;
}

.ul-feature-card:hover,
.ul-law-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 38px rgba(0,32,64,0.08);
  border-color: #cdd9e6;
}

.ul-card-visual {
  font-size: 24px;
  color: #c89b3b;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ul-card-icon {
  background: #f7f2e6;
  padding: 12px 15px;
  border-radius: 18px;
  display: inline-flex;
}

.ul-card-label {
  font-size: 13px;
  color: #4b5c6e;
}

.ul-feature-card h3,
.ul-law-card h3 {
  font-size: 21px;
  font-weight: 750;
  margin-bottom: 8px;
  color: #0a2538;
}

.ul-feature-card p,
.ul-law-card p {
  color: #4a5c6e;
  font-size: 15px;
}

.ul-card-action {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #0b2b4f;
  border: none;
  border-top: 1px solid #eef2f6;
  padding-top: 16px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}

.ul-mini-graph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f9fafc;
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
}

.ul-node {
  border-radius: 50%;
  display: inline-block;
}

.ul-node.blue,
.dot.blue { background: #0b2b4f; }

.ul-node.gold,
.dot.gold { background: #c89b3b; }

.ul-node.green,
.dot.green { background: #256b4e; }

.ul-node.big { width: 22px; height: 22px; }
.ul-node.medium { width: 17px; height: 17px; }
.ul-node.small { width: 12px; height: 12px; }

.ul-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ul-heatmap {
  background: #f2f5f9;
  height: 48px;
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 0 12px;
  margin: 12px 0;
}

.ul-heatmap span {
  width: 13px;
  background: #256b4e;
  border-radius: 6px 6px 0 0;
}

.ul-heatmap span.short {
  background: #c89b3b;
}

.ul-article-preview {
  background: #f4f7fb;
  border-radius: 14px;
  padding: 12px;
  font-size: 13px;
  margin: 12px 0;
}

.ul-article-preview div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ul-article-preview span {
  background: #0b2b4f;
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
}

.ul-article-preview span:last-child {
  background: #c89b3b;
}

.ul-timeline-mini {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 14px 0;
}

.ul-timeline-mini span {
  width: 10px;
  height: 10px;
  background: #0b2b4f;
  border-radius: 50%;
  position: relative;
}

.ul-timeline-mini span:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 2px;
  background: #cbd5e1;
  top: 4px;
  left: 12px;
}

.ul-date-line {
  font-size: 13px;
  color: #2c3e50;
}

.ul-compare-mini {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.ul-compare-mini span {
  background: #eef2f6;
  width: 50%;
  height: 42px;
  border-radius: 14px;
}

.ul-atlas {
  margin-top: 42px;
}

.ul-footer-note {
  margin-top: 42px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  padding-top: 28px;
}

@media (max-width: 650px) {
  .ul-search {
    flex-direction: column;
    align-items: stretch;
  }

  .ul-chips {
    margin-left: 0;
  }

  .ul-mode-selector {
    border-radius: 22px;
  }
}

/* Clean Union Laws card layout: preserves design, only fixes arrangement */
.ul-card-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.ul-card-grid > .ul-feature-card {
  flex: 1 1 calc(33.333% - 28px) !important;
  max-width: calc(33.333% - 18px) !important;
  min-width: 280px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .ul-card-grid > .ul-feature-card {
    flex-basis: calc(50% - 28px) !important;
    max-width: calc(50% - 14px) !important;
  }
}

@media (max-width: 700px) {
  .ul-card-grid {
    display: block !important;
  }

  .ul-card-grid > .ul-feature-card {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 18px !important;
  }
}

/* Union Laws full-width layout fix */
#topicsList:has(.ul-home) {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: block !important;
}

.ul-home {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: block !important;
}

.ul-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
}

.ul-card-grid .ul-feature-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  .ul-card-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .ul-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* UNION LAWS TREATY ATLAS CARDS */

.ul-treaty-atlas-list {
  display: grid;
  gap: 24px;
  width: 100%;
}

.ul-treaty-atlas-card {
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.03);
  transition: all .25s ease;
}

.ul-treaty-atlas-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 38px rgba(0,32,64,0.08);
  border-color: #cdd9e6;
}

.ul-treaty-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}

.ul-treaty-header h2 {
  margin: 10px 0 4px;
  color: #0b2b4f;
  font-size: clamp(24px, 3vw, 34px);
}

.ul-treaty-summary {
  color: #4a5c6e;
  max-width: 980px;
  margin: 16px 0 20px;
}

.ul-treaty-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 16px;
}

.ul-treaty-zone {
  background: #f8fbff;
  border: 1px solid #dbe5ef;
  border-radius: 20px;
  padding: 16px;
}

.ul-treaty-zone h3 {
  color: #0b2b4f;
  margin: 0 0 12px;
  font-size: 18px;
}

.ul-zone-list {
  display: grid;
  gap: 10px;
}

.ul-zone-list div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-bottom: 1px solid #e6edf5;
  padding-bottom: 8px;
}

.ul-zone-list div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ul-zone-list strong {
  color: #334155;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ul-zone-list span {
  color: #475569;
  font-size: 14px;
}

.ul-treaty-footer {
  margin-top: 18px;
  border-top: 1px solid #eef2f6;
  padding-top: 14px;
  color: #4a5c6e;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .ul-treaty-zones {
    grid-template-columns: 1fr;
  }

  .ul-treaty-header {
    grid-template-columns: 1fr;
  }
}

/* UNION LAW INTELLIGENCE GRAPH */

.ul-graph-canvas {
margin: 24px 0;
background: #f8fbff;
border: 1px solid #dbe5ef;
border-radius: 28px;
padding: 24px;
min-height: 360px;
}

.ul-graph-map {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: stretch;
}

.ul-graph-node {
border-radius: 22px;
padding: 18px;
min-width: 220px;
max-width: 280px;
flex: 1 1 220px;
box-shadow: 0 10px 22px rgba(0,0,0,0.04);
}

.ul-graph-node strong {
display: block;
margin-bottom: 8px;
font-size: 16px;
}

.ul-graph-node span {
display: block;
font-size: 13px;
opacity: .78;
}

.law-node {
background: #ffffff;
border: 2px solid #0b2b4f;
color: #0b2b4f;
}

.decision-node {
background: #fff8e7;
border: 2px solid #c89b3b;
color: #4a3b13;
}



/* UNION LAWS INTELLIGENCE GRAPH FINAL STYLES */
.ul-graph-wrap,
.union-law-graph-wrap {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgba(11, 43, 79, 0.14);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 18px 40px rgba(11, 43, 79, 0.08);
}

.ul-graph-header,
.union-law-graph-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.ul-graph-header h2,
.union-law-graph-header h2 {
  margin: 0 0 8px;
  color: #0b2b4f;
  font-size: 26px;
  line-height: 1.15;
}

.ul-graph-header p,
.union-law-graph-header p {
  margin: 0;
  color: #41556e;
  line-height: 1.55;
}

.ul-graph-controls,
.union-law-graph-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.ul-graph-controls button,
.union-law-graph-controls button,
[data-ul-action="graph"],
[data-ul-graph-layer] {
  border: 1px solid rgba(11, 43, 79, 0.18);
  background: #ffffff;
  color: #0b2b4f;
  border-radius: 999px;
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

.ul-graph-controls button:hover,
.union-law-graph-controls button:hover,
[data-ul-action="graph"]:hover,
[data-ul-graph-layer]:hover {
  background: #0b2b4f;
  color: #ffffff;
}

.ul-graph-canvas,
.union-law-graph-canvas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: radial-gradient(circle at center, rgba(200, 155, 59, 0.13), transparent 42%),
              linear-gradient(135deg, #f7fbff, #ffffff);
  border: 1px dashed rgba(11, 43, 79, 0.22);
  min-height: 240px;
}

.ul-graph-node,
.union-law-graph-node {
  flex: 1 1 220px;
  min-width: 190px;
  padding: 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(11, 43, 79, 0.16);
  box-shadow: 0 10px 24px rgba(11, 43, 79, 0.08);
}

.ul-graph-node strong,
.union-law-graph-node strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #0b2b4f;
}

.ul-graph-node span,
.union-law-graph-node span {
  display: block;
  font-size: 13px;
  color: #52657c;
  line-height: 1.45;
}

.law-node,
.treaty-node {
  background: #ffffff;
  border: 2px solid #0b2b4f;
  color: #0b2b4f;
}

.article-node {
  background: #eef6ff;
  border: 2px solid #7aa7d9;
  color: #0b2b4f;
}

.state-node,
.state-party-node {
  background: #f3fff6;
  border: 2px solid #66a875;
  color: #173f21;
}

.decision-node {
  background: #fff8e7;
  border: 2px solid #c89b3b;
  color: #4a3b13;
}

.case-node,
.jurisprudence-node {
  background: #f8f2ff;
  border: 2px solid #9a75c9;
  color: #3a2457;
}

.related-node,
.related-treaty-node {
  background: #fff3ef;
  border: 2px solid #d98669;
  color: #5b2415;
}

.ul-graph-empty,
.union-law-graph-empty,
.empty {
  padding: 18px;
  border-radius: 16px;
  background: #f7f9fc;
  border: 1px solid rgba(11, 43, 79, 0.12);
  color: #52657c;
}

@media (max-width: 760px) {
  .ul-graph-wrap,
  .union-law-graph-wrap {
    padding: 16px;
    border-radius: 18px;
  }

  .ul-graph-header,
  .union-law-graph-header {
    flex-direction: column;
  }

  .ul-graph-header h2,
  .union-law-graph-header h2 {
    font-size: 22px;
  }

  .ul-graph-canvas,
  .union-law-graph-canvas {
    display: block;
    overflow-x: auto;
    min-height: auto;
  }

  .ul-graph-node,
  .union-law-graph-node {
    margin-bottom: 12px;
    min-width: 0;
    width: 100%;
  }
}



/* UNION LAWS GRAPH RECTANGULAR NODE OVERRIDE */
.ulg-canvas .ulg-node .ulg-node-box {
  fill: #ffffff;
  stroke: rgba(11, 43, 79, 0.28);
  stroke-width: 1.6;
  filter: drop-shadow(0 8px 16px rgba(11, 43, 79, 0.10));
}

.ulg-canvas .ulg-node.treaty .ulg-node-box {
  fill: #ffffff;
  stroke: #0b2b4f;
  stroke-width: 2.2;
}

.ulg-canvas .ulg-node.pending .ulg-node-box {
  fill: #f7f9fc;
  stroke: rgba(11, 43, 79, 0.18);
  stroke-dasharray: 5 4;
}

.ulg-canvas .ulg-node text {
  pointer-events: none;
}

.ul-graph-node,
.union-law-graph-node,
.ulg-node-card,
.ulg-panel,
.ulg-shell,
.ulg-status {
  border-radius: 14px !important;
}

.ul-graph-node,
.union-law-graph-node,
.ulg-node-card {
  aspect-ratio: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 14px !important;
}

.ul-graph-node::before,
.union-law-graph-node::before,
.ulg-node-card::before {
  border-radius: 14px !important;
}

@media (max-width: 760px) {
  .ulg-canvas {
    min-width: 860px;
  }
}



/* UNION LAWS HOME CARDS FINAL FIX V6 */

.ul-v6-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ul-home-card-v6,
.ul-home-card-v6:hover,
.ul-home-card-v6:focus,
.ul-home-card-v6:focus-within {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0b2b4f !important;
  border-radius: 24px !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.ul-home-card-v6::before,
.ul-home-card-v6::after,
.ul-graph-card-v6::before,
.ul-graph-card-v6::after {
  content: none !important;
  display: none !important;
}

.ul-home-card-v6:hover {
  box-shadow: 0 18px 40px rgba(11, 43, 79, 0.10) !important;
  border-color: rgba(11, 43, 79, 0.18) !important;
}

.ul-home-card-v6:hover h1,
.ul-home-card-v6:hover h2,
.ul-home-card-v6:hover h3,
.ul-home-card-v6:hover h4,
.ul-home-card-v6:hover p,
.ul-home-card-v6:hover span,
.ul-home-card-v6:hover strong,
.ul-home-card-v6:hover small,
.ul-home-card-v6:hover a,
.ul-home-card-v6:hover button {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ul-graph-card-v6 {
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* First card stable dots */
.ul-dot-row-v6 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 34px 0 28px !important;
  padding: 0 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-dot-row-v6 .dot {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border-radius: 999px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-dot-row-v6 .navy { background: #0b2b4f !important; }
.ul-dot-row-v6 .gold { background: #c89b3b !important; }
.ul-dot-row-v6 .green { background: #1f6f5b !important; }
.ul-dot-row-v6 .dark { background: #111827 !important; }

.ul-browse-card-v6:hover .ul-dot-row-v6,
.ul-browse-card-v6:hover .ul-dot-row-v6 .dot {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-browse-card-v6:hover .ul-dot-row-v6 .dot {
  display: inline-block !important;
}

/* Relationship evidence as three horizontal cells, not a vertical column */
.ul-evidence-strip-v6 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 22px 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 30 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-evidence-cell-v6 {
  display: grid !important;
  grid-template-columns: 8px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 7px !important;
  row-gap: 2px !important;
  align-items: start !important;
  min-height: 54px !important;
  padding: 9px 8px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(11, 43, 79, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0b2b4f !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.ul-evidence-cell-v6 .dot {
  grid-row: 1 / span 2 !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  margin-top: 4px !important;
  border-radius: 999px !important;
  background: #0b2b4f !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-evidence-cell-v6 strong {
  display: block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #0b2b4f !important;
}

.ul-evidence-cell-v6 small {
  display: block !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  color: #52657c !important;
}

.ul-evidence-cell-v6.decision .dot {
  background: #c89b3b !important;
}

.ul-evidence-cell-v6.case .dot {
  background: #1f6f5b !important;
}

.ul-graph-card-v6:hover .ul-evidence-strip-v6,
.ul-graph-card-v6:hover .ul-evidence-cell-v6,
.ul-graph-card-v6:hover .ul-evidence-cell-v6 .dot {
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-graph-card-v6:hover .ul-evidence-strip-v6 {
  display: grid !important;
}

.ul-graph-card-v6:hover .ul-evidence-cell-v6 {
  display: grid !important;
}

/* Ratification graph replacement, fully visible */
.ul-ratification-card-v6 {
  overflow: hidden !important;
  padding-bottom: 28px !important;
}

.ul-ratification-bars-v6 {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 34px 0 28px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  position: relative !important;
  z-index: 30 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.ul-ratification-bars-v6 .bar {
  display: inline-block !important;
  width: 13px !important;
  min-width: 13px !important;
  border-radius: 8px 8px 2px 2px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-ratification-bars-v6 .b1 { height: 24px !important; background: #1f6f5b !important; }
.ul-ratification-bars-v6 .b2 { height: 18px !important; background: #c89b3b !important; }
.ul-ratification-bars-v6 .b3 { height: 28px !important; background: #1f6f5b !important; }
.ul-ratification-bars-v6 .b4 { height: 22px !important; background: #c89b3b !important; }
.ul-ratification-bars-v6 .b5 { height: 34px !important; background: #1f6f5b !important; }
.ul-ratification-bars-v6 .b6 { height: 42px !important; background: #1f6f5b !important; }

.ul-ratification-card-v6:hover .ul-ratification-bars-v6 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ul-ratification-card-v6:hover .ul-ratification-bars-v6 .bar {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .ul-home-card-v6 {
    border-radius: 20px !important;
  }

  .ul-evidence-strip-v6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ul-evidence-cell-v6 {
    padding: 8px 6px !important;
    min-height: 58px !important;
  }

  .ul-evidence-cell-v6 small {
    font-size: 10px !important;
  }
}

/* Stable Union Law Intelligence Graph */

.ul-graph-shell {
  margin: 24px 0;
}

.ul-graph-canvas {
  background: #f8fbff;
  border: 1px solid #dbe5ef;
  border-radius: 28px;
  padding: 24px;
  min-height: 320px;
}

.ul-graph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ul-graph-node {
  border-radius: 22px;
  padding: 18px;
  min-height: 105px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.04);
}

.ul-graph-node strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.ul-graph-node span {
  display: block;
  font-size: 13px;
  opacity: .78;
}

.ul-graph-law {
  background: #ffffff;
  border: 2px solid #0b2b4f;
  color: #0b2b4f;
}

.ul-graph-decision {
  background: #fff8e7;
  border: 2px solid #c89b3b;
  color: #4a3b13;
}

/* =========================================================
   UNION LAWS HOMEPAGE CARD DEFECT FIX
   Fixes:
   1. Graph card wrongly becoming circular
   2. Ratification mini graph half-buried
   3. Empty stretched middle/lower row space
   ========================================================= */

/* Ensure the six homepage cards remain rectangular cards */
.ul-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Hard reset for all feature cards */
.ul-card-grid > .ul-feature-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 360px !important;
  max-height: none !important;

  overflow: visible !important;

  border-radius: 28px !important;
  clip-path: none !important;
  aspect-ratio: auto !important;
}

/* Stop any inherited graph/circle styling from affecting the graph card */
.ul-card-grid > .ul-feature-card[data-ul-action="graph"],
.ul-card-grid > .ul-feature-card[data-ul-action="graph"] * {
  clip-path: none !important;
  aspect-ratio: auto !important;
}

.ul-card-grid > .ul-feature-card[data-ul-action="graph"] {
  border-radius: 28px !important;
  overflow: visible !important;
}

/* Keep the decorative graph elements small, not card-shaping */
.ul-feature-card .ul-legend,
.ul-feature-card .ul-mini-graph,
.ul-feature-card .ul-heatmap,
.ul-feature-card .ul-article-preview,
.ul-feature-card .ul-timeline-mini,
.ul-feature-card .ul-compare-mini {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  margin: 12px 0 !important;
  flex-shrink: 0 !important;
}

/* Fix Ratification mini graph visibility */
.ul-feature-card .ul-heatmap {
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

.ul-feature-card .ul-heatmap span {
  display: inline-block !important;
  width: 13px !important;
  min-width: 13px !important;
  border-radius: 6px 6px 0 0 !important;
  flex-shrink: 0 !important;
}

/* Keep card action at bottom without burying content */
.ul-feature-card .ul-card-action {
  margin-top: auto !important;
  position: static !important;
  flex-shrink: 0 !important;
}

/* Reduce excessive empty vertical stretching */
.ul-feature-card p {
  flex: 0 0 auto !important;
}

.ul-feature-card h3,
.ul-feature-card .ul-card-visual {
  flex-shrink: 0 !important;
}

/* Make bottom row visually balanced */
.ul-card-grid > .ul-feature-card:nth-child(n+4) {
  min-height: 320px !important;
}

/* Relationship/evidence sections should use three balanced columns */
#unionLawGraphEvidence .ul-treaty-zones {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

/* Responsive behaviour */
@media (max-width: 1100px) {
  .ul-card-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }

  #unionLawGraphEvidence .ul-treaty-zones {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .ul-card-grid {
    grid-template-columns: 1fr !important;
  }

  .ul-card-grid > .ul-feature-card {
    min-height: auto !important;
  }
}

/* =========================================================
   UNION LAWS FINAL DEFECT CORRECTION
   Applies only to Union Laws homepage and graph sections.
   ========================================================= */

/* 1. Keep all six homepage cards in a clean 3-by-2 grid */
.ul-home .ul-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Preserve rectangular card design */
.ul-home .ul-feature-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 370px !important;
  height: auto !important;
  border-radius: 28px !important;
  overflow: visible !important;
  background: #ffffff !important;
  color: #1a2b3c !important;
  clip-path: none !important;
  aspect-ratio: auto !important;
}

/* 2. Stop Union Law Intelligence Graph card changing colour on hover */
.ul-home .ul-feature-card[data-ul-action="graph"],
.ul-home .ul-feature-card[data-ul-action="graph"]:hover,
.ul-home .ul-feature-card[data-ul-action="graph"]:focus,
.ul-home .ul-feature-card[data-ul-action="graph"]:active {
  background: #ffffff !important;
  color: #1a2b3c !important;
  border-color: #edf1f7 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.03) !important;
  transform: translateY(-4px) !important;
}

.ul-home .ul-feature-card[data-ul-action="graph"] h3,
.ul-home .ul-feature-card[data-ul-action="graph"] p,
.ul-home .ul-feature-card[data-ul-action="graph"] span,
.ul-home .ul-feature-card[data-ul-action="graph"] strong,
.ul-home .ul-feature-card[data-ul-action="graph"]:hover h3,
.ul-home .ul-feature-card[data-ul-action="graph"]:hover p,
.ul-home .ul-feature-card[data-ul-action="graph"]:hover span,
.ul-home .ul-feature-card[data-ul-action="graph"]:hover strong {
  color: inherit !important;
}

/* Restore normal hover behaviour for all cards without dark fill */
.ul-home .ul-feature-card:hover {
  background: #ffffff !important;
  color: #1a2b3c !important;
  border-color: #cdd9e6 !important;
  box-shadow: 0 24px 38px rgba(0,32,64,0.08) !important;
}

/* 3. Fix Ratification mini graph so it is never half-buried */
.ul-home .ul-feature-card[data-ul-action="ratification"] {
  overflow: visible !important;
}

.ul-home .ul-feature-card[data-ul-action="ratification"] .ul-heatmap {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  height: 76px !important;
  min-height: 76px !important;
  max-height: none !important;

  width: 100% !important;
  margin: 22px 0 18px 0 !important;
  padding: 18px 16px 10px 16px !important;

  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  background: #f2f5f9 !important;
}

.ul-home .ul-feature-card[data-ul-action="ratification"] .ul-heatmap span {
  display: block !important;
  position: static !important;
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  border-radius: 7px 7px 0 0 !important;
  flex: 0 0 15px !important;
}

/* Keep card action below visible graph */
.ul-home .ul-feature-card .ul-card-action {
  margin-top: auto !important;
  position: static !important;
  z-index: 2 !important;
}

/* 4. Graph canvas nodes should be horizontal, not one vertical stack */
.ul-graph-canvas {
  overflow: visible !important;
}

.ul-graph-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.ul-graph-node {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 105px !important;
}

/* 5. Relationship Evidence: balanced, compact, symmetrical 3-column layout */
#unionLawGraphEvidence .ul-treaty-zones {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

#unionLawGraphEvidence .ul-treaty-zone {
  min-height: auto !important;
  height: auto !important;
  align-self: start !important;
  overflow: visible !important;
}

#unionLawGraphEvidence .result,
#unionLawGraphEvidence .empty {
  margin: 10px 0 !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
  border: 1px solid #dbe5ef !important;
}

#unionLawGraphEvidence .result p,
#unionLawGraphEvidence .empty {
  margin-bottom: 6px !important;
}

/* Reduce blank-looking space when a column has little content */
#unionLawGraphEvidence .ul-treaty-zone:has(.empty) {
  background: #fbfdff !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .ul-home .ul-card-grid,
  .ul-graph-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }

  #unionLawGraphEvidence .ul-treaty-zones {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .ul-home .ul-card-grid,
  .ul-graph-grid {
    grid-template-columns: 1fr !important;
  }

  .ul-home .ul-feature-card {
    min-height: auto !important;
  }
}

/* Union Laws graph evidence rows */

.ul-evidence-list {
  display: grid;
  gap: 18px;
}

.ul-evidence-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
}

.ul-evidence-cell {
  background: #f8fbff;
  border: 1px solid #dbe5ef;
  border-radius: 18px;
  padding: 16px;
  min-height: 170px;
}

.ul-evidence-cell h3 {
  margin: 0 0 12px;
  color: #0b2b4f;
  font-size: 17px;
}

.ul-evidence-cell p {
  margin: 8px 0;
}

.compact-empty {
  padding: 12px !important;
  margin: 0 !important;
  background: #fbfdff !important;
  border: 1px dashed #cbd5e1 !important;
}

@media (max-width: 1000px) {
  .ul-evidence-row {
    grid-template-columns: 1fr;
  }
}

/* UNION LAWS AFRICA TREATY INTELLIGENCE MAP */

.ul-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.ul-country-card {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
  transition: all .2s ease;
}

.ul-country-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 32px rgba(0,32,64,0.08);
  border-color: #cdd9e6;
}

.ul-country-card h3 {
  margin: 0 0 14px;
  color: #0b2b4f;
}

.ul-country-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.ul-country-stats div {
  background: #f8fbff;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}

.ul-country-stats strong {
  display: block;
  color: #0b2b4f;
  font-size: 20px;
}

.ul-country-stats span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

/* MODULE 12 RELATIONSHIP FAMILIES GRID FIX */
.ul-relationship-family-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-top: 20px !important;
  width: 100% !important;
}

.ul-relationship-family-card {
  background: #fff !important;
  border: 1px solid #dbe5ef !important;
  border-radius: 20px !important;
  padding: 18px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.03) !important;
}

.ul-relationship-family-card h3 {
  margin: 8px 0 !important;
}

@media (max-width: 1100px) {
  .ul-relationship-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .ul-relationship-family-grid {
    grid-template-columns: 1fr !important;
  }
}

/* MODULE 14: Treaty Intelligence Explorer */

.ul-explorer-select {
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  background: #fff;
  color: #0b2b4f;
  min-width: 260px;
  font-weight: 600;
}

.ul-explorer-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
  margin: 22px 0;
}

.ul-explorer-card {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
  min-height: 210px;
}

.ul-explorer-card h3 {
  color: #0b2b4f;
  margin: 0 0 14px;
}

.compact-result {
  padding: 10px !important;
  margin: 8px 0 !important;
  border-radius: 12px !important;
}

@media (max-width: 1100px) {
  .ul-explorer-row {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  .ul-explorer-row {
    grid-template-columns: 1fr;
  }

  .ul-explorer-select {
    width: 100%;
  }
}

/* MODULE 17: Interactive Africa Ratification Map */

.ul-map-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  margin: 24px 0;
}

.ul-map-panel,
.ul-country-drawer {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
}

.ul-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 18px;
}

.ul-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 13px;
}

.ul-map-legend i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.ul-map-legend .ratified { background: #166534; }
.ul-map-legend .signed { background: #86efac; }
.ul-map-legend .no-action { background: #cbd5e1; }
.ul-map-legend .reservation { background: #dc2626; }

.ul-africa-card-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
}

.ul-country-map-tile {
  border: 1px solid #dbe5ef;
  border-radius: 16px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  min-height: 74px;
  transition: all .2s ease;
}

.ul-country-map-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,32,64,0.08);
}

.ul-country-map-tile strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.ul-country-map-tile span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ul-country-map-tile.ratified {
  background: #ecfdf5;
  border-color: #166534;
  color: #14532d;
}

.ul-country-map-tile.signed {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.ul-country-map-tile.no-action {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.ul-country-map-tile.has-reservation {
  box-shadow: inset 0 0 0 3px rgba(220,38,38,.18);
}

@media (max-width: 1000px) {
  .ul-map-layout {
    grid-template-columns: 1fr;
  }
}

/* MODULE 20C: Legal Intelligence Search Console */

.ul-search-console {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 24px;
  padding: 20px;
  margin: 22px 0;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
}

.ul-search-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.ul-search-main input {
  width: 100%;
  border: 1px solid #dbe5ef;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 16px;
}

.ul-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ul-search-suggestions button {
  border: 1px solid #dbe5ef;
  background: #f8fbff;
  color: #0b2b4f;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

.ul-search-suggestions button:hover {
  background: #eef6ff;
}

.legal-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .ul-search-main {
    grid-template-columns: 1fr;
  }
}

/* MODULE 20D: Relationship-Aware Recommendations */

.legal-recommendation-panel {
  border-color: #bcd7f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.ul-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.ul-recommendation-card {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 18px;
  padding: 14px;
  min-height: 180px;
}

.ul-recommendation-card h3 {
  margin: 0 0 10px;
  color: #0b2b4f;
}

@media (max-width: 1100px) {
  .ul-recommendation-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  .ul-recommendation-grid {
    grid-template-columns: 1fr;
  }
}

/* MODULE 22A: Search Keyword Highlighting */
.legal-search-highlight {
  background: #fff3b0;
  color: #0b2b4f;
  padding: 1px 4px;
  border-radius: 5px;
  font-weight: 800;
}

/* Decision search match note */
.decision-match-note {
  background: #fffdf0;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
}

/* MODULE 22: Continental Legal Heatmaps */

.ul-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.ul-heatmap-cell {
  border: 1px solid #dbe5ef;
  border-radius: 18px;
  padding: 14px;
  background: #f8fafc;
  box-shadow: 0 8px 18px rgba(0,0,0,0.03);
}

.ul-heatmap-cell h3 {
  margin: 0 0 6px;
  color: #0b2b4f;
}

.ul-heatmap-cell p {
  margin: 0 0 10px;
  font-size: 13px;
  color: #64748b;
}

.ul-heatmap-cell.none {
  background: #f8fafc;
}

.ul-heatmap-cell.low {
  background: #ecfdf5;
  border-color: #86efac;
}

.ul-heatmap-cell.medium {
  background: #dcfce7;
  border-color: #22c55e;
}

.ul-heatmap-cell.high {
  background: #bbf7d0;
  border-color: #166534;
}

/* MODULE 23A: Legal Intelligence Assistant */

.legal-assistant-answer {
  border-color: #bcd7f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.legal-assistant-answer h2 {
  color: #0b2b4f;
}

/* MODULE 25A.2: Legal Knowledge Graph Explorer */

.kg-root-card {
  background: linear-gradient(135deg, #0b2b4f 0%, #123f70 100%);
  color: #ffffff;
  border-radius: 28px;
  padding: 26px;
  margin: 22px 0;
  box-shadow: 0 18px 34px rgba(11,43,79,0.18);
}

.kg-root-card h2 {
  color: #ffffff;
  margin: 12px 0 8px;
  font-size: 30px;
}

.kg-root-card p {
  color: #e8f2ff;
}

.kg-row {
  display: grid;
  gap: 18px;
  margin: 22px 0;
}

.kg-row.two {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.kg-row.four {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.kg-bucket-card {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 24px;
  padding: 18px;
  min-height: 220px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
}

.kg-bucket-card h3 {
  margin: 0 0 14px;
  color: #0b2b4f;
}

.kg-node {
  border: 1px solid #dbe5ef;
  background: #f8fbff;
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
  transition: all .2s ease;
}

.kg-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,32,64,.08);
}

.kg-node strong {
  display: block;
  color: #0b2b4f;
  margin-bottom: 4px;
}

.kg-node span {
  display: block;
  font-size: 12px;
  color: #64748b;
}

.kg-evidence-row {
  border-left: 4px solid #0b2b4f;
}

@media (max-width: 1100px) {
  .kg-row.four {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .kg-row.two,
  .kg-row.four {
    grid-template-columns: 1fr;
  }
}

/* MODULE 25A.3: Knowledge Graph Node Navigation */
.kg-node {
  cursor: pointer;
}

.kg-node::after {
  content: "Open";
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #0b2b4f;
  background: #eaf4ff;
  padding: 4px 8px;
  border-radius: 999px;
}

/* MODULE 25B.3: Workspace save buttons */
.kg-save-btn {
  margin-top: 10px;
  width: 100%;
  font-size: 12px;
  padding: 7px 10px;
}

/* MODULE 25B.4: Citation Builder */
.citation-block {
  white-space: pre-wrap;
  background: #f8fafc;
  border: 1px solid #dbe5ef;
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
  color: #0b2b4f;
  font-size: 14px;
  line-height: 1.6;
}

/* MODULE 25C.4: AU Legal Ontology Navigator */

.ontology-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.ontology-domain-card {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.03);
}

.ontology-domain-card h2 {
  color: #0b2b4f;
  margin: 10px 0;
  font-size: 22px;
}

.ontology-concept-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.ontology-concept-btn {
  text-align: left;
  border: 1px solid #dbe5ef;
  background: #f8fbff;
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  transition: all .2s ease;
}

.ontology-concept-btn:hover {
  background: #eaf4ff;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,32,64,.06);
}

.ontology-concept-btn strong {
  display: block;
  color: #0b2b4f;
  margin-bottom: 4px;
}

.ontology-concept-btn span {
  display: block;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.ontology-result-row {
  border-left: 4px solid #0b2b4f;
}

@media (max-width: 860px) {
  .ontology-domain-grid {
    grid-template-columns: 1fr;
  }
}

/* MODULE 25C.6: Embedded Recommendation Panels */

.embedded-recommendation-panel {
  border-color: #bcd7f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.embedded-recommendation-panel h2 {
  color: #0b2b4f;
}

/* MODULE 25C.7: Clickable Recommendations */
.clickable-rec {
  cursor: pointer;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  padding: 10px;
  transition: all .2s ease;
}

.clickable-rec:hover {
  background: #eaf4ff;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,32,64,.06);
}

.clickable-rec::after {
  content: "Open";
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #0b2b4f;
  background: #ffffff;
  border: 1px solid #dbe5ef;
  padding: 4px 8px;
  border-radius: 999px;
}

/* MODULE 25C.9.1: Editorial Admin */

.admin-label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-weight: 800;
  color: #0b2b4f;
}

.admin-textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  color: #0b2b4f;
  background: #ffffff;
}

.admin-input {
  width: 100%;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  color: #0b2b4f;
  background: #ffffff;
}

/* FINAL CONSOLIDATION: Clean Union Laws action bar */

.clean-union-law-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.clean-union-law-actions button {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .clean-union-law-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.safe-union-laws-layout {
  margin: 22px 0;
  display: grid;
  gap: 16px;
}

.safe-union-laws-group {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 18px;
  padding: 14px;
}

.safe-union-laws-group h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #0b2b4f;
}

.safe-union-laws-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.safe-union-laws-button-row button {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .safe-union-laws-button-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* FINAL: Union Laws two dark-blue rows */

.union-laws-two-blue-rows {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.union-laws-blue-row {
  background: #082f63;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.union-laws-blue-row button {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  margin: 0 !important;
  font-weight: 700;
}

.union-laws-blue-row button:hover {
  background: rgba(255,255,255,0.16) !important;
}

@media (max-width: 760px) {
  .union-laws-blue-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* FINAL FIX: Compact two-row Union Laws tabs */

#unionLawsFinalTwoRows {
  margin: 16px 0 18px;
  display: grid;
  gap: 8px;
}

.union-laws-final-row {
  background: #082f63;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.union-laws-final-row button {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 7px !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  min-height: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

.union-laws-final-row button:hover {
  background: rgba(255,255,255,0.16) !important;
}

@media (max-width: 760px) {
  .union-laws-final-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

#unionLawsStableTabs {
  margin: 14px 0 18px;
  display: grid;
  gap: 8px;
}

.union-laws-stable-row {
  background: #082f63;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.union-laws-stable-tab {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 7px !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

.union-laws-stable-tab:hover {
  background: rgba(255,255,255,0.16) !important;
}

@media (max-width: 760px) {
  .union-laws-stable-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Hide old Union Laws hero tabs. Keep final two blue rows visible. */
.ul-hero > button,
.ul-hero .secondary,
.ul-hero .primary {
  display: none !important;
}

#unionLawsStableTabs,
#unionLawsStableTabs button {
  display: flex !important;
}

#unionLawsStableTabs {
  display: grid !important;
}

#backToUnionLawsBtn,
.back-to-union-laws-btn {
  display: inline-block !important;
  margin-top: 14px !important;
  background: #082f63 !important;
  color: #ffffff !important;
  border: 1px solid #082f63 !important;
  border-radius: 8px !important;
  padding: 9px 13px !important;
  font-weight: 800 !important;
}

/* QC FIX: country heatmap full grid */

.all-country-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.country-coverage-card {
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  background: #f8fbff;
  padding: 12px;
}

.country-coverage-card strong {
  display: block;
  color: #082f63;
  font-size: 14px;
  margin-bottom: 5px;
}

.country-coverage-card span {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .all-country-heatmap-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .all-country-heatmap-grid {
    grid-template-columns: 1fr;
  }
}

/* ROLE-BASED GUIDANCE */

.role-guidance-panel {
  margin: 16px 0 18px;
  border: 1px solid #dbe5ef;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.role-guidance-header {
  background: #082f63;
  color: #ffffff;
  padding: 14px 16px;
}

.role-guidance-header h2 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 20px;
}

.role-guidance-header p {
  margin: 0;
  color: #eaf4ff;
  font-size: 14px;
}

.role-guidance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px;
}

.role-guidance-card {
  text-align: left;
  background: #f8fbff !important;
  color: #082f63 !important;
  border: 1px solid #dbe5ef !important;
  border-radius: 12px !important;
  padding: 12px !important;
  cursor: pointer;
}

.role-guidance-card strong {
  display: block;
  margin-bottom: 5px;
}

.role-guidance-card span {
  display: block;
  font-size: 12px;
  color: #64748b;
}

.role-guidance-card:hover {
  background: #eaf4ff !important;
}

@media (max-width: 1100px) {
  .role-guidance-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .role-guidance-grid {
    grid-template-columns: 1fr;
  }
}

/* Compare Laws and Advanced Research */

.compare-law-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.compare-summary-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
}

.compare-pill {
  display: inline-block;
  background: #eaf4ff;
  color: #082f63;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  padding: 7px 10px;
  margin: 4px;
  font-weight: 700;
  font-size: 13px;
}

.compare-table-wrap {
  overflow-x: auto;
}

.compare-laws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare-laws-table th {
  background: #082f63;
  color: #ffffff;
  text-align: left;
  padding: 10px;
  border: 1px solid #dbe5ef;
}

.compare-laws-table td {
  vertical-align: top;
  padding: 10px;
  border: 1px solid #dbe5ef;
}

.compare-laws-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.advanced-research-cards {
  margin: 14px 0 18px;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.advanced-research-strip {
  background: #082f63;
  color: #ffffff;
  font-weight: 800;
  padding: 10px 14px;
}

.advanced-research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
  padding: 14px;
}

.advanced-research-card {
  text-align: left;
  background: #f8fbff !important;
  color: #082f63 !important;
  border: 1px solid #dbe5ef !important;
  border-radius: 12px !important;
  padding: 14px !important;
}

.advanced-research-card strong {
  display: block;
  margin-bottom: 5px;
}

.advanced-research-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 900px) {
  .compare-law-select-grid,
  .compare-summary-grid,
  .advanced-research-grid {
    grid-template-columns: 1fr;
  }
}

/* How This Law Was Made */

.drafting-history-item {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  position: relative;
}

.drafting-history-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #082f63;
  flex-shrink: 0;
  margin-top: 6px;
}

.drafting-history-content {
  flex: 1;
  border-left: 2px solid #dbe5ef;
  padding-left: 16px;
}

.drafting-history-date {
  font-weight: 700;
  color: #082f63;
  margin-bottom: 4px;
}

.drafting-history-content h3 {
  margin: 0 0 6px;
}

.drafting-history-content p {
  margin: 6px 0;
}


/* FIX: Continental heatmap colour scale aliases
   Ensures 0–19, 20–39, 40–59, 60–79 and 80–100% classes render visibly. */

.ratification-centre-page .rat-centre-heat-none,
.ratification-centre-page .rat-heat-none,
.continental-heatmap-page .heat-none {
  background: #f1f5f9 !important;
}

.ratification-centre-page .rat-centre-heat-very-low,
.ratification-centre-page .rat-heat-very-low,
.continental-heatmap-page .heat-very-low {
  background: #fecaca !important;
}

.ratification-centre-page .rat-centre-heat-low,
.ratification-centre-page .rat-heat-low,
.continental-heatmap-page .heat-low {
  background: #fed7aa !important;
}

.ratification-centre-page .rat-centre-heat-medium,
.ratification-centre-page .rat-heat-medium,
.continental-heatmap-page .heat-medium {
  background: #fde68a !important;
}

.ratification-centre-page .rat-centre-heat-high,
.ratification-centre-page .rat-heat-high,
.continental-heatmap-page .heat-high {
  background: #bbf7d0 !important;
}

.ratification-centre-page .rat-centre-heat-very-high,
.ratification-centre-page .rat-heat-very-high,
.continental-heatmap-page .heat-very-high {
  background: #22c55e !important;
}

.ratification-centre-page .rat-centre-heat-very-high h3,
.ratification-centre-page .rat-heat-very-high h3,
.continental-heatmap-page .heat-very-high h3,
.ratification-centre-page .rat-centre-heat-very-high .meta,
.ratification-centre-page .rat-heat-very-high .meta,
.continental-heatmap-page .heat-very-high .meta {
  color: #052e16 !important;
}


/* PROTOCOL PATCH: Treaty Texts by Language launcher only */
/* Unique prefix: ttbl. No header, top-navigation, or Union Laws tab-row layout rules. */

#ttblRightLauncher.ttbl-right-launcher {
  position: fixed !important;
  right: 24px !important;
  top: clamp(250px, 38vh, 420px) !important;
  z-index: 99999 !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  width: 290px !important;
  min-height: 64px !important;
  padding: 12px 14px !important;

  border: 1px solid rgba(125, 211, 252, .30) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .97), rgba(30, 64, 175, .95)) !important;
  color: #ffffff !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .18) !important;

  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
}

#ttblRightLauncher.ttbl-right-launcher:hover {
  right: 28px !important;
}

.ttbl-launcher-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .14) !important;
  font-size: 20px !important;
}

.ttbl-launcher-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.ttbl-launcher-copy strong {
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}

.ttbl-launcher-copy small {
  color: rgba(226, 232, 240, .92) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

.ttbl-launcher-arrow {
  margin-left: auto !important;
  color: #7dd3fc !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.ttbl-page {
  display: grid;
  gap: 18px;
}

.ttbl-hero,
.ttbl-card,
.ttbl-summary-grid > div {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .08);
}

.ttbl-hero {
  padding: 24px;
}

.ttbl-hero h1 {
  margin: 4px 0 8px;
  color: #0f172a;
}

.ttbl-eyebrow {
  margin: 0 0 4px;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: 12px;
}

.ttbl-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ttbl-summary-grid > div {
  padding: 16px;
}

.ttbl-summary-grid strong {
  display: block;
  font-size: 26px;
  color: #0f172a;
}

.ttbl-summary-grid span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.ttbl-card {
  padding: 18px;
}

.ttbl-controls {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1.2fr;
  gap: 14px;
  align-items: end;
}

.ttbl-controls label span {
  display: block;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 7px;
  font-size: 13px;
}

.ttbl-controls select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 12px;
  padding: 8px 10px;
  background: #ffffff;
  color: #0f172a;
}

.ttbl-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ttbl-card-head h3 {
  margin: 0;
  color: #0f172a;
}

.ttbl-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ttbl-actions a,
.ttbl-actions span,
.ttbl-pill,
.ttbl-meta span {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.ttbl-actions a {
  background: #eff6ff;
  color: #1d4ed8;
}

.ttbl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ttbl-long-text {
  white-space: pre-wrap;
  line-height: 1.72;
  color: #111827;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 16px;
  max-height: 520px;
  overflow: auto;
  font-size: 14px;
}

.ttbl-long-text[dir="rtl"],
.ttbl-pill.rtl {
  direction: rtl;
  text-align: right;
}

.ttbl-table-wrap {
  overflow: auto;
}

.ttbl-table {
  width: 100%;
  border-collapse: collapse;
}

.ttbl-table th,
.ttbl-table td {
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  padding: 11px 8px;
  text-align: left;
  vertical-align: top;
}

.ttbl-table th {
  color: #334155;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ttbl-table td small {
  display: block;
  color: #64748b;
  margin-top: 4px;
}

@media (max-width: 900px) {
  #ttblRightLauncher.ttbl-right-launcher {
    top: auto !important;
    right: 14px !important;
    bottom: 18px !important;
    width: auto !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    padding: 10px 13px !important;
  }

  .ttbl-launcher-copy small,
  .ttbl-launcher-arrow {
    display: none !important;
  }

  .ttbl-summary-grid,
  .ttbl-controls {
    grid-template-columns: 1fr;
  }

  .ttbl-card-head {
    flex-direction: column;
  }
}


/* PROTOCOL PATCH: Treaty Texts by Language non-blocking drawer */
/* Does not alter header, tabs, Union Laws layout, Guidance, or Find Related Laws. */

#ttblDrawerShell.ttbl-drawer-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  pointer-events: none !important;
  display: none !important;
}

#ttblDrawerShell.ttbl-drawer-shell.open {
  display: block !important;
}

#ttblDrawerPanel.ttbl-drawer-panel {
  position: absolute !important;
  right: 22px !important;
  top: 22px !important;
  bottom: 22px !important;
  width: min(780px, calc(100vw - 44px)) !important;
  pointer-events: auto !important;
  overflow: auto !important;

  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .30) !important;
  padding: 18px !important;
}

.ttbl-drawer-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  margin-bottom: 14px !important;
}

.ttbl-drawer-head h2 {
  margin: 4px 0 6px !important;
  color: #0f172a !important;
}

.ttbl-drawer-head p {
  margin: 0 !important;
  color: #64748b !important;
}

.ttbl-drawer-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  cursor: pointer !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.ttbl-drawer-mini-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.ttbl-drawer-mini-stats span {
  display: inline-flex !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.ttbl-drawer-controls {
  display: grid !important;
  grid-template-columns: 1.4fr .8fr 1.2fr !important;
  gap: 12px !important;
  align-items: end !important;
  margin-bottom: 14px !important;
}

.ttbl-drawer-controls label span {
  display: block !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
}

.ttbl-drawer-controls select {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

.ttbl-drawer-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .06) !important;
}

.ttbl-drawer-loading {
  padding: 18px !important;
}

@media (max-width: 900px) {
  #ttblDrawerPanel.ttbl-drawer-panel {
    right: 10px !important;
    left: 10px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    border-radius: 18px !important;
  }

  .ttbl-drawer-controls {
    grid-template-columns: 1fr !important;
  }

  .ttbl-drawer-head {
    flex-direction: column !important;
  }

  .ttbl-drawer-close {
    position: absolute !important;
    right: 18px !important;
    top: 18px !important;
  }
}


/* PROTOCOL PATCH: Treaty Texts by Language right-side legal inspector */
/* This patch only styles the inspector and launcher. It does not target header or tabs. */

/* Hide older experimental Treaty Texts UI */
#ttblRightLauncher,
#ttblDrawerShell {
  display: none !important;
}

/* Closed right-edge rail */
#ttblInspectorLauncher.ttbl-inspector-launcher {
  position: fixed !important;
  right: 18px !important;
  top: clamp(250px, 42vh, 430px) !important;
  z-index: 99990 !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 168px !important;
  min-height: 52px !important;
  padding: 10px 12px !important;

  border: 1px solid rgba(125, 211, 252, .32) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .97), rgba(30, 64, 175, .95)) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .28) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
}

body.ttbl-inspector-open #ttblInspectorLauncher {
  display: none !important;
}

#ttblInspectorLauncher:hover {
  right: 22px !important;
}

.ttbl-inspector-launcher-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .14) !important;
}

.ttbl-inspector-launcher-copy {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.ttbl-inspector-launcher-copy strong {
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
}

.ttbl-inspector-launcher-copy small {
  color: rgba(226, 232, 240, .9) !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 650 !important;
}

/* Non-blocking shell */
#ttblInspectorShell.ttbl-inspector-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99989 !important;
  display: none !important;
  pointer-events: none !important;
}

#ttblInspectorShell.ttbl-inspector-shell.open {
  display: block !important;
}

/* Right-side inspector panel */
#ttblInspectorPanel.ttbl-inspector-panel {
  position: absolute !important;
  right: 18px !important;
  top: 150px !important;
  bottom: 18px !important;
  width: min(460px, calc(100vw - 36px)) !important;
  pointer-events: auto !important;

  overflow: auto !important;
  padding: 14px !important;

  background: rgba(255, 255, 255, .98) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .26) !important;
  backdrop-filter: blur(12px) !important;
}

.ttbl-inspector-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}

.ttbl-inspector-head h2 {
  margin: 2px 0 4px !important;
  color: #0f172a !important;
  font-size: 20px !important;
}

.ttbl-inspector-head p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
}

.ttbl-inspector-kicker,
.ttbl-inspector-eyebrow {
  margin: 0 0 4px !important;
  color: #2563eb !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 850 !important;
  font-size: 10.5px !important;
}

.ttbl-inspector-head-actions {
  display: flex !important;
  gap: 6px !important;
}

.ttbl-inspector-head-actions button {
  display: inline-grid !important;
  place-items: center !important;
  width: 31px !important;
  height: 31px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.ttbl-inspector-controls {
  display: grid !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.ttbl-inspector-two-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.ttbl-inspector-controls label span {
  display: block !important;
  margin-bottom: 5px !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.ttbl-inspector-controls select {
  width: 100% !important;
  min-height: 38px !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 11px !important;
  padding: 7px 9px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 12px !important;
}

.ttbl-inspector-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.ttbl-inspector-tabs button {
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.ttbl-inspector-tabs button.active {
  background: #1e3a8a !important;
  color: #ffffff !important;
  border-color: #1e3a8a !important;
}

.ttbl-inspector-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 16px !important;
  padding: 13px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

.ttbl-inspector-card + .ttbl-inspector-card {
  margin-top: 10px !important;
}

.ttbl-inspector-card-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}

.ttbl-inspector-card h3 {
  margin: 0 !important;
  font-size: 16px !important;
  color: #0f172a !important;
}

.ttbl-inspector-card h4 {
  margin: 8px 0 !important;
  color: #334155 !important;
  font-size: 13px !important;
}

.ttbl-inspector-mini-link,
.ttbl-inspector-source-list a,
.ttbl-inspector-source-list span,
.ttbl-inspector-meta span,
.ttbl-inspector-mini-stats span {
  display: inline-flex !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.ttbl-inspector-mini-link,
.ttbl-inspector-source-list a {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.ttbl-inspector-meta,
.ttbl-inspector-source-list,
.ttbl-inspector-mini-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.ttbl-inspector-text {
  white-space: pre-wrap !important;
  line-height: 1.62 !important;
  color: #111827 !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 13px !important;
  padding: 12px !important;
  max-height: 410px !important;
  overflow: auto !important;
  font-size: 12.5px !important;
}

.ttbl-inspector-text[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
}

.ttbl-inspector-coverage-list {
  display: grid !important;
  gap: 8px !important;
}

.ttbl-inspector-coverage-list div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .07) !important;
}

.ttbl-inspector-loading {
  padding: 16px !important;
}

@media (max-width: 900px) {
  #ttblInspectorLauncher.ttbl-inspector-launcher {
    top: auto !important;
    right: 14px !important;
    bottom: 18px !important;
    width: auto !important;
    min-height: 0 !important;
    border-radius: 999px !important;
  }

  .ttbl-inspector-launcher-copy small {
    display: none !important;
  }

  #ttblInspectorPanel.ttbl-inspector-panel {
    top: 76px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
  }
}

/* PROTOCOL PATCH: Align flagship Union Law card buttons
   Scope: only cards below Flagship Union Laws / Lois phares de l’Union.
   No tab rows, no routing, no translation, no backend changes. */
#ulAtlas .ul-law-grid {
  align-items: stretch;
}

#ulAtlas .ul-law-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#ulAtlas .ul-law-card button[data-open-union-law] {
  margin-top: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* PROTOCOL PATCH: Union Law detail official treaty texts panel
   Scope: only the official texts panel inside Union Law detail pages. */
.union-law-official-texts-panel {
  margin-bottom: 1rem;
}

.union-law-official-text-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .75rem;
}

.union-law-official-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-decoration: none;
}

/* PROTOCOL PATCH: Court & Treaty Body Decisions Intelligence Console */
.court-decisions-console{padding:1.25rem}
.court-hero,.court-stat-grid article,.court-search-panel,.court-filter-rail,.court-card-grid article,.court-panel{background:rgba(255,255,255,.94);border:1px solid rgba(15,23,42,.08);border-radius:1rem;padding:1rem}
.court-hero{margin-bottom:1rem}
.court-stat-grid,.court-card-grid,.court-architecture-grid,.court-dossier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:1rem 0}
.court-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.court-stat-grid strong{display:block;font-size:1.6rem}
.court-search-panel input,.court-filter-rail select{width:100%;border-radius:.75rem;border:1px solid rgba(15,23,42,.15);padding:.75rem}
.court-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:1rem}
.court-filter-rail label{display:block;margin-bottom:.75rem;font-weight:700}
.court-warning{border-radius:.85rem;background:rgba(255,248,225,.9);border:1px solid rgba(202,138,4,.22);padding:.85rem;margin-bottom:1rem}
.court-card-grid article{display:flex;flex-direction:column;gap:.6rem}
.court-card-grid button{margin-top:auto}
.court-architecture-grid,.court-dossier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.court-architecture-grid div,.court-intel-list div{border-radius:.75rem;padding:.75rem;background:rgba(15,23,42,.035)}
.court-architecture-grid strong,.court-architecture-grid span,.court-intel-list strong,.court-intel-list span{display:block}
.court-dossier-table{width:100%;border-collapse:collapse}
.court-dossier-table th,.court-dossier-table td{text-align:left;vertical-align:top;padding:.65rem;border-bottom:1px solid rgba(15,23,42,.08)}
.court-dossier-table th{width:34%}
@media(max-width:980px){.court-stat-grid,.court-card-grid,.court-architecture-grid,.court-dossier-grid,.court-layout{grid-template-columns:1fr}}


/* STAGE6D_B_ACCESSIBLE_FONT_STANDARD_ACTIVE
   Public typography is standardized for accessibility and multilingual use.
   Code-like contexts remain separately available through --au-font-code.
*/
html,
body,
button,
input,
select,
textarea,
table,
.card,
.panel,
.modal,
.swal2-popup {
  font-family: var(--au-font-ui) !important;
}

html[lang="ar"],
html[dir="rtl"],
[lang="ar"],
[dir="rtl"] {
  font-family: var(--au-font-arabic) !important;
}

pre,
code,
kbd,
samp {
  font-family: var(--au-font-code) !important;
}


/* STAGE6F_HOME_HEADER_FINAL_IDENTITY_FIX_ACTIVE
   Final public homepage identity treatment:
   - removes old technical portal label from visible header
   - separates UMUGANDA from the explanatory tagline
   - protects logo size from shrinking under long text
*/
.umuganda-header-title {
  display: block;
  font-family: var(--au-font-ui, inherit);
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.umuganda-header-tagline {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--au-font-ui, inherit);
  font-size: clamp(0.92rem, 1.35vw, 1.12rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.005em;
  max-width: 760px;
}

header img[src*="logo"],
.site-header img[src*="logo"],
.home-header img[src*="logo"],
.brand img[src*="logo"],
.logo img,
.logo-mark img,
.header-logo img,
.au-logo img,
img.au-logo,
img.logo {
  height: auto !important;
  min-height: 72px;
  width: auto !important;
  max-width: 132px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .umuganda-header-title {
    font-size: clamp(2rem, 12vw, 3rem);
    letter-spacing: 0.04em;
  }

  .umuganda-header-tagline {
    font-size: 0.92rem;
    max-width: 100%;
  }

  header img[src*="logo"],
  .site-header img[src*="logo"],
  .home-header img[src*="logo"],
  .brand img[src*="logo"],
  .logo img,
  .logo-mark img,
  .header-logo img,
  .au-logo img,
  img.au-logo,
  img.logo {
    min-height: 64px;
    max-width: 116px;
  }
}


/* STAGE6G_HOME_VISITOR_COUNTER_STYLE_ACTIVE
   Modern UMUGANDA homepage visitor counter.
*/
.umuganda-visit-counter {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 0.9rem;
  margin: 1.35rem 0 0;
  max-width: 820px;
}

.umuganda-counter-card {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 1.15rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.075)),
    rgba(10, 42, 32, 0.22);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.umuganda-counter-card::before {
  content: "";
  position: absolute;
  inset: -45% -20% auto auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(214, 169, 72, 0.28);
  pointer-events: none;
}

.umuganda-counter-kicker {
  display: block;
  margin-bottom: 0.38rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
}

.umuganda-counter-card strong {
  display: block;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

.umuganda-counter-card span:last-child {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  line-height: 1.25;
  opacity: 0.86;
}

.umuganda-counter-local-mode::after {
  content: "Local preview mode";
  display: block;
  grid-column: 1 / -1;
  margin-top: -0.35rem;
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.7;
}

@media (max-width: 780px) {
  .umuganda-visit-counter {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .umuganda-counter-card {
    padding: 0.95rem;
  }
}

/* ── RTL layout for Arabic (body.rtl, :root[lang=ar] body set by setLanguage()) ─────────────── */
body.rtl, :root[lang=ar] body {
  direction: rtl;
  text-align: right;
}
body.rtl, :root[lang=ar] body header,
body.rtl, :root[lang=ar] body .header-nav,
body.rtl, :root[lang=ar] body .nav-row {
  flex-direction: row-reverse;
}
body.rtl, :root[lang=ar] body .filters,
body.rtl, :root[lang=ar] body .result,
body.rtl, :root[lang=ar] body .card,
body.rtl, :root[lang=ar] body .meta,
body.rtl, :root[lang=ar] body .small,
body.rtl, :root[lang=ar] body p,
body.rtl, :root[lang=ar] body h1, body.rtl, :root[lang=ar] body h2, body.rtl, :root[lang=ar] body h3 {
  text-align: right;
}
body.rtl, :root[lang=ar] body .ul-treaty-header {
  flex-direction: row-reverse;
}
body.rtl, :root[lang=ar] body .ul-zone-list > div {
  flex-direction: row-reverse;
}
body.rtl, :root[lang=ar] body .ul-chips {
  flex-direction: row-reverse;
}
body.rtl, :root[lang=ar] body .ul-search {
  flex-direction: row-reverse;
}
body.rtl, :root[lang=ar] body table {
  direction: rtl;
}
body.rtl, :root[lang=ar] body th,
body.rtl, :root[lang=ar] body td {
  text-align: right;
}
body.rtl, :root[lang=ar] body input,
body.rtl, :root[lang=ar] body select,
body.rtl, :root[lang=ar] body textarea {
  text-align: right;
  direction: rtl;
}
body.rtl, :root[lang=ar] body .language-switcher {
  direction: ltr; /* always LTR so options are readable */
}
body.rtl, :root[lang=ar] body .badge {
  direction: rtl;
}
body.rtl, :root[lang=ar] body .grid {
  direction: rtl;
}
body.rtl, :root[lang=ar] body .sidebar {
  right: 0;
  left: auto;
}
body.rtl, :root[lang=ar] body .result .badge + .badge {
  margin-right: 0;
  margin-left: 4px;
}

/* ── Translation disclaimer component ────────────────────────────────────── */
.translation-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  border-radius: var(--radius, 8px);
  background: #fffbeb;
  border: 1px solid #f0d060;
  font-size: .85rem;
  line-height: 1.5;
  color: #7a5c00;
}
.translation-disclaimer .td-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.translation-disclaimer .td-text { flex: 1; }
.translation-disclaimer .td-text strong { color: #5a4300; }
.translation-disclaimer.td-official {
  background: #f0f9f0;
  border-color: #a8d8a8;
  color: #2a5a2a;
}
.translation-disclaimer.td-official .td-text strong { color: #1a4a1a; }
[lang=ar] .translation-disclaimer,
body.rtl, :root[lang=ar] body .translation-disclaimer {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── Unified Find view ───────────────────────────────────────────────────── */
.find-hero {
  text-align: center;
  padding: 36px 0 24px;
}
.find-hero h2 {
  font-size: 1.9rem;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.find-hero p {
  color: var(--muted);
  margin: 0 auto;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.55;
}

.find-bar-wrap {
  position: relative;
  max-width: 680px;
  margin: 24px auto 0;
}
.find-bar {
  width: 100%;
  font-size: 1.08rem;
  padding: 16px 56px 16px 20px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  background: var(--paper);
  font-family: var(--body);
  transition: border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.find-bar:focus {
  outline: none;
  border-color: var(--au-green);
  box-shadow: 0 0 0 4px rgba(0,65,129,.1), 0 2px 12px rgba(0,0,0,.06);
}
.find-bar-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 1.2rem;
}

/* Mode cards */
.find-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 28px auto 0;
}
.find-mode-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease, background .18s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.find-mode-card:hover {
  border-color: var(--au-green);
  box-shadow: 0 4px 18px rgba(0,65,129,.1);
  transform: translateY(-2px);
}
.find-mode-card.active {
  border-color: var(--au-green);
  background: linear-gradient(135deg, rgba(0,65,129,.04) 0%, rgba(0,176,185,.04) 100%);
  box-shadow: 0 4px 20px rgba(0,65,129,.13);
}
.find-mode-card.active::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--au-green), var(--brand-cyan));
  border-radius: 14px 14px 0 0;
}
.find-mode-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 2px;
}
.find-mode-label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.2;
}
.find-mode-desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.45;
}
.find-mode-card.active .find-mode-label {
  color: var(--au-green);
}

/* Browse facets row */
.find-browse-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 900px;
  margin: 20px auto 0;
  padding: 16px 20px;
  background: var(--paper-2, #f7f8fa);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.find-browse-label {
  font-size: .8rem;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-right: 4px;
  white-space: nowrap;
}
.find-browse-chip {
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--paper);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: var(--body);
  color: var(--text);
}
.find-browse-chip:hover {
  background: var(--au-green);
  border-color: var(--au-green);
  color: #fff;
}

/* Inline mode panels */
.find-panel {
  display: none;
  margin-top: 24px;
  animation: fadeUp .2s ease both;
}
.find-panel.active {
  display: block;
}
.find-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.find-panel-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.find-panel-back {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .82rem;
  cursor: pointer;
  color: var(--muted);
  transition: color .15s, border-color .15s;
}
.find-panel-back:hover { color: var(--au-green); border-color: var(--au-green); }

@media (max-width: 600px) {
  .find-modes { grid-template-columns: 1fr 1fr; }
  .find-hero h2 { font-size: 1.4rem; }
  .find-bar { font-size: .95rem; padding: 13px 46px 13px 14px; }
}

/* ── Dedicated browse panels ─────────────────────────────────────────────── */
.browse-dedicated-host { padding: 4px 0 24px; }

/* Organ cards */
.browse-organ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.browse-organ-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 22px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  text-align: left;
}
.browse-organ-card:hover {
  border-color: var(--au-green);
  box-shadow: 0 6px 24px rgba(0,65,129,.12);
  transform: translateY(-3px);
}
.browse-organ-icon { font-size: 2.2rem; line-height: 1; }
.browse-organ-name { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.browse-organ-desc { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.browse-organ-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600;
  color: var(--au-green);
  background: rgba(0,65,129,.07);
  padding: 4px 10px; border-radius: 20px;
  align-self: flex-start; margin-top: 4px;
}
.browse-organ-cta {
  margin-top: auto; padding-top: 14px;
  font-size: .85rem; color: var(--brand-cyan);
  font-weight: 600; letter-spacing: .01em;
}

/* Year timeline */
.browse-year-intro {
  font-size: .95rem; color: var(--muted);
  margin: 0 0 20px; line-height: 1.5;
}
.browse-year-decade { margin-bottom: 24px; }
.browse-year-decade-label {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.browse-year-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.browse-year-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--paper);
  cursor: pointer; transition: all .15s ease;
  min-width: 72px;
}
.browse-year-pill:hover {
  border-color: var(--au-green); background: rgba(0,65,129,.05);
  transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,65,129,.1);
}
.browse-year-pill-year { font-weight: 700; font-size: 1rem; color: var(--text); }
.browse-year-pill-count { font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* Theme & type cards */
.browse-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-top: 8px;
}
.browse-theme-card, .browse-type-card {
  padding: 20px 18px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--paper);
  cursor: pointer; transition: all .15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.browse-theme-card:hover, .browse-type-card:hover {
  border-color: var(--au-green);
  box-shadow: 0 4px 16px rgba(0,65,129,.1);
  transform: translateY(-2px);
}
.browse-card-icon { font-size: 1.5rem; }
.browse-card-name { font-weight: 700; font-size: 1rem; color: var(--text); }
.browse-card-count { font-size: .8rem; color: var(--muted); }
.browse-type-desc { font-size: .82rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* Session list */
.browse-session-intro { font-size: .95rem; color: var(--muted); margin: 0 0 20px; }
.browse-session-group { margin-bottom: 28px; }
.browse-session-group-label {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.browse-session-list { display: flex; flex-direction: column; gap: 6px; }
.browse-session-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper);
  cursor: pointer; transition: all .15s ease; gap: 12px;
}
.browse-session-item:hover {
  border-color: var(--au-green); background: rgba(0,65,129,.03);
}
.browse-session-name { font-weight: 500; font-size: .92rem; flex: 1; }
.browse-session-count {
  font-size: .78rem; font-weight: 600; color: var(--au-green);
  background: rgba(0,65,129,.07); padding: 3px 9px;
  border-radius: 12px; white-space: nowrap;
}
.browse-session-arrow { color: var(--muted); font-size: .85rem; }

/* ── Browse dropdown + year bar chart ───────────────────────────────────── */
.browse-dropdown-wrap {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
  margin-bottom: 24px;
}
.browse-dropdown-label {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.browse-dropdown-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.browse-dropdown {
  flex: 1;
  min-width: 220px;
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-2, #f7f8fa);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s;
}
.browse-dropdown:focus {
  outline: none;
  border-color: var(--au-green);
  box-shadow: 0 0 0 3px rgba(0,65,129,.08);
}

/* Year bar chart */
.browse-year-chart {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px 14px;
}
.browse-year-chart-label {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.browse-year-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.browse-year-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  width: 28px;
}
.browse-year-bar {
  width: 18px;
  background: linear-gradient(180deg, var(--brand-cyan) 0%, var(--au-green) 100%);
  border-radius: 4px 4px 0 0;
  transition: opacity .15s, transform .15s;
  min-height: 6px;
}
.browse-year-bar-item:hover .browse-year-bar {
  opacity: .75;
  transform: scaleY(1.05);
  transform-origin: bottom;
}
.browse-year-bar-label {
  font-size: .62rem;
  color: var(--muted);
  font-family: var(--mono);
  white-space: nowrap;
}

/* Session stat cards */
.browse-session-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.browse-session-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  text-align: center;
}
.browse-session-stat-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--au-green);
  line-height: 1;
}
.browse-session-stat-label {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.3;
}
@media (max-width: 500px) {
  .browse-session-stats { grid-template-columns: 1fr; }
  .browse-year-bars { height: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISCOVER AU LAW & POLICY — Stage 4
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page hero */
.discover-hero {
  text-align: center;
  padding: 40px 0 28px;
}
.discover-hero h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, var(--au-green) 0%, var(--brand-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.discover-hero p {
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}

/* Search bar */
.discover-search-wrap {
  max-width: 720px;
  margin: 24px auto 0;
  position: relative;
}
.discover-search-input {
  width: 100%;
  font-size: 1.12rem;
  padding: 18px 120px 18px 22px;
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper);
  font-family: var(--body);
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transition: border-color .18s, box-shadow .18s;
}
.discover-search-input:focus {
  outline: none;
  border-color: var(--au-green);
  box-shadow: 0 0 0 4px rgba(0,65,129,.1), 0 4px 20px rgba(0,0,0,.07);
}
.discover-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 20px;
  font-size: .95rem;
  border-radius: 10px;
}
.discover-suggest-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 200;
  overflow: hidden;
  display: none;
}
.discover-suggest-list.open { display: block; }
.discover-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid var(--line);
}
.discover-suggest-item:last-child { border-bottom: none; }
.discover-suggest-item:hover { background: var(--paper-2); }
.discover-suggest-icon { font-size: 1rem; flex-shrink: 0; }
.discover-suggest-title { font-size: .9rem; color: var(--text); flex: 1; }
.discover-suggest-type { font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* Concept expansion pills */
.discover-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 720px;
  margin: 12px auto 0;
  min-height: 28px;
}
.discover-concept-label {
  font-size: .78rem;
  color: var(--muted);
  font-family: var(--mono);
}
.discover-concept-pill {
  padding: 3px 10px;
  background: rgba(0,176,185,.1);
  border: 1px solid rgba(0,176,185,.3);
  border-radius: 12px;
  font-size: .78rem;
  color: var(--brand-cyan);
  font-weight: 600;
}

/* Layout: sidebar filters + results */
.discover-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 700px) {
  .discover-layout { grid-template-columns: 1fr; }
  .discover-filters { display: none; }
  .discover-filters.open { display: block; }
}

/* Filters panel */
.discover-filters {
  position: sticky;
  top: 70px;
}
.discover-filter-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.discover-filter-title {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.discover-filter-group { margin-bottom: 16px; }
.discover-filter-group-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}
.discover-filter-select {
  width: 100%;
  font-size: .88rem;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper-2);
  font-family: var(--body);
  color: var(--text);
}
.discover-filter-chip-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.discover-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-size: .84rem;
  color: var(--text);
  text-align: left;
  transition: all .12s;
}
.discover-filter-chip:hover { background: var(--paper-2); }
.discover-filter-chip.active {
  background: rgba(0,65,129,.08);
  border-color: var(--au-green);
  color: var(--au-green);
  font-weight: 600;
}
.discover-filter-chip-icon { font-size: .95rem; }
.discover-filter-chip-count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--muted);
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 8px;
}
.discover-filter-chip.active .discover-filter-chip-count {
  background: rgba(0,65,129,.1);
  color: var(--au-green);
}

/* Results area */
.discover-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.discover-results-count {
  font-size: .92rem;
  color: var(--muted);
}
.discover-results-count strong { color: var(--text); }
.discover-clear-btn {
  font-size: .82rem;
  color: var(--brand-cyan);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Group heading */
.discover-group { margin-bottom: 28px; }
.discover-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.discover-group-icon { font-size: 1.1rem; }
.discover-group-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.discover-group-count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--muted);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Result card */
.discover-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  text-align: left;
  width: 100%;
}
.discover-card:hover {
  border-color: var(--au-green);
  box-shadow: 0 4px 16px rgba(0,65,129,.1);
  transform: translateY(-1px);
}
.discover-card-main { grid-column: 1; }
.discover-card-action { grid-column: 2; display: flex; align-items: flex-start; padding-top: 2px; }
.discover-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.discover-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.discover-badge-type {
  background: rgba(0,65,129,.08);
  color: var(--au-green);
  border: 1px solid rgba(0,65,129,.15);
}
.discover-badge-inst {
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.discover-badge-year {
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.discover-card-title {
  font-weight: 600;
  font-size: .97rem;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 5px;
}
.discover-card-snippet {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.discover-card-reason {
  font-size: .76rem;
  color: var(--brand-cyan);
  font-family: var(--mono);
}
.discover-card-reason::before { content: "↳ "; }
.discover-card-open {
  padding: 6px 12px;
  font-size: .8rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* Empty / loading states */
.discover-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.discover-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.discover-empty h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--text); }
.discover-empty p { font-size: .9rem; margin: 0; }

/* Pagination */
.discover-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Loading skeleton */
.discover-skeleton {
  background: linear-gradient(90deg, var(--line) 25%, var(--paper-2) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.discover-skeleton-card {
  height: 110px;
  margin-bottom: 10px;
  border-radius: 12px;
}

/* ── Search & Discover Gateway ───────────────────────────────────────────── */
.gateway-hero {
  text-align: center;
  padding: 44px 0 32px;
}
.gateway-hero h2 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 8px;
}
.gateway-hero p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}
.gateway-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .gateway-cards { grid-template-columns: 1fr; }
}
.gateway-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 24px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  position: relative;
  overflow: hidden;
}
.gateway-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--au-green), var(--brand-cyan));
  opacity: 0;
  transition: opacity .18s;
}
.gateway-card:hover {
  border-color: var(--au-green);
  box-shadow: 0 8px 32px rgba(0,65,129,.13);
  transform: translateY(-3px);
}
.gateway-card:hover::before { opacity: 1; }
.gateway-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gateway-card-icon { font-size: 1.8rem; line-height: 1; }
.gateway-card-badge {
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  background: rgba(0,176,185,.1);
  border: 1px solid rgba(0,176,185,.25);
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.gateway-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.gateway-card-desc {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.gateway-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gateway-card-features li {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.4;
}
.gateway-card-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--au-green);
  letter-spacing: .01em;
}

/* AU Decisions sub-tabs */
.au-decisions-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 20px 0;
  border-bottom: 2px solid var(--border, #e0e0e0);
  padding-bottom: 0;
}
.subtab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted, #666);
  margin-bottom: -2px;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}
.subtab-btn:hover { color: var(--accent, #1a73e8); }
.subtab-btn.active {
  color: var(--accent, #1a73e8);
  border-bottom-color: var(--accent, #1a73e8);
  font-weight: 600;
}
.subtab-panel { display: block; }
.hidden-panel { display: none !important; }
.active-panel { display: block; }

/* AU Decisions subtab bar positioning - align with main content */
#auDecisionsSubtabBar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 36px;
  box-sizing: border-box;
  background: var(--surface, #fff);
  border-bottom: 2px solid var(--border, #e0e0e0);
}
#auDecisionsSubtabBar.au-decisions-subtabs {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Filter tray (AU Decisions search): keep fully on-screen and scrollable
   so no filter or the Apply button is ever cut off. */
.layout > aside.filters {
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  position: sticky !important;
  top: 80px !important;
  padding-right: 8px;
  scrollbar-width: thin;
}
.layout > aside.filters::-webkit-scrollbar { width: 8px; }
.layout > aside.filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
@media (max-width: 768px) {
  .layout > aside.filters {
    max-height: none;
    position: static;
    overflow-y: visible;
  }
}

/* Collapsible "More filters" group (minor filters only; Organ/Theme/Year stay open) */
.filters details.filter-group { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 6px; }
.filters details.filter-group > summary {
  cursor: pointer; list-style: none; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 8px 0; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
}
.filters details.filter-group > summary::-webkit-details-marker { display: none; }
.filters details.filter-group > summary::after { content: "+"; font-size: 1rem; }
.filters details.filter-group[open] > summary::after { content: "\2013"; }
.layout > aside.filters {
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  position: sticky !important;
  top: 80px !important;
}

/* Stage 3 — country selector + country profile card */
.ul-country-selector {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px; flex-wrap: wrap;
}
.ul-country-label { font-weight: 700; color: #0b2b4f; font-size: 15px; }

.country-profile-card {
  background: #fff;
  border-radius: 20px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(8,26,48,0.10), 0 4px 12px rgba(8,26,48,0.05);
  border: 1px solid #e8edf3;
  animation: cpFade 0.35s ease;
}
@keyframes cpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero band */
.cp-hero {
  background: linear-gradient(135deg, #0b2b4f 0%, #123f6e 60%, #1b5183 100%);
  color: #fff; padding: 26px 30px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; position: relative;
}
.cp-hero::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, #c89b3b 0%, #e0c067 100%);
}
.cp-eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  font-weight: 700; color: #9cc4ec; margin-bottom: 6px;
}
.cp-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #ffffff; }
.cp-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.cp-close:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }
.cp-sub { margin-top: 8px; font-size: 14px; color: #cfe0f2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-rec {
  display: inline-block; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
}
.cp-hero-headline { text-align: right; }
.cp-headline-num { display: block; font-size: 34px; font-weight: 800; color: #ffd87a; line-height: 1; }
.cp-headline-txt { display: block; font-size: 12px; color: #cfe0f2; margin-top: 4px; max-width: 180px; }

/* Body */
.cp-body { padding: 24px 30px 28px; }
.cp-block { margin-bottom: 26px; }
.cp-block:last-child { margin-bottom: 0; }
.cp-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cp-block-head h3 { margin: 0; font-size: 16px; color: #0b2b4f; font-weight: 700; }
.cp-badge {
  background: #0b2b4f; color: #fff; border-radius: 20px; padding: 2px 11px;
  font-size: 12px; font-weight: 700; min-width: 22px; text-align: center;
}

/* Participation bar */
.cp-bar {
  display: flex; height: 14px; border-radius: 8px; overflow: hidden;
  background: #eef2f6; margin-bottom: 12px;
}
.cp-bar-seg { height: 100%; }
.cp-seg-rat { background: #1b7f5e; }
.cp-seg-sig { background: #c89b3b; }
.cp-seg-no  { background: #c3ccd6; }
.cp-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.cp-leg { font-size: 13px; color: #4a5a6a; display: flex; align-items: center; gap: 6px; }
.cp-leg b { color: #15324a; }
.cp-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Lists / rows */
.cp-list { display: flex; flex-direction: column; }
.cp-row {
  padding: 11px 0; border-bottom: 1px solid #eef2f6;
}
.cp-row:last-child { border-bottom: none; }
.cp-row-main {
  color: #15324a; font-size: 14px; font-weight: 600; line-height: 1.35;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cp-row-sub { color: #7286ic; color: #71869a; font-size: 12px; margin-top: 3px; }
.cp-empty { color: #94a3b8; font-style: italic; font-size: 13px; padding: 10px 0; }

/* Status pills */
.cp-pill { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.02em; }
.cp-pill-ok { background: #e3f4ec; color: #1b7f5e; }
.cp-pill-warn { background: #fdf3df; color: #a9791b; }
.cp-pill-neutral { background: #eef2f6; color: #51677d; }

/* Two-column for domestication + reservations */
.cp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 720px) { .cp-grid2 { grid-template-columns: 1fr; gap: 20px; } .cp-hero-headline { text-align: left; } }

/* View-all button */
.cp-more-btn {
  margin-top: 12px; background: #f3f6fa; border: 1px solid #dfe7f0; color: #0b2b4f;
  border-radius: 24px; padding: 9px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.cp-more-btn:hover { background: #0b2b4f; color: #fff; border-color: #0b2b4f; }

/* Country card — two-column clickable case cards */
.cp-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) { .cp-case-grid { grid-template-columns: 1fr; } }
.cp-case {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border: 1px solid #e6edf4; border-radius: 12px;
  background: #fbfcfe; text-decoration: none; min-height: 86px;
  justify-content: space-between;
}
.cp-case-link { cursor: pointer; transition: all 0.15s ease; }
.cp-case-link:hover {
  border-color: #0b2b4f; background: #fff;
  box-shadow: 0 8px 20px rgba(11,43,79,0.10); transform: translateY(-1px);
}
.cp-case-title { color: #15324a; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cp-case-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-case-body {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  color: #51677d; background: #eef2f6; border-radius: 12px; padding: 2px 9px;
}
.cp-case-go { font-size: 11px; font-weight: 700; color: #1e4a6e; white-space: nowrap; }
.cp-case-link:hover .cp-case-go { color: #0b2b4f; }


/* Country card — treaty commitments (civic treaty list) */
.cp-treaty-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-chip {
  border: 1px solid #dfe7f0; background: #f3f6fa; color: #0b2b4f;
  border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.cp-chip b { margin-left: 4px; }
.cp-chip:hover { background: #e7eef7; }
.cp-chip.active { background: #0b2b4f; color: #fff; border-color: #0b2b4f; }
.cp-treaty-hint {
  font-size: 12.5px; color: #7a6320; background: #fdf6e3; border: 1px solid #f0e2bd;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.cp-treaty-hint:empty { display: none; }
.cp-treaty-list {
  max-height: 360px; overflow-y: auto; border: 1px solid #eef2f6; border-radius: 12px;
}
.cp-treaty-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid #f0f3f7;
}
.cp-treaty-row:last-child { border-bottom: none; }
.cp-treaty-row:hover { background: #f9fbfd; }
.cp-treaty-name {
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  color: #15324a; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  text-decoration: none;
}
.cp-treaty-name:hover { color: #0b2b4f; text-decoration: underline; }
.cp-treaty-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cp-treaty-badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.cp-tb-ratified { background: #e3f4ec; color: #1b7f5e; }
.cp-tb-signed { background: #fdf3df; color: #a9791b; }
.cp-tb-not_ratified { background: #f6e7e7; color: #a14444; }
.cp-tb-by_adoption { background: #e7eef7; color: #3a5a85; }
.cp-tb-no_action { background: #eef2f6; color: #6b7c8e; }
.cp-treaty-date { font-size: 11.5px; color: #8595a6; white-space: nowrap; min-width: 90px; text-align: right; }
@media (max-width: 600px) {
  .cp-treaty-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cp-treaty-date { text-align: left; }
}

/* Treaty name as external link */
a.cp-treaty-name { text-decoration: none; }
a.cp-treaty-name:hover { text-decoration: underline; }
.cp-treaty-ext { font-size: 10px; color: #8595a6; }

/* Union Laws — persistent "back to home" button in the tab bar */
.ul-home-return-btn {
  display: inline-block;
  background: #c89b3b;
  color: #0b2b4f;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s ease;
}
.ul-home-return-btn:hover { background: #d8ad4d; }

/* Expandable treaty rows */
.cp-treaty-header {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 11px 14px; font: inherit;
}
.cp-treaty-header:hover { background: #f9fbfd; }
.cp-treaty-chev {
  flex-shrink: 0; color: #99a8b8; font-size: 16px; line-height: 1;
  transition: transform 0.15s ease;
}
.cp-expanded .cp-treaty-chev { transform: rotate(90deg); }
.cp-treaty-name-txt {
  flex: 1 1 auto; color: #15324a; font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.cp-treaty-detail {
  padding: 0 14px 14px 38px; animation: cpFade 0.18s ease;
}
@keyframes cpFade { from { opacity: 0; } to { opacity: 1; } }
.cp-treaty-summary {
  margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #3a4a5a;
}
.cp-treaty-summary-empty { color: #99a8b8; font-style: italic; }
.cp-treaty-readfull {
  display: inline-block; background: none; border: none; padding: 0; cursor: pointer;
  color: #0b6b4f; font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.cp-treaty-readfull:hover { text-decoration: underline; }

/* Make the expanded treaty panel clearly visible */
.cp-treaty-row.cp-expanded { background: #f4f8fc; }
.cp-treaty-detail {
  border-left: 3px solid #2f6fb0;
  margin-left: 14px;
  background: #f4f8fc;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px 14px 16px !important;
}
.cp-treaty-summary { color: #2a3a4a !important; font-size: 13.5px !important; }

/* ============ Treaty Analysis page ============ */
.ta-picker { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; flex-wrap: wrap; }
.ta-picker-label { font-weight: 700; color: #0b2b4f; }
.ta-root .ul-explorer-select { min-width: 320px; max-width: 100%; }
.ta-workspace { margin-top: 8px; }
.ta-block { background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.ta-h2 { margin: 0 0 8px; color: #0b2b4f; font-size: 20px; }
.ta-summary { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: #2a3a4a; }
.ta-why { margin: 0; font-size: 13.5px; line-height: 1.55; color: #44525f; }
.ta-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ta-block-head h3 { margin: 0; color: #0b2b4f; font-size: 16px; }
.ta-count { background: #0b2b4f; color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.ta-empty { color: #8595a6; font-style: italic; font-size: 13.5px; }

/* Provisions */
.ta-articles { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-article {
  display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  background: #f3f6fa; border: 1px solid #dfe7f0; border-radius: 8px;
  padding: 7px 11px; font: inherit; text-align: left; transition: all .15s ease;
}
.ta-article:hover { background: #e7eef7; border-color: #b9cce0; }
.ta-article-num { font-weight: 800; color: #0b2b4f; font-size: 11.5px; white-space: nowrap; }
.ta-article-title { color: #2a3a4a; font-size: 12.5px; }

/* Literature chips */
.ta-lit-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ta-chip { border: 1px solid #dfe7f0; background: #f3f6fa; color: #0b2b4f; border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ta-chip b { margin-left: 4px; }
.ta-chip:hover { background: #e7eef7; }
.ta-chip.active { background: #0b2b4f; color: #fff; border-color: #0b2b4f; }

/* Literature rows (expandable) */
.ta-lit-list { border: 1px solid #eef2f6; border-radius: 12px; overflow: hidden; }
.ta-lit-row { border-bottom: 1px solid #f0f3f7; }
.ta-lit-row:last-child { border-bottom: none; }
.ta-lit-head {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 12px 14px; font: inherit;
}
.ta-lit-head:hover { background: #f9fbfd; }
.ta-lit-chev { flex-shrink: 0; color: #99a8b8; font-size: 16px; line-height: 1.3; transition: transform .15s ease; }
.ta-expanded .ta-lit-chev { transform: rotate(90deg); }
.ta-lit-title { flex: 1 1 auto; color: #15324a; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.ta-lit-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ta-lit-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.ta-lit-academic { background: #e3eaf4; color: #2f4f7f; }
.ta-lit-policy { background: #fdf0e3; color: #9a5a1b; }
.ta-lit-byline { font-size: 11.5px; color: #8595a6; white-space: nowrap; }
.ta-lit-access { font-size: 10px; color: #aab6c2; text-transform: capitalize; }
.ta-lit-detail { padding: 0 14px 14px 38px; background: #f9fbfd; }
.ta-lit-pub { margin: 6px 0; font-size: 12.5px; color: #5a6a7a; font-style: italic; }
.ta-lit-abstract { margin: 6px 0; font-size: 13px; line-height: 1.55; color: #3a4a5a; }
.ta-lit-why { margin: 6px 0; font-size: 12.5px; line-height: 1.5; color: #44525f; }
.ta-lit-open { display: inline-block; margin-top: 6px; color: #0b6b4f; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ta-lit-open:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .ta-lit-head { flex-direction: column; }
  .ta-lit-meta { justify-content: flex-start; }
}


/* ===== Actor category collapsible groups (Registry/Coverage/Network) ===== */
.actor-cat-group {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--card-bg, #fff);
}
.actor-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-subtle, #f8fafc);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--text, #1e293b);
}
.actor-cat-head:hover { background: var(--bg-hover, #f1f5f9); }
.actor-cat-caret {
  flex: 0 0 auto;
  width: 1em;
  color: var(--muted, #64748b);
  font-size: 0.85em;
}
.actor-cat-name { flex: 1 1 auto; }
.actor-cat-count {
  flex: 0 0 auto;
  background: var(--brand-cyan, #0891b2);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.actor-cat-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.actor-cat-body[hidden] { display: none; }
[dir="rtl"] .actor-cat-head { text-align: right; }


/* ===================== TP3_DOSSIER_CSS (2026-07-05) ===================== */
.dz-wrap{display:flex;flex-direction:column;gap:14px}
.dz-sec{scroll-margin-top:64px}
.dz-chips{position:sticky;top:0;z-index:6;display:flex;gap:8px;overflow-x:auto;padding:10px 4px;background:var(--card-bg,rgba(255,255,255,.94));backdrop-filter:blur(6px);border-radius:10px}
.dz-chip{white-space:nowrap;border:1px solid rgba(0,0,0,.15);background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit}
.dz-chip:hover{background:rgba(0,0,0,.06)}
.dz-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.dz-pill{display:inline-flex;align-items:baseline;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:6px 14px;cursor:pointer;background:transparent;font:inherit}
.dz-pill b{font-size:19px}
.dz-pill-static{cursor:default}
.dz-share{height:4px;border-radius:2px;background:var(--accent,#1f6feb);opacity:.45;margin:6px 0}
.dz-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.dz-clamp.dz-open{-webkit-line-clamp:unset}
.dz-svg{width:100%;height:auto}
.dz-bar{fill:var(--accent,#1f6feb);opacity:.55;cursor:pointer;transition:opacity .15s}
.dz-bar:hover{opacity:.85}
.dz-bar-active{opacity:1}
.dz-bar-dim{opacity:.18}
.dz-bar-label{font-size:10px;fill:currentColor;opacity:.6}
.dz-quote .snippet{white-space:pre-wrap}
.dz-imp-row{display:flex;flex-wrap:wrap;gap:8px}
.dz-imp{border-radius:999px;padding:6px 12px;font-size:13px;border:1px solid rgba(0,0,0,.12)}
.dz-imp-0{background:rgba(31,111,235,.20)}
.dz-imp-1{background:rgba(31,111,235,.12)}
.dz-imp-2{background:rgba(0,0,0,.07)}
.dz-imp-3{background:rgba(0,0,0,.03)}
.dz-seg{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:8px 0}
.dz-seg-0{background:var(--accent,#1f6feb)}
.dz-seg-1{background:var(--accent,#1f6feb);opacity:.6}
.dz-seg-2{background:var(--accent,#1f6feb);opacity:.32}
.dz-skel{background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.12) 37%,rgba(0,0,0,.06) 63%);background-size:400% 100%;animation:dzShimmer 1.2s infinite;border-radius:6px}
.dz-skel-title{height:26px;width:45%;margin-bottom:10px}
.dz-skel-line{height:13px;width:90%;margin:6px 0}
.dz-skel-line.dz-short{width:60%}
.dz-skel-block{height:120px;width:100%}
@keyframes dzShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.dz-skel{animation:none}}
/* =================== end TP3_DOSSIER_CSS =================== */

/* SC-P7d: dock the clear button so the wrap height equals the input */
#discoverClearX{position:absolute;right:112px;top:50%;transform:translateY(-50%);margin:0;z-index:2}


/* SC-H1a (2026-07-08): P-7 -- Discover search button hover-jump fix.
   button.primary:hover (styles.css:219, transform: translateY(-1px))
   replaces the button's absolute-centring translateY(-50%), so the button
   drops ~half its height under the pointer. This block pins the centring
   transform in every interactive state. Colour/shadow hover feedback from
   button.primary:hover is unaffected (per-property cascade). Supersedes
   the never-applied SC-P10a override. */
button.discover-search-btn:hover,
button.discover-search-btn:focus,
button.discover-search-btn:active,
#discoverSearchBtn:hover,
#discoverSearchBtn:focus,
#discoverSearchBtn:active {
  transform: translateY(-50%);
}


/* SC-H4a (2026-07-08): H-4 -- modern clear control for the Discover search
   bar. Circular ghost button, SVG icon, fade-in when the field has text,
   soft hover ring. Positioning right/padding are set dynamically by the
   F4 wiring in app.js (measured against the real Search-button width, so
   FR "Rechercher" / PT "Pesquisar" never overlap it). The legacy
   #discoverClearX rule higher up still supplies position/top/transform;
   this block owns appearance and the show/hide state. */
.discover-clear-x{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:#64748b;cursor:pointer;
  padding:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease, background-color .15s ease;
}
.discover-clear-x.is-visible{opacity:.75;visibility:visible}
.discover-clear-x.is-visible:hover,
.discover-clear-x.is-visible:focus-visible{opacity:1;background:rgba(20,32,43,.08)}
.discover-clear-x.is-visible:active{background:rgba(20,32,43,.14)}