/* "Elucidate Structure" page. Layout, buttons, tables and tokens come from theme.css / start.css. */

.sidebar__spacer { flex: 1; }

.elu-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 6px; }
.elu-intro h1 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 500; }
.elu-intro .muted { max-width: 760px; font-size: 15px; }
.elu-intro .badge { align-self: center; direction: ltr; }

/* ---------------------------------------------------------------- form */
.elu-form { display: grid; gap: 14px; }
.elu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.elu-form .opts__group { display: flex; flex-direction: column; gap: 8px; }

.elu-form textarea {
  width: 100%; resize: vertical; min-height: 120px;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.elu-form input[type="text"], .elu-form input[type="number"] {
  font: inherit; font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 5px 10px; width: 160px; max-width: 100%;
}
.elu-form input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px;
}
.elu-hint { font-size: 12px; }
.elu-params { gap: 12px 22px; }
.elu-params label { flex-direction: column; align-items: flex-start; gap: 4px; }
.elu-form .review__actions { align-items: center; margin-top: 4px; }
.elu-examples { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
.elu-form .field-error { text-align: start; max-width: none; }

.elu-tile { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 18px 12px; color: #444; font-weight: 600; }
.elu-tile span { padding: 4px 12px; border-radius: 999px; background: #f1ede7; border: 1px solid #ddd5ca; }

/* ------------------------------------------------------------- results */
.elu-results { container: elu / inline-size; display: flex; flex-direction: column; gap: 14px; }
.elu-results .res-head { margin-bottom: 0; }
.elu-results .notice { margin: 0; }
.elu-results .alerts { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12.5px; padding: 2px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.chip small { color: var(--muted); }
.elu-sub { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }

.elu-sum, .cand__details {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 0 14px;
}
.elu-sum > summary, .cand__details > summary {
  cursor: pointer; padding: 10px 0; font-weight: 500; font-size: 14px; list-style-position: inside;
}
.elu-sum__body { display: grid; gap: 8px; padding-bottom: 12px; }
.elu-sum__body p { margin: 0; }
.cand__details { margin-top: 6px; }
.cand__details h4 { font-size: 13px; margin: 12px 0 6px; }
.cand__details h4 small { color: var(--muted); font-weight: 400; }
.cand__details .table-note { padding-bottom: 12px; }

.cands { display: grid; gap: 16px; }
.cand {
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: inset 4px 0 0 var(--border);
}
:root[dir="rtl"] .cand { box-shadow: inset -4px 0 0 var(--border); }
.cand--high { box-shadow: inset 4px 0 0 var(--ok); }
.cand--mid { box-shadow: inset 4px 0 0 var(--warn); }
.cand--low { box-shadow: inset 4px 0 0 var(--bad); }
:root[dir="rtl"] .cand--high { box-shadow: inset -4px 0 0 var(--ok); }
:root[dir="rtl"] .cand--mid { box-shadow: inset -4px 0 0 var(--warn); }
:root[dir="rtl"] .cand--low { box-shadow: inset -4px 0 0 var(--bad); }

.cand__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.cand__rank {
  font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.cand__name { flex: 1; min-width: 0; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.cand__overall { display: inline-flex; align-items: baseline; gap: 6px; }
.cand__overall b { font-size: 26px; font-variant-numeric: tabular-nums; direction: ltr; }
.cand__overall small { color: var(--muted); font-size: 12px; }
.cand__overall--high b { color: var(--ok); }
.cand__overall--mid b { color: var(--warn); }
.cand__overall--low b { color: var(--bad); }

.cand__body { display: grid; grid-template-columns: minmax(180px, 250px) minmax(190px, 270px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cand__mol { display: flex; flex-direction: column; gap: 10px; }
.cand__mol .mol-svg { min-height: 120px; }
.cand__mol .mol-svg svg { max-width: 250px; }
.cand__facts { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.cand__facts > div { display: grid; gap: 0; }
.cand__facts dt { font-size: 11px; color: var(--muted); }
.cand__facts dd { margin: 0; overflow-wrap: anywhere; }
.cand__facts code { background: var(--hover); padding: 1px 6px; border-radius: 6px; font-size: 12px; }

.cand__scores { display: grid; gap: 8px; }
.cand__line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin: 0; }
.cand__line b { color: var(--text); font-variant-numeric: tabular-nums; }
.level--high { color: var(--ok) !important; }
.level--mid { color: var(--warn) !important; }
.level--low { color: var(--bad) !important; }

.score { display: grid; grid-template-columns: 62px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: 13px; }
.score__bar { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.score__bar span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.score--mid .score__bar span { background: var(--warn); }
.score--low .score__bar span { background: var(--bad); }
.score__num { font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }

.cand__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cand__info > p { margin: 0; }
.cand__why { font-size: 14px; }
.cand__ai { font-size: 12px; }
.cand__ir .alerts { margin: 4px 0 0; }

.elu-peaks td.na, .elu-peaks .na { font-style: italic; }
.elu-peaks tr.is-ok td:last-child { color: var(--muted); }
.elu-peaks tr.is-bad td { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.elu-peaks tr.is-warn td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.elu-peaks tbody tr { cursor: default; }

@container elu (max-width: 900px) {
  .cand__body { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
  .cand__info { grid-column: 1 / -1; }
}
@container elu (max-width: 560px) {
  .cand__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .elu-grid { grid-template-columns: minmax(0, 1fr); }
  .elu-examples { margin-inline-start: 0; }
}

.elu-peaks tr.is-ok td { background: color-mix(in srgb, var(--ok) 9%, transparent); }

/* ------------------------------------------------------- file / image import */
.elu-slot { position: relative; transition: border-color .15s, background .15s; }
.elu-slot.is-drop { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.elu-slot__tools { display: flex; justify-content: flex-end; margin-top: -6px; }
.elu-slot__tools .btn { gap: 6px; }
.elu-slot__tools svg { width: 14px; height: 14px; }

.elu-import { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--border); }
.elu-import[hidden] { display: none; }
.elu-import p { margin: 0; }
.elu-import__title { font-size: 13px; overflow-wrap: anywhere; }
.elu-import .alerts { margin: 0; }
.elu-import .panel__busy { padding: 8px 0; }
.elu-import__plot { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 4px; }

.pv { display: block; width: 100%; height: 110px; }
.pv-line { fill: none; stroke: var(--spec); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pv-axis, .pv-tick { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv-label { fill: var(--muted); font-size: 10px; }
.pv-mark { fill: var(--hl); }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 14px; }
.checks li { display: flex; gap: 8px; align-items: baseline; }
.checks__ok span { color: var(--ok); font-weight: 700; }
.checks__warn { padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.checks__warn span { color: var(--warn); }

/* ----------------------------------------------- origin, verdict, assignment */
.origin { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--bg); }
.origin a { color: inherit; text-decoration: underline dotted; }
.origin--db { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.origin--ai { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 45%, var(--border)); }

.elu-db { margin-top: 6px; }

.verdict { display: grid; gap: 8px; }
.verdict__item {
  display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; font-size: 14px;
  border: 1px solid var(--border); background: var(--bg);
}
.verdict__item b { font-size: 15px; }
.verdict__item--warn { background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.verdict__item--warn b { color: var(--warn); }
.verdict__item--ok { background: color-mix(in srgb, var(--ok) 11%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.verdict__item--ok b { color: var(--ok); }

.assign { display: grid; gap: 6px; margin-top: 4px; }
.assign__row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: start; }
.assign__kind { font-size: 12px; color: var(--muted); padding-top: 4px; }
.assign__peaks { display: flex; flex-wrap: wrap; gap: 5px; }
.assign__caption { margin: 0; font-size: 13px; min-height: 2.6em; color: var(--muted); }
.assign__caption.is-warn { color: var(--warn); }

.peak, .chip--group {
  font: inherit; font-size: 12.5px; padding: 2px 10px; border-radius: 999px; cursor: pointer;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s;
}
.peak:hover, .chip--group:hover { border-color: var(--hl); }
.peak--ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.peak--partial { border-style: dashed; border-color: var(--warn); }
.peak--none { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.peak--fp { color: var(--muted); border-style: dotted; }
.peak.is-active, .chip--group.is-active { background: color-mix(in srgb, var(--hl) 28%, var(--bg)); border-color: var(--hl); }
.peak.is-linked { background: color-mix(in srgb, var(--hl) 20%, var(--bg)); border-color: var(--hl); border-style: solid; }
.chip--ir small { color: var(--ir); font-weight: 700; }

.hit { fill: transparent; pointer-events: all; cursor: pointer; }
.hit:hover { fill: color-mix(in srgb, var(--hl) 22%, transparent); }

/* ------------------------------------------------------- what to do + credits */
.elu-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.elu-mode {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); text-align: start;
}
.elu-mode:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.elu-mode input { margin-top: 5px; accent-color: var(--accent); }
.elu-mode b { display: block; font-weight: 600; }
.elu-mode small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.elu-mode__cost { font-style: normal; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--muted); background: var(--hover); }
.elu-compare { display: flex; align-items: flex-end; }
.elu-compare label { flex: 1 1 280px; }
.elu-compare input { width: 100%; }
#costLine { margin-top: 16px; }
#compareCost { margin-top: 12px; }
@media (max-width: 720px) { .elu-modes { grid-template-columns: 1fr; } }