/* history.css — the one history row and list (activity history spec §9). Tokens only. */

/* Task 48 fix round 1: moved here from a page-local <style> block in
   views/inbox.ejs — Task 44's fix round on this file landed first (commit
   2aa2a46), so it's no longer "under review" and this can live where every
   other history style does. Used by the inbox's tab bar (.inbox-tab-strip):
   reachable on phones by scrolling horizontally WITHIN ITSELF, never the
   page body, when the strip doesn't fit at 390px. */
.inbox-tab-strip--scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.inbox-tab-strip--scroll::-webkit-scrollbar { display: none; }

.hlist { display: flex; flex-direction: column; gap: var(--space-3); }
.hlist__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hseg { display: inline-flex; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius); overflow: hidden; }
.hseg > button { min-height: 36px; padding: 0 var(--space-3); background: transparent; border: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); cursor: pointer; }
.hseg > button[aria-selected="true"] { background: var(--color-bg-tertiary); color: var(--color-text-primary); font-weight: 600; }
.hband { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.hband::-webkit-scrollbar { display: none; }
.hband__pill { flex: 0 0 auto; min-height: 32px; padding: 0 var(--space-3); border-radius: 999px; border: 1px solid var(--place-color, var(--color-border-secondary));
  background: transparent; color: var(--color-text-primary); font-size: var(--font-size-sm); white-space: nowrap; cursor: pointer; }
.hband__pill[aria-pressed="true"] { background: var(--place-color, var(--color-bg-tertiary)); color: var(--color-bg-primary); }
/* The dark-on-dark "All" pill (fix round 1, Important 7): with no
   --place-color the fallback background is --color-bg-tertiary and this
   text colour is --color-bg-primary — both dark in dark mode, so the
   selected "All" pill (the default state of every list) was unreadable.
   Higher specificity than the rule above (extra attribute selector), so it
   wins regardless of source order. */
.hband__pill[data-place=""][aria-pressed="true"] { color: var(--color-text-primary); }
.hband__n { opacity: .75; font-variant-numeric: tabular-nums; }
.hlist__rows { display: flex; flex-direction: column; border: 1px solid var(--color-border-primary); border-radius: var(--border-radius); overflow: hidden; }
.hlist__empty { padding: var(--space-4); color: var(--color-text-muted); margin: 0; }
/* A deep link to a comment further back than 10 pages (views/partials/comment-focus.ejs). */
.hlist__note { margin: 0; padding: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.hlist__more { align-self: center; min-height: 36px; padding: 0 var(--space-4); border-radius: var(--border-radius); border: 1px solid var(--color-border-secondary); background: var(--color-bg-secondary); color: var(--color-text-primary); cursor: pointer; }
/* Plain <button> only gets `color` from design-system.css's global rule, not
   a background — left unstyled here it rendered the native grey ButtonFace
   with near-white text (verified visually: Task 44 static render), unreadable
   in dark mode. */
.hlist__showall { min-height: 36px; padding: 0 var(--space-3); border-radius: var(--border-radius); border: 1px solid var(--color-border-secondary); background: transparent; color: var(--color-text-secondary); font-size: var(--font-size-sm); cursor: pointer; }
/* A comment row also carries the `comment` class, which app.css styles as a
   free-standing card (border all round, radius, margin-bottom) — reset here
   (history.css loads after app.css) so every row in a list looks the same. */
/* The day filter and the kind filter sit beside token-styled buttons; left
   native they rendered as grey boxes with a larger label. */
.hlist__date { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.hlist__date input, .hlist__otype { min-height: 36px; padding: 0 var(--space-2); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius);
  background: var(--color-bg-primary); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.hrow { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--color-border-secondary); background: var(--color-bg-secondary); }
.hrow:first-child { border-top: 0; }
.hrow__avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 600; }
.hrow__body { flex: 1 1 auto; min-width: 0; }
.hrow__head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.hrow__actor { font-weight: 600; color: var(--color-text-primary); }
.hrow__via { font-size: var(--font-size-xs); color: var(--color-text-muted); border: 1px solid var(--color-border-secondary); border-radius: 999px; padding: 0 6px; }
.hrow__headline { color: var(--color-text-primary); text-decoration: none; overflow-wrap: anywhere; }
a.hrow__headline:hover { text-decoration: underline; }
.hrow__meta { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: 2px; }
.hrow__place { padding: 0 6px; border-radius: 999px; border: 1px solid var(--place-color, var(--color-border-secondary)); }
.hrow__details { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.hrow__details li { overflow-wrap: anywhere; }
.hrow__field { color: var(--color-text-primary); }
.hrow__from { text-decoration: line-through; opacity: .7; }
/* .hrow__message is a pure wrapper (subject/from-line/content, one <div> each
   on its own template line) — it must NOT inherit .hrow__content's
   white-space: pre-wrap, or the indentation between those child divs becomes
   a visible blank line under every subject/from-line/body (verified visually:
   Task 44 static render, desktop + phone). */
.hrow__content { margin-top: var(--space-2); color: var(--color-text-primary); overflow-wrap: anywhere; white-space: pre-wrap; }
.hrow__message { margin-top: var(--space-2); color: var(--color-text-primary); overflow-wrap: anywhere; }
.hrow__quote { margin: var(--space-2) 0 0; padding-left: var(--space-2); border-left: 2px solid var(--color-border-secondary); color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.hrow__archived { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-style: italic; }
/* @mention, from lib/comment-format.js's formatCommentContent — a class, not
   the inline style="color:…" it used to carry (ruling R4 allows only the
   --place-color custom-property value as an inline style). */
.hrow__mention { color: var(--color-secondary); font-weight: 500; }
.hrow__files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hrow__file { font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.hrow__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.hrow__act { min-height: 32px; padding: 0 var(--space-3); border-radius: var(--border-radius); border: 1px solid var(--color-border-secondary); background: transparent; color: var(--color-text-secondary); cursor: pointer; }

/* Heads for the history pages (Tasks 45-47): the account history page, the
   project Activity tab, the work page's Change Log section, and the
   "History" link in the account header. */
.history-page { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: 960px; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }
.page-head__back { flex: 1 1 100%; color: var(--color-text-secondary); font-size: var(--font-size-sm); text-decoration: none; overflow-wrap: anywhere; }
.page-head__back:hover { color: var(--color-text-primary); text-decoration: underline; }
.page-head__title { margin: 0; font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text-primary); }
.page-head--section .page-head__title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.page-head__link { font-size: var(--font-size-sm); color: var(--color-primary); }
.page-head__error { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius); color: var(--color-text-secondary); }
.addon-section[data-testid="change-log"] { margin-top: var(--space-4); }
.addon-section__title { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.history-link { display: inline-flex; align-items: center; padding: 0 var(--space-2); border: 1px solid var(--color-border-secondary); border-radius: 999px;
  font-size: var(--font-size-xs); color: var(--color-text-secondary); text-decoration: none; }
.history-link:hover { color: var(--color-text-primary); border-color: var(--color-border-primary); }

@media (max-width: 767px) {
  .page-head__back, .page-head__link, .history-link { display: inline-flex; align-items: center; min-height: 44px; }
  .history-link { padding: 0 var(--space-3); border-radius: var(--border-radius); }
  .history-page { padding: var(--space-3); }
  .inbox-tab-strip--scroll a { min-height: 44px; display: inline-flex !important; align-items: center; }
  .hlist__filters { flex-direction: column; align-items: stretch; }           /* two rows: type toggle, then the band */
  .hseg > button, .hband__pill, .hlist__more, .hrow__act, .hlist__showall, .hlist__date input, .hlist__otype { min-height: 44px; }
  .hseg { width: 100%; } .hseg > button { flex: 1 1 0; }
  .hlist__date { width: 100%; } .hlist__date input { flex: 1 1 auto; min-width: 0; }
  .hrow { padding: var(--space-3); }
  /* The headline jump link and a file link are tap targets too (global
     constraint: 44px on phones). Both are flex items (of .hrow__head /
     .hrow__files, both display:flex), so min-height applies directly —
     inline-flex + centering keeps the (usually one-line) text from sitting
     at the top of the taller box. */
  a.hrow__headline, .hrow__file { display: inline-flex; align-items: center; min-height: 44px; }
}