/* CRRU ELCC progress editor. Scoped to #crru-elcc-editor so nothing leaks into the theme. */

#crru-elcc-editor,
.crru-gate {
  --ground:#FAFAF8; --surface:#FFFFFF; --surface-2:#F1F6F7;
  --ink:#1A202C; --ink-2:#3E4E56; --ink-3:#5A6B73;
  --line:#DCE4E6; --line-2:#C6D4D8;
  --accent:#85B8C3; --accent-deep:#2F6874; --gold:#E0CC67;
  --yes:#13612E; --yes-bg:#E8F1EA;
  --part:#A8480A; --part-bg:#FBEDE2;
  --no:#54636A; --no-bg:#EEF1F2;
  --na:#5B4E85; --na-bg:#EFEDF5;
  --alert:#B82105; --alert-bg:#FBEAE7;
  --radius:6px;
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
}

#crru-elcc-editor *,
.crru-gate *{box-sizing:border-box}

.crru-loading{color:var(--ink-3);font-style:italic;padding:40px 0}

/* -------------------------------------------------- gate */
.crru-gate{
  max-width:520px;margin:40px auto;padding:28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.crru-gate h2{margin:0 0 10px;font-size:22px}
.crru-gate p{margin:0 0 12px;color:var(--ink-2)}
.crru-btn,
#crru-elcc-editor .btn{
  display:inline-block;font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  border-radius:var(--radius);padding:10px 18px;border:1px solid transparent;
  text-decoration:none;transition:background .13s,border-color .13s,color .13s;
}
.crru-btn,
#crru-elcc-editor .btn-primary{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}
.crru-btn:hover,
#crru-elcc-editor .btn-primary:hover{background:#22525C;color:#fff}
#crru-elcc-editor .btn-primary[disabled]{background:var(--no-bg);color:var(--ink-3);border-color:var(--line);cursor:not-allowed}
#crru-elcc-editor .btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
#crru-elcc-editor .btn-ghost:hover{background:var(--surface-2)}
#crru-elcc-editor .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* -------------------------------------------------- context bar */
#crru-elcc-editor .ctx{
  background:var(--surface);border:1px solid var(--line);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;padding:14px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
#crru-elcc-editor .ctx-label{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:3px;
}
#crru-elcc-editor .ctx-page{font-size:18px;font-weight:700;line-height:1.2}
#crru-elcc-editor .ctx-page small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:3px}
#crru-elcc-editor .ctx-user{
  margin-left:auto;font-size:12.5px;color:var(--ink-3);
  display:flex;align-items:center;gap:14px;
}
#crru-elcc-editor .ctx-who{text-align:right;line-height:1.35}
#crru-elcc-editor .ctx-user strong{display:block;color:var(--ink-2)}
#crru-elcc-editor .ctx-ver{
  align-self:flex-start;font-size:10px;color:var(--ink-3);opacity:.6;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
#crru-elcc-editor .ctx-signout{padding:7px 14px;font-size:13px;white-space:nowrap;text-decoration:none}
#crru-elcc-editor .ctx-signout:hover{background:var(--surface-2);color:var(--ink-2)}
@media (max-width:600px){
  #crru-elcc-editor .ctx-user{margin-left:0;width:100%;justify-content:space-between}
}

/* -------------------------------------------------- tabs */
#crru-elcc-editor .tabs{display:flex;gap:2px;padding:0 20px;background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line)}
#crru-elcc-editor .tab{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:transparent;border:1px solid transparent;border-bottom:none;
  padding:10px 16px 9px;color:var(--ink-3);border-radius:var(--radius) var(--radius) 0 0;
  margin-bottom:-1px;
}
#crru-elcc-editor .tab:hover{color:var(--ink)}
#crru-elcc-editor .tab[aria-selected="true"]{background:var(--ground);border-color:var(--line);color:var(--ink)}
#crru-elcc-editor .tab:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
#crru-elcc-editor .tab small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3);margin-top:1px}

/* -------------------------------------------------- panel */
#crru-elcc-editor .panel{background:var(--ground);border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
#crru-elcc-editor .grid{display:grid;grid-template-columns:290px 1fr}
@media (max-width:900px){#crru-elcc-editor .grid{grid-template-columns:1fr}}

/* -------------------------------------------------- question rail */
#crru-elcc-editor .rail{border-right:1px solid var(--line);padding:16px 0 20px;background:var(--surface)}
@media (max-width:900px){#crru-elcc-editor .rail{border-right:none;border-bottom:1px solid var(--line)}}
#crru-elcc-editor .rail h3{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px;padding:0 18px;
}
#crru-elcc-editor .rail-help{margin:0 0 12px;padding:0 18px;font-size:12.5px;color:var(--ink-3)}
#crru-elcc-editor .q{
  display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;
  width:100%;text-align:left;font:inherit;cursor:pointer;
  background:transparent;border:none;border-left:3px solid transparent;
  padding:10px 16px 10px 15px;color:var(--ink-2);line-height:1.4;
}
#crru-elcc-editor .q:hover{background:var(--surface-2)}
#crru-elcc-editor .q[aria-current="true"]{background:var(--surface-2);border-left-color:var(--accent-deep);color:var(--ink)}
#crru-elcc-editor .q:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
#crru-elcc-editor .q-num{font-size:11px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px}
#crru-elcc-editor .q[aria-current="true"] .q-num{color:var(--accent-deep)}
#crru-elcc-editor .q-text{font-size:13.5px}
#crru-elcc-editor .q-meta{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;font-weight:500}
#crru-elcc-editor .q-meta.warn{color:var(--part);font-weight:600}

/* -------------------------------------------------- rows */
#crru-elcc-editor .rows-head{padding:18px 22px 14px;border-bottom:1px solid var(--line)}
#crru-elcc-editor .rows-head h4{margin:0;font-size:18px;line-height:1.3;font-weight:700;max-width:56ch}
#crru-elcc-editor .rows-sub{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
#crru-elcc-editor .chip{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:2px 8px;border-radius:100px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
#crru-elcc-editor .chip.flag{background:var(--part-bg);color:var(--part);border-color:transparent}
#crru-elcc-editor .dual{
  margin:14px 22px 0;padding:11px 14px;border-radius:var(--radius);
  background:var(--surface-2);border-left:3px solid var(--accent);font-size:12.5px;color:var(--ink-2);
}
#crru-elcc-editor .dual strong{color:var(--ink)}

#crru-elcc-editor .intro-wrap{margin:14px 22px 0}
#crru-elcc-editor .intro-wrap label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

#crru-elcc-editor .scroller{overflow-x:auto}
#crru-elcc-editor table{width:100%;border-collapse:collapse;margin-top:8px;background:var(--surface)}
#crru-elcc-editor th{
  text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:12px 12px 9px;border-bottom:1px solid var(--line);
}
#crru-elcc-editor th:first-child{padding-left:22px}
#crru-elcc-editor th:last-child{padding-right:22px}
#crru-elcc-editor td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
#crru-elcc-editor td:first-child{padding-left:22px}
#crru-elcc-editor td:last-child{padding-right:22px}
#crru-elcc-editor tr:last-child td{border-bottom:none}
/* Two different meanings, deliberately different signals:
   .active = the row you are working in (where am I)
   .dirty  = the row you have changed, until you publish (what have I done) */
#crru-elcc-editor tr.active td{background:var(--surface-2)}
#crru-elcc-editor tr.active td:first-child{box-shadow:inset 3px 0 0 var(--accent-deep)}
#crru-elcc-editor tr.dirty td{background:#FBF6DF}
#crru-elcc-editor tr.dirty.active td{background:#F7EFCF}
#crru-elcc-editor tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
#crru-elcc-editor tr.dirty.active td:first-child{box-shadow:inset 3px 0 0 var(--accent-deep)}
#crru-elcc-editor .jur{font-weight:600;font-size:14px}
#crru-elcc-editor .jur span{display:block;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;margin-top:2px}

/* -------------------------------------------------- status control */
#crru-elcc-editor fieldset.status{border:none;margin:0;padding:0;display:flex;gap:5px;flex-wrap:wrap}
#crru-elcc-editor fieldset.status legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#crru-elcc-editor .status label{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 9px 5px 7px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap;
}
#crru-elcc-editor .status label:hover{border-color:var(--line-2);background:var(--surface-2)}
#crru-elcc-editor .status input{position:absolute;opacity:0;width:1px;height:1px}
#crru-elcc-editor .status input:focus-visible + label{outline:3px solid var(--accent);outline-offset:1px}
#crru-elcc-editor .status input[value="Y"]:checked + label{background:var(--yes-bg);border-color:var(--yes);color:var(--yes)}
#crru-elcc-editor .status input[value="P"]:checked + label{background:var(--part-bg);border-color:var(--part);color:var(--part)}
#crru-elcc-editor .status input[value="N"]:checked + label{background:var(--no-bg);border-color:var(--no);color:var(--no)}
#crru-elcc-editor .status input[value="NA"]:checked + label{background:var(--na-bg);border-color:var(--na);color:var(--na)}
#crru-elcc-editor .ic{flex:none;width:20px;height:20px;display:block}
#crru-elcc-editor .ic img{width:100%;height:100%;display:block;object-fit:contain}
/* No and N/A have no image by design; the slot keeps its width so the four
   buttons stay aligned. */
#crru-elcc-editor .ic-n,
#crru-elcc-editor .ic-na{width:20px;height:20px}

/* -------------------------------------------------- notes editor */
#crru-elcc-editor .notes-wrap{min-width:240px}
#crru-elcc-editor .toolbar{
  display:flex;gap:2px;padding:4px;border:1px solid var(--line);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;background:var(--surface-2);
}
#crru-elcc-editor .tb{
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:3px;
  padding:4px 8px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;
}
#crru-elcc-editor .tb:hover{background:var(--surface);border-color:var(--line)}
#crru-elcc-editor .tb:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}
#crru-elcc-editor .tb.link{color:var(--accent-deep)}
#crru-elcc-editor .notes{
  border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);
  padding:10px 12px;min-height:60px;background:var(--surface);
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
#crru-elcc-editor .notes:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(133,184,195,.4)}
#crru-elcc-editor .notes a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
#crru-elcc-editor .notes:empty::before{content:attr(data-placeholder);color:var(--ink-3);font-style:italic}
#crru-elcc-editor .linkbar{
  margin-top:8px;padding:10px 12px;border:1px solid var(--accent);
  border-radius:var(--radius);background:var(--surface-2);
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
}
#crru-elcc-editor .linkbar[hidden]{display:none}
#crru-elcc-editor .linkbar-label{
  flex:1 1 260px;display:flex;flex-direction:column;gap:4px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
#crru-elcc-editor .linkbar-input{
  font:inherit;font-size:13.5px;padding:7px 10px;
  border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);width:100%;
  text-transform:none;letter-spacing:0;font-weight:400;
}
#crru-elcc-editor .linkbar-input:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(133,184,195,.4)}
#crru-elcc-editor .linkbar-actions{display:flex;gap:6px;flex-wrap:wrap}
#crru-elcc-editor .linkbar .btn{padding:7px 13px;font-size:13px}
#crru-elcc-editor .linkbar-msg{flex:1 1 100%;font-size:12px;color:var(--ink-3)}
#crru-elcc-editor .linkbar-msg.bad{color:var(--alert);font-weight:600}

#crru-elcc-editor .srcline{
  margin-top:6px;font-size:11.5px;color:var(--part);font-weight:600;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
#crru-elcc-editor .srcline a{color:var(--part);word-break:break-all;font-weight:500}

/* -------------------------------------------------- save bar */
#crru-elcc-editor .savebar{
  position:sticky;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);
  padding:14px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-radius:0 0 var(--radius) var(--radius);
}
#crru-elcc-editor .state{font-size:13px;color:var(--ink-3)}
#crru-elcc-editor .state strong{color:var(--ink)}
#crru-elcc-editor .state.ok{color:var(--yes)}
#crru-elcc-editor .state.bad{color:var(--alert)}
#crru-elcc-editor .actions{margin-left:auto;display:flex;gap:9px}

/* -------------------------------------------------- legend */
#crru-elcc-editor .legend{
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  padding:16px 2px 0;font-size:12.5px;color:var(--ink-3);
}
#crru-elcc-editor .legend .li{display:inline-flex;align-items:center;gap:7px}

/* -------------------------------------------------- dialog */
#crru-elcc-editor dialog{
  border:1px solid var(--line);border-radius:8px;padding:0;background:var(--surface);color:var(--ink);
  max-width:460px;width:calc(100% - 32px);box-shadow:0 18px 50px rgba(20,26,29,.3);
}
#crru-elcc-editor dialog::backdrop{background:rgba(20,26,29,.5)}
#crru-elcc-editor .dlg-in{padding:24px}
#crru-elcc-editor .dlg-in h4{margin:0 0 10px;font-size:18px;font-weight:700}
#crru-elcc-editor .dlg-in p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2)}
#crru-elcc-editor .dlg-warn{
  background:var(--alert-bg);border-left:3px solid var(--alert);
  padding:11px 13px;border-radius:var(--radius);font-size:13px;color:var(--ink-2);margin-bottom:18px;
}
#crru-elcc-editor .dlg-warn strong{color:var(--alert)}
#crru-elcc-editor .dlg-actions{display:flex;gap:9px;justify-content:flex-end}

@media (prefers-reduced-motion:reduce){#crru-elcc-editor *{transition:none!important}}

/* --- introduction row --- */
/* The intro spans the whole table, which is where it sits on the website.
   It reuses the notes editor, so the toolbar and link bar work the same. */
.intro-row td{background:#F7FAFB;border-bottom:2px solid #DCE4E6}
.intro-label{margin:0 0 .45em;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#5A6B73}
.intro-row .notes{min-height:3.2em}
.intro-row.dirty td{background:#FFF8E1}