/* compiler.css — Document Compiler console. Read-only pipeline view.
   Palette follows the frame's existing greys; status colour is the only accent. */

.cp-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cp-wrap { grid-template-columns: 1fr; } }

.cp-side { border: 1px solid #e4e8ed; border-radius: 8px; overflow: hidden; background: #fff; }

/* Sidebar filter box -- matches the standalone console's (fx-compiler/static/
   index.html) existing #q filter behaviour: plain substring match on code,
   case-insensitive, filtered client-side on every keystroke. Needed once the
   sidebar carries every real project folder (~108) instead of only the
   handful that had been compiled. */
.cp-sidetabs { display: flex; border-bottom: 1px solid #eef1f4; }
.cp-sidetab { flex: 1; padding: 9px 0; font-size: 11.5px; font-weight: 650; color: #7b838d;
              background: #fafbfc; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.cp-sidetab:hover { background: #f2f5f8; }
.cp-sidetab-active { color: #2f6fd0; border-bottom-color: #2f6fd0; background: #fff; }

.cp-search { padding: 10px; border-bottom: 1px solid #eef1f4; }
.cp-search input { width: 100%; padding: 7px 9px; border: 1px solid #c7cdd4; border-radius: 6px;
                    font-size: 12.5px; box-sizing: border-box; }
.cp-search input:focus { outline: none; border-color: #2f6fd0; }

.cp-idx-fresh { font-size: 10px; color: #97a0ab; padding: 4px 12px; font-style: italic; }
.cp-idx-degraded { margin: 8px 10px 0; padding: 8px 10px; font-size: 11.5px; }

.cp-list { list-style: none; margin: 0; padding: 0; max-height: 65vh; overflow-y: auto; }
.cp-item { padding: 9px 12px; border-bottom: 1px solid #eef1f4; cursor: pointer; }
.cp-item:hover { background: #f7f9fb; }
.cp-sel { background: #eef4fd; border-left: 3px solid #2f6fd0; padding-left: 9px; }
.cp-inm { font-weight: 600; font-size: 12.5px; color: #14171a; display: flex; align-items: center; gap: 6px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-imt { color: #7b838d; font-size: 11px; margin-top: 2px; }
.cp-empty { padding: 14px 12px; color: #97a0ab; font-size: 12.5px; }

/* Compiled vs never-run -- must be obvious at a glance which of the ~108
   real project folders have actually been through the compiler at least
   once, since Run controls now work on ANY of them. */
.cp-badge { font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px;
            border-radius: 999px; text-transform: uppercase; flex-shrink: 0; }
.cp-badge-compiled { color: #1f9254; background: #f0faf4; border: 1px solid #1f9254; }
.cp-badge-never { color: #97a0ab; background: #f7f9fb; border: 1px solid #d7dce2; }
.cp-item-never .cp-inm { color: #4a5563; }

/* Recent-runs list badges -- same palette as the job-state chips in the run
   panel (.cp-jstate-*), just sized to fit the sidebar item's badge slot. */
.cp-jbadge-QUEUED    { color: #97a0ab; background: #f7f9fb; border: 1px solid #97a0ab; }
.cp-jbadge-RUNNING   { color: #2f6fd0; background: #eef4fd; border: 1px solid #2f6fd0; }
.cp-jbadge-PAUSED_WINDOW { color: #0f9b8e; background: #f0fbfa; border: 1px solid #0f9b8e; }
.cp-jbadge-DONE       { color: #1f9254; background: #f0faf4; border: 1px solid #1f9254; }
.cp-jbadge-FAILED     { color: #c23b3b; background: #fdf1f1; border: 1px solid #c23b3b; }
.cp-jbadge-CANCELLED  { color: #b5761b; background: #fdf7ee; border: 1px solid #b5761b; }
.cp-badge-archived { color: #7b838d; background: #f2f3f5; border: 1px solid #b3bac3; }

.cp-detail { min-width: 0; }
.cp-note { color: #7b838d; padding: 22px 0; font-size: 13px; }

.cp-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cp-detail-code { font-weight: 650; font-size: 13.5px; color: #14171a; }
.cp-detail-head .cp-btn { margin-left: auto; }
.cp-btn-archive { border-color: #97a0ab; color: #4a5563; }

.cp-banner { border: 1px solid #c23b3b; background: #fdf1f1; border-radius: 8px;
             padding: 10px 13px; margin-bottom: 14px; font-size: 13px; color: #14171a; }
.cp-banner b { color: #c23b3b; }
.cp-banner code { font-size: 11.5px; word-break: break-all; }

.cp-counts { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
             padding: 10px 13px; background: #f7f9fb; border-radius: 8px; }

/* Honest aggregate -- the ONE line that answers "is this project done"
   without having to read all 13 stage cards or trust the last-job banner. */
.cp-pipeline-summary { font-size: 12.5px; color: #4a5563; margin-bottom: 12px;
                        padding: 7px 12px; background: #f7f9fb; border-radius: 6px; }
.cp-pipeline-summary b { color: #14171a; }

.cp-phase { margin: 20px 0 8px; display: flex; align-items: center; gap: 10px; }
.cp-ptag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #7b838d;
           text-transform: uppercase; }
.cp-prule { flex: 1; height: 1px; background: #e4e8ed; }

.cp-stage { display: grid; grid-template-columns: 46px 1fr; gap: 13px; background: #fff;
            border: 1px solid #e4e8ed; border-left: 4px solid #b3bac3; border-radius: 8px;
            padding: 11px 13px; margin-bottom: 8px; }
.cp-s-COMPLETE   { border-left-color: #1f9254; }
.cp-s-BLOCKED    { border-left-color: #c23b3b; }
.cp-s-SAMPLED    { border-left-color: #b5761b; }
.cp-s-READY      { border-left-color: #2f6fd0; }
.cp-s-NO_VERDICT { border-left-color: #b3bac3; }
.cp-loop { border-style: dashed; border-left-style: solid; }

/* Ties the run panel's "Next up" line to the actual card it's talking about --
   the whole point being it's no longer just a floating disconnected button pair. */
.cp-next { box-shadow: 0 0 0 2px #2f6fd0 inset; }
.cp-next-badge { font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 1px 7px;
                 border-radius: 999px; text-transform: uppercase; color: #fff; background: #2f6fd0; }

.cp-sid { font-weight: 750; font-size: 15px; color: #97a0ab; font-variant-numeric: tabular-nums; }
.cp-shead { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.cp-sname { font-weight: 650; font-size: 13.5px; color: #14171a; }
.cp-alias { color: #7b838d; font-size: 12px; font-style: italic; }

.cp-chip { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
           padding: 2px 8px; border-radius: 999px; border: 1px solid #b3bac3; color: #97a0ab; }
.cp-c-COMPLETE   { border-color: #1f9254; color: #1f9254; }
.cp-c-BLOCKED    { border-color: #c23b3b; color: #c23b3b; background: #fdf1f1; }
.cp-c-SAMPLED    { border-color: #b5761b; color: #b5761b; background: #fdf7ee; }
.cp-c-READY      { border-color: #2f6fd0; color: #2f6fd0; }
.cp-c-NO_VERDICT { border-color: #b3bac3; color: #97a0ab; }

.cp-cmp { font-size: 10.5px; padding: 2px 7px; border-radius: 4px;
          border: 1px solid #e4e8ed; color: #7b838d; }
.cp-cmp-local-model { color: #b5761b; border-color: #b5761b; }
.cp-cmp-api-model   { color: #c23b3b; border-color: #c23b3b; }

.cp-does { color: #14171a; font-size: 12.5px; margin: 5px 0 7px; }
.cp-gate { font-size: 12px; color: #4a5563; padding: 6px 9px; background: #f7f9fb;
           border-radius: 5px; border-left: 2px solid #e4e8ed; }
.cp-gate b { color: #14171a; font-weight: 600; }

.cp-cov { display: flex; align-items: baseline; gap: 9px; margin-top: 8px;
          font-size: 12px; flex-wrap: wrap; }
.cp-cov-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-cov-p { font-variant-numeric: tabular-nums; color: #7b838d; }
.cp-cov-b { color: #97a0ab; font-size: 11px; font-style: italic; flex-basis: 100%; }
.cp-cov-full .cp-cov-n    { color: #1f9254; }
.cp-cov-partial .cp-cov-n { color: #b5761b; }
.cp-cov-unknown .cp-cov-n { color: #97a0ab; }

.cp-metrics { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.cp-metric { font-size: 11.5px; }
.cp-mv { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; display: block;
         color: #14171a; }
.cp-mk { color: #7b838d; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }

.cp-issues { margin-top: 8px; }
.cp-issue { font-size: 11.5px; color: #c23b3b; padding: 4px 0 4px 14px; position: relative; }
.cp-issue:before { content: "\25B2"; position: absolute; left: 0; font-size: 9px; top: 6px; }
.cp-constraint { font-size: 11px; color: #7b838d; padding: 3px 0 3px 14px; position: relative; }
.cp-constraint:before { content: "\00A7"; position: absolute; left: 0; font-size: 10px;
                        top: 3px; opacity: .7; }

.cp-loopwrap { border: 1.5px dashed #7a4fd0; border-radius: 10px; padding: 12px;
               margin: 10px 0 16px; background: #faf8ff; }
.cp-loophead { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.cp-loopnm { font-weight: 700; color: #7a4fd0; font-size: 13px; }
.cp-loopcy { font-size: 11px; color: #7b838d; }
.cp-loopnote { font-size: 12px; color: #4a5563; margin-top: 8px; padding-top: 8px;
               border-top: 1px solid #e4e8ed; }
.cp-loopnote b { color: #14171a; }

/* ----------------------------- run controls ----------------------------- */
.cp-runpanel { margin-bottom: 16px; }

.cp-runbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-btn { font-size: 12.5px; font-weight: 650; padding: 7px 14px; border-radius: 6px;
          border: 1px solid #c7cdd4; background: #fff; color: #14171a; cursor: pointer; }
.cp-btn:hover:not(:disabled) { background: #f2f5f8; }
.cp-btn:disabled { opacity: .5; cursor: not-allowed; }
.cp-btn-sample { border-color: #2f6fd0; color: #2f6fd0; }
.cp-btn-full { border-color: #b5761b; color: #b5761b; }
.cp-btn-cancel { border-color: #c23b3b; color: #c23b3b; }

.cp-runnote { font-size: 12px; color: #7b838d; padding: 8px 0; }
.cp-runnote-dim { color: #97a0ab; font-style: italic; }

/* Names what a Run click actually acts on -- the exact confusion this whole
   panel used to cause: two buttons floating with no stated target. */
.cp-runctx { font-size: 12px; color: #4a5563; padding: 7px 10px; margin-bottom: 8px;
             background: #eef4fd; border-radius: 6px; border-left: 3px solid #2f6fd0; }
.cp-runctx b { color: #14171a; }
.cp-runctx-done { background: #f0faf4; border-left-color: #1f9254; }
.cp-runctx-unbuilt { background: #fdf7ee; border-left-color: #b5761b; }

/* Unmissable: a QUEUED job with no worker attached must never look like it's
   working. Same visual weight as the BLOCKED banner (bright, top of panel). */
.cp-banner-worker { border-color: #b5761b; background: #fdf7ee; }
.cp-banner-worker b { color: #b5761b; }

.cp-job { border: 1px solid #e4e8ed; border-radius: 8px; padding: 10px 13px;
          background: #f7f9fb; margin-bottom: 4px; }
.cp-job-QUEUED   { border-left: 4px solid #97a0ab; }
.cp-job-RUNNING  { border-left: 4px solid #2f6fd0; }
.cp-job-PAUSED_WINDOW { border-left: 4px solid #0f9b8e; background: #f0fbfa; }
.cp-job-DONE     { border-left: 4px solid #1f9254; }
.cp-job-FAILED   { border-left: 4px solid #c23b3b; }
.cp-job-CANCELLED{ border-left: 4px solid #b5761b; }

.cp-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-job-label { font-size: 10.5px; color: #97a0ab; text-transform: uppercase; letter-spacing: .05em; }
.cp-job-mode { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
               color: #4a5563; }
/* "reached S2" sits right next to the DONE chip -- DONE describes THIS job,
   not the pipeline, and the stage it actually got to must not be buried
   further down where it reads as an afterthought. */
.cp-job-reached { font-size: 11px; color: #4a5563; font-variant-numeric: tabular-nums; }
.cp-job-state { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px;
                border-radius: 999px; border: 1px solid #b3bac3; color: #97a0ab; }
.cp-jstate-QUEUED    { border-color: #97a0ab; color: #97a0ab; }
.cp-jstate-RUNNING   { border-color: #2f6fd0; color: #2f6fd0; }
/* PAUSED_WINDOW gets its OWN colour (teal), deliberately nowhere near the
   amber "no worker attached" banner colour -- the two must never look like
   the same kind of problem. Teal reads as "calm, self-correcting", distinct
   from QUEUED's neutral grey (nobody watching) and RUNNING's blue. */
.cp-jstate-PAUSED_WINDOW { border-color: #0f9b8e; color: #0f9b8e; background: #f0fbfa; }
.cp-jstate-DONE      { border-color: #1f9254; color: #1f9254; }
.cp-jstate-FAILED    { border-color: #c23b3b; color: #c23b3b; background: #fdf1f1; }
.cp-jstate-CANCELLED { border-color: #b5761b; color: #b5761b; background: #fdf7ee; }
.cp-job-req { color: #97a0ab; font-size: 11px; margin-left: auto; }

.cp-job-bar { height: 6px; border-radius: 999px; background: #e4e8ed; overflow: hidden; margin-bottom: 7px; }
.cp-job-bar-fill { height: 100%; background: #2f6fd0; transition: width .4s ease; }

.cp-job-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: #4a5563;
               font-variant-numeric: tabular-nums; }
.cp-job-note { font-size: 11.5px; color: #7b838d; margin-top: 6px; font-style: italic; }
.cp-job-error { font-size: 11.5px; color: #c23b3b; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

/* PART 3: worker health strip, shown above the run buttons -- ALIVE/STALE/
   NEVER SEEN with the actual age, never a bare boolean. */
.cp-workerhealth { margin-bottom: 8px; }
.cp-wh { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px;
         border-radius: 999px; border: 1px solid #b3bac3; }
.cp-wh-ok   { border-color: #1f9254; color: #1f9254; background: #f0faf4; }
.cp-wh-warn { border-color: #b5761b; color: #b5761b; background: #fdf7ee; }
.cp-wh-bad  { border-color: #c23b3b; color: #c23b3b; background: #fdf1f1; }

/* Resumption must be visible, never a bare percentage (PART 1/3). */
.cp-job-note.cp-resumed { color: #2f6fd0; font-style: normal; font-weight: 600; }
.cp-job-note.cp-eta { color: #4a5563; font-style: normal; }

/* PART 3: PAUSED_WINDOW must read as HEALTHY and SELF-CORRECTING -- a live,
   attending worker standing down on purpose -- never as an error state or as
   the same "nobody is watching" fact QUEUED-with-no-worker represents. Teal,
   not amber/red; explicitly says why, which window, and the actual resume
   time, never a bare "paused". */
.cp-banner-paused { border-color: #0f9b8e; background: #f0fbfa; margin-top: 8px; margin-bottom: 0; }
.cp-banner-paused b { color: #0f9b8e; }

/* Quiet-hours panel -- "show the configured windows on the screen so the
   operator can see what is in force without opening the file" (PART 3). */
.cp-qh-panel { border: 1px solid #e4e8ed; border-radius: 8px; padding: 8px 11px;
               margin-bottom: 10px; background: #fafbfc; }
.cp-qh-head { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
              color: #7b838d; margin-bottom: 6px; }
.cp-qh-head i { text-transform: none; letter-spacing: normal; font-weight: 500; color: #b5761b; }
.cp-qh-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 11.5px;
             padding: 3px 0; }
.cp-qh-time { font-weight: 700; font-variant-numeric: tabular-nums; color: #14171a; min-width: 92px; }
.cp-qh-name { color: #4a5563; }
.cp-qh-reason { color: #97a0ab; font-size: 10.5px; font-style: italic; flex-basis: 100%; }
.cp-qh-badge { font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px;
               border-radius: 999px; text-transform: uppercase; color: #0f9b8e; background: #e3f7f5;
               border: 1px solid #0f9b8e; }
.cp-qh-active { background: #f0fbfa; margin: 0 -11px; padding: 3px 11px; border-radius: 4px; }
.cp-qh-empty { color: #97a0ab; font-style: italic; }