/* ============================================================
   CONCORDANCE — the transmission map components
   Relies on tokens from styles.css (load that first).
   ============================================================ */

.cc-intro{ max-width:var(--wrap-narrow); }

/* ---- Draft banner ---- */
.cc-banner{ display:flex; gap:.9rem; align-items:flex-start; background:rgba(194,162,74,.08);
  border:1px solid rgba(194,162,74,.3); border-left:2px solid var(--brass); border-radius:var(--r);
  padding:1rem 1.2rem; margin-top:1.6rem; }
.cc-banner svg{ flex:none; margin-top:.15rem; }
.cc-banner p{ margin:0; font-size:.92rem; color:var(--on-ink); }
.cc-banner b{ color:var(--brass-hi); font-weight:600; }

/* ---- Control bar ---- */
.cc-controls{ position:sticky; top:66px; z-index:30; background:rgba(15,20,34,.92);
  backdrop-filter:saturate(140%) blur(10px); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:.85rem 0; }
.cc-controls__in{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem; }
.cc-ctl{ display:flex; align-items:center; gap:.5rem; }
.cc-ctl__label{ font-family:var(--ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-ink); }

/* segmented control */
.seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; }
.seg button{ font-family:var(--ui); font-size:.8rem; font-weight:500; color:var(--on-ink);
  background:transparent; border:0; padding:.5em 1em; cursor:pointer; transition:background .15s,color .15s;
  display:inline-flex; align-items:center; gap:.45em; }
.seg button + button{ border-left:1px solid var(--line); }
.seg button:hover{ background:var(--ink-3); }
.seg button[aria-pressed="true"]{ background:var(--brass); color:#1a1406; }
.seg--mini button{ padding:.42em .8em; font-size:.74rem; }
.seg--mini button[aria-pressed="true"]{ background:var(--ink-3); color:var(--brass-hi); }

/* search */
.cc-search{ position:relative; margin-left:auto; }
.cc-search input{ font-family:var(--body); font-size:.92rem; color:var(--bone);
  background:#0B0F1A; border:1px solid var(--line-strong); border-radius:999px;
  padding:.55em 2.2em .55em 1em; width:230px; max-width:46vw; }
.cc-search input::placeholder{ color:var(--muted-ink); }
.cc-search input:focus{ border-color:var(--brass); outline:none; }
.cc-search__x{ position:absolute; right:.5em; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted-ink); cursor:pointer; font-size:1rem; line-height:1;
  padding:.2em; display:none; }
.cc-search__x.show{ display:block; }

.cc-textbtn{ font-family:var(--ui); font-size:.78rem; color:var(--patina-hi); background:none;
  border:0; cursor:pointer; padding:.3em; }
.cc-textbtn:hover{ color:var(--brass-hi); text-decoration:underline; }

/* ---- Stats + legend strip ---- */
.cc-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; padding:1rem 0 .2rem;
  font-family:var(--mono); font-size:.74rem; color:var(--muted-ink); }
.cc-strip b{ color:var(--brass-hi); font-weight:500; }
.cc-legend{ display:flex; gap:1.1rem; align-items:center; margin-left:auto; }
.cc-legend span{ display:inline-flex; align-items:center; gap:.45em; }
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot--exp{ background:var(--brass); }
.dot--ctx{ background:transparent; border:1.5px solid var(--patina); }
.uvflag{ display:inline-block; width:9px; height:9px; border-radius:2px; border:1px solid var(--brass);
  border-style:dashed; }

/* ============================================================
   MAP MODE (desktop)
   ============================================================ */
.cc-stage{ position:relative; overflow:auto; border:1px solid var(--line); border-radius:var(--r);
  background:
    radial-gradient(1100px 420px at 22% 12%, rgba(194,162,74,.06), transparent 60%),
    var(--ink); margin-top:1rem; min-height:60vh; }
.cc-canvas{ position:relative; }
.cc-canvas svg.cc-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.cc-node{ position:absolute; z-index:2; box-sizing:border-box; }

