/* system/apps/recent-commits/styles.css
 *
 * Split out of index.html's shared <style> block (Sept 2026) -- see
 * start-here.md's "Each app owns its own styles.css" note for why.
 *
 * .repo-manage's own bare-wrapper rule was originally shared
 * (index.html), but turned out to be two vestigial lines with no real
 * relationship between its consumers -- see
 * system/lib/shared-app-styles/styles.css's header. Denormalized
 * here instead: this app just states it locally. (Its .status-line
 * IS a genuine shared convention with apps/manage-repo-files and
 * still lives centrally in that same shared file.)
 *
 * IMPORTANT (Sept 2026, learned the hard way): manage-repo-files also
 * defines `.repo-manage button` (a big blue filled pill) under that
 * SAME `.repo-manage` wrapper class this app uses. Every button rule
 * below is written as `.repo-manage .history-toggle` (two classes)
 * specifically so it always outranks `.repo-manage button` (one class
 * + one type selector) regardless of stylesheet load order, and
 * resets every property that rule sets.
 *
 * Layout principle (Sept 2026, re-done after Ron used this at his
 * actual iOS text size -- large, same as claude.ai's app, not an edge
 * case): content (message text, release/tag names) gets its own
 * full-width block to wrap into; metadata (live badge, sha, the
 * toggle) sits in a separate, compact row below, so it never eats
 * width from wrapping text the way inline-in-one-row did.
 */
.repo-manage {
  width: 100%;
  text-align: left;
}

.history-list {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.history-group + .history-group {
  margin-top: 14px;
}

/* -- live-build indicator: a permanent, always-reserved left gutter
      via inset box-shadow (paints inside the box, doesn't consume
      layout space) rather than a real border+padding that only
      appeared when live -- the latter shifted the live row's text
      out of alignment with every other row (Ron, Sept 2026: "we lost
      some white space... I guess there was no padding there to begin
      with, and you just gave it a green border"). The gutter itself
      is now identical whether live or not; only its color changes,
      so nothing ever shifts. */

.history-group-header,
.history-row--commit {
  padding-left: 8px;
  box-shadow: inset 3px 0 0 transparent;
}
.history-group-header--live,
.history-row--live {
  box-shadow: inset 3px 0 0 #2a9d5c;
}

/* -- group headers -------------------------------------------------- */

.history-group-header {
  padding-top: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.history-group-header--selectable { cursor: pointer; }
.history-group-header--selectable:active { background: rgba(59, 111, 214, 0.06); }

.history-group-header-text {
  width: 100%;
}

.history-release-title {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-md);
}

.history-tag-name {
  color: var(--slate);
  font-size: var(--fs-xs);
}

.history-group-header.selected {
  background: rgba(59, 111, 214, 0.08);
  border-radius: 6px;
  padding-right: 8px;
  margin-right: -8px;
}

.history-live-badge {
  display: inline-block;
  font-size: var(--fs-sm); /* Ron: same size as the commit's own body text, not a tiny caption */
  font-weight: 600;
  color: #2a9d5c;
  white-space: nowrap;
}

/* -- the metadata row: date/badge/sha/toggle, always its OWN row,
      never sharing horizontal space with wrapping content text ----- */

.history-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-height: 44px; /* keeps a stable tap target even with no badge/date text */
}

.history-meta-date {
  color: var(--slate-light);
  font-size: var(--fs-sm); /* same size as the commit's own body text */
}

/* Pushes the toggle to the row's far end regardless of how many
   badge/date/sha items precede it. */
.history-meta-row > :last-child {
  margin-left: auto;
}

/* The one thing that stays monospace -- a sha is an identifier, not
   prose, and lines up more readably in a fixed-width face. */
.history-row-sha {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--slate-light);
}

/* -- disclosure toggle (groups + individual commits) ----------------
   Sized to match this app's own toolbar tool buttons (28px icon, see
   index.html's .toolbar-tool-icon) rather than an independently
   invented size -- Ron: "comparable to the toolbar buttons." */

.repo-manage .history-toggle {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--slate);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.repo-manage .history-toggle:active { background: rgba(59, 111, 214, 0.08); }

/* chevron-right's real glyph is 21x28 (non-square) -- rotating THAT
   directly shifts its visual center once rotated, since the button's
   flex-centering positions it based on the pre-rotation box. Rotating
   this square wrapper instead means rotation never changes anything's
   bounding box, so the icon stays visually centered and symmetric in
   both states (fixes the lopsided/"broken" look from the first FA
   version -- Ron, Sept 2026). */
.repo-manage .history-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.15s ease;
}
.repo-manage .history-toggle--expanded .history-toggle-icon { transform: rotate(90deg); }

.repo-manage .history-toggle--commit {
  width: 44px;
  height: 44px;
}
.repo-manage .history-toggle--commit .history-toggle-icon {
  width: 20px;
  height: 20px;
}

/* -- individual commit rows ----------------------------------------- */

.history-row--commit {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.history-row--commit:last-child { border-bottom: none; }

.history-row-text {
  color: var(--ink);
  cursor: pointer;
}
.history-row-text:active { opacity: 0.7; }

/* Background highlight, not bold -- bold text reflows the whole page
   (wider glyphs push wrapping around), which is disruptive just to
   show a selection (Ron, Sept 2026). Matches the group header's own
   .selected treatment: a soft background + slight outward bleed, not
   a weight change. */
.history-row--commit.selected .history-row-main {
  background: rgba(59, 111, 214, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px -8px;
}

.history-commit-body {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--slate);
  white-space: pre-wrap;
  padding: 8px 0 4px;
}

.history-note {
  font-size: var(--fs-3xs);
  color: var(--slate-light);
}
.history-note:empty { display: none; }