/* Theme builds board.
   The banner is the point of the page: "is anything waiting on me", answered
   before anyone clicks. It is therefore first in the DOM, high contrast, and
   never collapsed. */

.qfl-banner {
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  border-left: 4px solid;
  font-size: 0.95rem;
}
.qfl-banner--warn {
  background: #fff8e6;
  border-color: #f0a202;
  color: #4a3200;
}
.qfl-banner--ok {
  background: #edf7ed;
  border-color: #2e7d32;
  color: #1b3d1c;
}
.qfl-banner__list {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
}
.qfl-banner__list li {
  margin: 0.25rem 0;
}
.qfl-need + .qfl-need::before {
  content: '';
}
.qfl-need a {
  color: inherit;
}

/* Progress. Deliberately a bar plus the raw counts, not a bar alone: "62%"
   without "18/29" hides whether the denominator moved, and on a build board
   the denominator moves constantly as scope is discovered. */
.qfl-progress {
  background: #e6e6e6;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 0.3rem;
  min-width: 120px;
}
.qfl-progress__bar {
  background: #2e7d32;
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.qfl-need-count {
  display: inline-block;
  min-width: 1.6rem;
  text-align: center;
  background: #f0a202;
  color: #3a2700;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-weight: 600;
}

.qfl-muted {
  color: #6b7280;
  font-size: 0.85rem;
}

.qfl-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .qfl-banner--warn {
    background: #3a2f10;
    color: #ffe9b0;
  }
  .qfl-banner--ok {
    background: #12301a;
    color: #cdeccf;
  }
  .qfl-progress {
    background: #333;
  }
  .qfl-muted {
    color: #9aa1ab;
  }
}

/* Whole-row click target. The anchor stays the real link — keyboard and
   middle-click still work — and the row cursor just advertises it. */
.qfl-row-link { cursor: pointer; }
.qfl-row-link:hover { background: rgba(0, 0, 0, 0.03); }

.qfl-crumb { margin: 0 0 0.5rem; font-size: 0.9rem; }
.qfl-detail-progress { max-width: 26rem; }

@media (prefers-color-scheme: dark) {
  .qfl-row-link:hover { background: rgba(255, 255, 255, 0.05); }
}

/* Progress screenshots. Desktop and mobile sit side by side because the pair
   is the unit worth looking at — that is why both are captured. Mobile is
   given its real narrow aspect rather than being stretched to match, so the
   difference between them stays visible at a glance. */
.qfl-shot-group { margin: 0 0 2rem; }
.qfl-shot-group h3 { margin: 0 0 0.15rem; }

.qfl-shots {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.qfl-shot { margin: 0; }
.qfl-shot img {
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  /* Tall full-page captures are cropped to a readable height; the link opens
     the original. A 12,000px page shown whole is useful to nobody. */
  max-height: 420px;
  object-fit: cover;
  object-position: top;
}
.qfl-shot--desktop img { width: min(520px, 100%); }
.qfl-shot--mobile img { width: min(180px, 100%); }
.qfl-shot figcaption {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .qfl-shot img { border-color: rgba(255, 255, 255, 0.16); }
  .qfl-shot figcaption { color: #9aa1ab; }
}

/* Checks. Errors are the signal, warnings are context — stock v5 ships 84
   warnings, so colouring on warnings would mark every build red on day one and
   train people to ignore the column. */
.qfl-check { font-weight: 600; }
.qfl-check--ok { color: #2e7d32; }
.qfl-check--bad { color: #b3261e; }

@media (prefers-color-scheme: dark) {
  .qfl-check--ok { color: #7fd18a; }
  .qfl-check--bad { color: #f29a94; }
}

/* Stage checklist. Rows are scannable in a column: icon, then the thing, then
   the status word — so the eye runs down the icons and stops at the ⛔. */
.qfl-stage-group {
  margin: 1.4rem 0 0.3rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.qfl-stages td { vertical-align: top; }
.qfl-stage__icon { width: 2rem; font-size: 1.05rem; }
.qfl-stage__status { width: 7rem; color: #6b7280; font-size: 0.85rem; }
.qfl-stage__note { font-size: 0.85rem; }
.qfl-stage--done .qfl-stage__note { color: #6b7280; }
.qfl-stage--blocked { background: #fff8e6; }
.qfl-stage--n-a { opacity: 0.55; }
.qfl-scope th { text-align: left; width: 12rem; }
.qfl-gap--done { opacity: 0.5; }

/* Kind tags. Backend and app work is called out because that is where builds
   actually slip — a template nobody can start is less dangerous than a worker
   nobody has scoped. */
.qfl-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
  background: #eceff3;
  color: #33383f;
}
.qfl-tag--qfl { background: #dbe9fb; color: #123a63; }
.qfl-tag--custom,
.qfl-tag--backend { background: #fde2e0; color: #6b1d17; }
.qfl-tag--app-required { background: #f6e2fb; color: #4d1a5c; }

@media (prefers-color-scheme: dark) {
  .qfl-stage-group, .qfl-stage__status { color: #9aa1ab; }
  .qfl-stage--blocked { background: #3a2f10; }
  .qfl-tag { background: #2c3138; color: #d6dae0; }
  .qfl-tag--qfl { background: #16324f; color: #cfe2fb; }
  .qfl-tag--custom, .qfl-tag--backend { background: #4a1f1b; color: #f7cec9; }
  .qfl-tag--app-required { background: #3d1a49; color: #ecd0f6; }
}

/* Documents. One column, generous line height — this is a reading list, and a
   summary that wraps is more useful than a tidy row that truncates it. */
.qfl-docs td { padding: 0.5rem 0.6rem; }
.qfl-docs code { font-size: 0.8rem; }