/* root */
.cc-root{ display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass)); color:#1a1406;
  border-radius:8px; padding:.8rem 1rem; box-shadow:0 10px 30px -14px rgba(194,162,74,.6); }
.cc-root__t{ font-family:var(--display); font-weight:600; font-size:1.15rem; line-height:1.05; }
.cc-root__c{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; opacity:.8; }

/* group */
.cc-group{ display:flex; align-items:center; gap:.7rem; text-align:left;
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:7px;
  padding:.6rem .85rem; cursor:pointer; transition:border-color .15s, background .15s, transform .12s; }
.cc-group:hover{ border-color:var(--brass); background:var(--ink-3); }
.cc-group__ar{ font-family:var(--arabic); direction:rtl; font-size:1.45rem; color:var(--brass-hi); line-height:1; }
.cc-group__meta{ display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.cc-group__en{ font-family:var(--display); font-size:1.05rem; color:var(--bone); line-height:1.1; }
.cc-group__sub{ font-family:var(--ui); font-size:.66rem; letter-spacing:.06em; color:var(--muted-ink); }
.cc-group__count{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--brass);
  background:rgba(194,162,74,.12); border-radius:999px; padding:.15em .6em; flex:none; }
.cc-group__chev{ flex:none; color:var(--muted-ink); transition:transform .18s; font-size:.8rem; }
.cc-group[aria-expanded="true"] .cc-group__chev{ transform:rotate(90deg); color:var(--brass-hi); }

/* leaf */
.cc-leaf{ display:flex; align-items:center; gap:.6rem; text-align:left;
  background:rgba(255,255,255,.014); border:1px solid var(--line); border-radius:6px;
  padding:.5rem .7rem; cursor:pointer; transition:border-color .15s, background .15s; width:100%; }
