/* XcodeFix Projects — what this app adds to the shared Graphite core.
   Anything general enough for another app belongs in the platform sheet. */

.auth-title { font-size: var(--text-xl); margin: 0 0 4px; }
.auth-sub   { color: var(--text-2); font-size: var(--text-label); margin: 0 0 var(--space-6); }
.auth-alt   { color: var(--text-2); font-size: var(--text-sm); margin: var(--space-5) 0 0; text-align: center; }
.btn-block  { width: 100%; justify-content: center; }

/* ---------- Board ----------
   A horizontal scroller of fixed-width columns. Drag-and-drop is deliberately
   not here yet; the status select on the task page is the accessible path and
   has to keep working regardless. */
.board { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); }
.board-col {
  flex: 0 0 280px; background: var(--bg); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); display: flex; flex-direction: column; max-height: 70vh;
}
.board-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-card);
}
.board-col-head h3 { margin: 0; font-size: var(--text-label); font-weight: 600; }
.board-col-body { padding: var(--space-3); overflow-y: auto; display: grid; gap: var(--space-3); }
.board-empty { color: var(--muted); font-size: var(--text-sm); margin: 0; text-align: center; padding: var(--space-4) 0; }
.board-card {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-btn); padding: var(--space-3); box-shadow: var(--shadow-card);
}
.board-card-title { display: block; font-size: var(--text-label); font-weight: 500; }
.board-card-meta, .board-card-foot {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-2) 0 0; font-size: var(--text-sm);
}
.board-more { display: block; text-align: center; font-size: var(--text-sm); padding: var(--space-2); }

/* A date that has already gone past, on work that is still open. */
.is-overdue { color: var(--danger); font-weight: 500; }

/* Status tallies beside the segmented control. */
.seg-count { padding: 6px 10px; font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.seg-count b { color: var(--text); }

/* ---------- Comments ---------- */
.comment-list { list-style: none; margin: 0; padding: 0 var(--space-5); display: grid; gap: var(--space-5); }
.comment { display: flex; gap: var(--space-3); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 4px; font-size: var(--text-label); }
/* Imported bodies carry their own markup, so give it somewhere sane to live. */
.comment-text { font-size: var(--text-md); color: var(--text-2); overflow-wrap: anywhere; }
.comment-text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.comment-text p:last-child { margin-bottom: 0; }
.comment-form { padding: var(--space-5); border-top: 1px solid var(--border-card); margin-top: var(--space-5); }
.card-note { color: var(--muted); padding: 0 var(--space-5) var(--space-5); margin: 0; }
.card-body.rich { padding: 0 var(--space-5) var(--space-5); overflow-wrap: anywhere; }
.card-body.rich img { max-width: 100%; height: auto; }

/* A details panel in a narrow column reads better as one column. */
.def-grid-1 { grid-template-columns: 1fr; }

.inline-form { display: inline-flex; }

/* An image the history could not bring with it. Inline, so it sits where the
   picture was rather than interrupting the paragraph. */
.missing-image { display: inline-block; margin: var(--space-2) 0; font-size: var(--text-sm); }

/* A select small enough to sit inside a table cell. */
.input-sm { padding: 4px 26px 4px 8px; font-size: var(--text-sm); height: auto; min-width: 110px; }

/* An explanatory note above a table, not a flash message. */
.note { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); }

/* ---------- Bulk actions ---------- */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card);
}
.bulk-all { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-label); }
.bulk-bar .grow { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Colour swatches ---------- */
.swatches { display: flex; gap: var(--space-4); flex-wrap: wrap; padding: 0 var(--space-5) var(--space-5); }
.swatch { display: grid; gap: 2px; font-size: var(--text-sm); }
.swatch-chip { display: block; width: 68px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-card); }
.swatch-chip.sm { display: inline-block; width: 18px; height: 12px; vertical-align: middle; }

/* ---------- Report tiles and bars ---------- */
.report-tile {
  display: grid; gap: 4px; padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none;
}
.report-tile:hover { border-color: var(--brand); }
.report-tile-icon { color: var(--brand); }
.report-tile small { color: var(--text-2); }

/* One series, drawn in CSS. A chart runtime for this would be more machinery
   than the picture is worth. */
.bars { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-2); }
.bars li { display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.bars-track { background: var(--bg); border-radius: var(--radius-pill); height: 10px; overflow: hidden; }
.bars-fill { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.bars-value { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
.card-body.form-grid { padding: var(--space-5); }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }