/*
 * History's one row (history-line.js), on Home and on the History page (the Founder, 7 October 2026, 22:40):
 * the category icon, then line 1 (who, muted and regular, the time at its right on the same baseline) and line 2
 * (what happened, up to two lines on a phone, one on desktop), the chevron centred on the row. One ink for every row.
 *
 * On Home the rows sit on the Agent Crew's grid: a crew row is 2px of border and 11px of padding around a 44px face
 * with its name 12px after it (agent-row.css, home-details.css), so a History row is 13px of padding around a 44px
 * icon with its words 12px after it. The tests measure both (terminal-history.test.mjs).
 */
.history-list{list-style:none;margin:0;padding:0}
.history-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto 16px;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:baseline;padding:13px;color:inherit;text-decoration:none;min-width:0}
.history-row:hover,.history-row:hover .history-what{color:inherit}
.history-row:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;border-radius:12px}
.history-icon{grid-column:1;grid-row:1/3;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--purple)}
.history-icon>.icon{width:22px;height:22px}
.history-who{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:18px;font-weight:400;color:var(--muted)}
.history-times{flex:none;padding:0 6px;border-radius:999px;background:var(--soft);color:var(--purple);font-size:12px;font-weight:600}
.history-when{grid-column:3;grid-row:1;font-size:13px;line-height:18px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.history-what{grid-column:2/4;grid-row:2;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:21px;font-weight:500;color:inherit}
.history-row>.icon:last-child{grid-column:4;grid-row:1/3;align-self:center;width:16px;height:16px;color:var(--muted)}

/* Home: the rows are the card's own width, parted by a hairline as before. */
[data-home-history] .history-list>li{margin:0;padding:0;border-top:1px solid var(--line)}
[data-home-history] .history-list>li:first-child{border-top:0}

/* The History page: the card keeps its 20px sides; the rows' sides are the card's. */
.activity-events.history-list{padding:0 20px}
.activity-events>.history-row{padding:13px 0}
.activity-events>.history-row+.history-row{border-top:1px solid var(--line)}
.history-end{display:flex;justify-content:center;margin:20px 0 8px;text-align:center}
p.history-end{display:block;color:var(--muted)}
.event-detail .history-icon{width:36px;height:36px;border-radius:10px}
.event-detail .history-icon>.icon{width:18px;height:18px}

@media(max-width:699px){
 .history-what{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
}

/*
 * The filter area (the Founder, 17 October 2026): the search field and the Filter button on one line; Filter opens the
 * filter choices under them (two columns on a phone); then the count and Clear filters. The button's count badge sits on
 * its corner and takes no room, so choosing a filter moves nothing.
 */
.history-filter{gap:12px;padding:16px}
.history-bar{display:flex;align-items:center;gap:10px;min-width:0}
.history-search{position:relative;display:block;flex:1;min-width:0}
.history-search>.icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.history-search>input{width:100%;min-height:46px;padding-inline-start:40px}
.history-filter-open{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#24212d);font-weight:600;font-size:.875rem;cursor:pointer}
.history-filter-open .icon{width:20px;height:20px}
.history-filter-open.on,.history-filter-open[aria-expanded="true"]{background:var(--soft,#f2ecfa);color:var(--purple,#6d28b5);border-color:#cdb4ec}
.history-filter-count{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--purple,#6d28b5);color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.history-filter-count[hidden]{display:none}
.history-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}
.history-filters[hidden]{display:none}
.history-filters[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.history-filters[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.activity-filter-card .history-filters>label{gap:4px;font-size:12px;line-height:16px;font-weight:500}
.history-filters select{width:100%;min-width:0;min-height:40px;padding-block:6px;font-size:14px}
.history-count{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.history-count>p{margin:0;font-size:13px;min-width:0}
.history-count>.text-button{flex:none;font-size:13px}
@media(max-width:699px){
 .history-filters,.history-filters[data-count]{grid-template-columns:repeat(2,minmax(0,1fr))}
 .history-filters[data-count="3"]>label:first-child{grid-column:1/-1}
}

/* The event's page: its icon, its type and its time on one line; then Subject, Performed by and Where. */
.event-head{display:flex;align-items:center;gap:10px;min-width:0}
.event-type{font-size:15px;font-weight:600}
.event-head>.meta{margin-inline-start:auto;white-space:nowrap}
.event-detail .event-facts{grid-template-columns:minmax(96px,max-content) minmax(0,1fr);column-gap:16px}
.event-facts>[data-event-subject]{font-weight:600}