.cc-leaf:hover{ border-color:var(--patina); background:rgba(92,140,130,.08); }
.cc-leaf.is-selected{ border-color:var(--brass); background:rgba(194,162,74,.1); }
.cc-leaf__ar{ font-family:var(--arabic); direction:rtl; font-size:1.18rem; color:var(--bone); line-height:1; flex:none; }
.cc-leaf__en{ font-family:var(--ui); font-size:.8rem; color:var(--on-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-leaf__ref{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--patina-hi); flex:none; }
.cc-leaf.uv .cc-leaf__ref{ border-bottom:1px dashed var(--brass); padding-bottom:1px; }
.cc-leaf__dot{ flex:none; }

/* connectors */
.cc-link{ fill:none; stroke:var(--brass); stroke-width:1.6; opacity:.5; }
.cc-link--leaf{ stroke:var(--patina); opacity:.42; stroke-width:1.3; }

/* empty state */
.cc-empty{ padding:3rem 1.5rem; text-align:center; color:var(--muted-ink); font-family:var(--body); }
.cc-empty b{ color:var(--bone); font-family:var(--display); font-size:1.2rem; display:block; margin-bottom:.3rem; }

/* ============================================================
   LIST MODE (mobile / fallback)
   ============================================================ */
.cc-list{ margin-top:1rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.cc-list__group{ border-top:1px solid var(--line); }
.cc-list__group:first-child{ border-top:0; }
.cc-list__gbtn{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:var(--ink-2); border:0; padding:.85rem 1rem; cursor:pointer; }
.cc-list__gbtn:hover{ background:var(--ink-3); }
.cc-list__gar{ font-family:var(--arabic); direction:rtl; font-size:1.4rem; color:var(--brass-hi); }
.cc-list__gen{ font-family:var(--display); font-size:1.1rem; color:var(--bone); }
.cc-list__gsub{ font-family:var(--ui); font-size:.64rem; letter-spacing:.06em; color:var(--muted-ink); display:block; }
.cc-list__gcount{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--brass);
  background:rgba(194,162,74,.12); border-radius:999px; padding:.15em .6em; }
.cc-list__leaves{ display:none; padding:.4rem; background:var(--ink); }
.cc-list__group.open .cc-list__leaves{ display:block; }
.cc-list__leaf{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:transparent; border:0; border-radius:6px; padding:.6rem .7rem; cursor:pointer; }
.cc-list__leaf:hover{ background:rgba(92,140,130,.08); }
.cc-list__leaf .cc-leaf__ar{ font-size:1.15rem; }

/* ============================================================
   DETAIL DRAWER
   ============================================================ */
.cc-drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(440px,92vw); z-index:80;
  background:var(--ink-2); border-left:1px solid var(--line-strong); box-shadow:-30px 0 60px -30px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.cc-drawer.open{ transform:translateX(0); }
.cc-drawer__head{ display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.cc-drawer__ey{ font-family:var(--ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.cc-drawer__close{ margin-left:auto; background:none; border:1px solid var(--line-strong); border-radius:var(--r);
  color:var(--bone); cursor:pointer; padding:.35em .6em; font-family:var(--ui); font-size:.78rem; }
.cc-drawer__close:hover{ border-color:var(--brass); color:var(--brass-hi); }
.cc-drawer__body{ padding:1.3rem; overflow-y:auto; }
.cc-prophet{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.2rem; }
.cc-prophet__ar{ font-family:var(--arabic); direction:rtl; font-size:2rem; color:var(--brass-hi); line-height:1; }
.cc-prophet__en{ font-family:var(--display); font-size:1.5rem; color:var(--bone); }
.cc-verseclause{ font-family:var(--arabic); direction:rtl; font-size:1.85rem; line-height:1.95; color:var(--bone);
  background:#0B0F1A; border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; margin:1.1rem 0 .9rem; }
.cc-gloss{ font-family:var(--body); font-size:1.05rem; font-style:italic; color:var(--on-ink); line-height:1.6; }
.cc-meta{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.cc-row{ display:flex; gap:.8rem; align-items:baseline; }
.cc-row__k{ font-family:var(--ui); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-ink); min-width:84px; flex:none; }
.cc-row__v{ font-family:var(--body); font-size:.98rem; color:var(--bone); }
.cc-row__v .ar{ font-size:1.25rem; }
.cc-root2{ font-family:var(--mono); font-size:.8rem; color:var(--patina-hi); }
.cc-pill{ font-family:var(--ui); font-size:.68rem; font-weight:600; letter-spacing:.06em; padding:.22em .65em; border-radius:999px; }
.cc-pill--exp{ background:rgba(194,162,74,.18); color:var(--brass-hi); }
.cc-pill--ctx{ background:rgba(92,140,130,.16); color:var(--patina-hi); }
.cc-pill--uv{ background:rgba(172,74,59,.14); color:var(--oxide-hi); }
.cc-pill--v{ background:rgba(92,140,130,.2); color:var(--patina-hi); }
.cc-note{ margin-top:1rem; font-size:.92rem; color:var(--muted-ink); font-style:italic;
  border-left:2px solid var(--line-strong); padding-left:.9rem; }
.cc-drawer__foot{ margin-top:1.4rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.cc-copybtn{ font-family:var(--ui); font-size:.8rem; font-weight:500; cursor:pointer;
  background:var(--ink-3); color:var(--bone); border:1px solid var(--line-strong); border-radius:var(--r); padding:.5em .9em; }
.cc-copybtn:hover{ border-color:var(--brass); color:var(--brass-hi); }
.cc-scrim{ position:fixed; inset:0; background:rgba(8,11,18,.5); z-index:79; opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s; backdrop-filter:blur(1px); }
.cc-scrim.open{ opacity:1; visibility:visible; }

/* ---- Responsive ---- */
@media (max-width:760px){
  .cc-controls{ top:66px; }
  .cc-search{ margin-left:0; width:100%; order:5; }
  .cc-search input{ width:100%; max-width:none; }
  .cc-legend{ margin-left:0; width:100%; }
  .cc-drawer{ width:100vw; height:88dvh; top:auto; bottom:0; border-left:0; border-top:1px solid var(--line-strong);
    border-radius:14px 14px 0 0; transform:translateY(100%); }
  .cc-drawer.open{ transform:translateY(0); }
  .cc-verseclause{ font-size:1.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .cc-drawer,.cc-scrim{ transition:none; }
  .cc-group__chev{ transition:none; }
}