/* Learnings (issue 3496): the rule card of Figma 42:9980, drawn in the
 * repository settings modal's Learnings row (app/repo-learnings.ts) and for
 * every learning on the Learnings page (app/learnings.ts), which has no frame
 * of its own: there the card keeps every flag, meta field and action. Tokens only.
 *
 * Deviations: "Permanent rule" is --success-fg and "Expiring" --danger-fg, not
 * Figma's #059669 / #ef4444 (3.8:1 and 3.5:1 at 11px, under AA); Configure is
 * --primary-text, not #15835e. A pinned card is --surface-raised (#fafafa), not
 * #f9fafb. Proposed, not in Figma: "Expiring" is red only within 7 days; the
 * linked card's ring on the Learnings page.
 */

/* ---- The rule card (42:10867): 8 radius, 14 12 12, pin then text at 41px ---- */
.rule-cards, .learning-list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.rule-card, li.learning {
  min-width: 0; padding: 14px 12px 12px; background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius);
}
.rule-card, li.learning[data-learning-id] { display: flex; align-items: flex-start; gap: 17px; }
.rule-card[data-pinned], li.learning[data-pinned] { background: var(--surface-raised); }
.rule-card-pin { display: inline-grid; place-items: center; flex: none; width: 12px; height: 16px; color: var(--fg-subtle); }
[data-pinned] > .rule-card-pin { color: var(--brand); }
[data-pinned] > .rule-card-pin svg { fill: currentColor; }
.rule-card-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.rule-card-title, li.learning .learning-text { margin: 0; font: 600 13px/16px var(--font-sans); color: var(--fg-strong); overflow-wrap: anywhere; }
.rule-card-body { margin: 2px 0 0; font: 400 11px/14px var(--font-sans); color: var(--fg-muted); overflow-wrap: anywhere; }
.rule-card-body::first-letter { text-transform: uppercase; }
.rule-card-main > .learning-flags { margin: var(--space-1) 0 0; }
.rule-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.rule-card-status { flex: 1 1 auto; min-width: 0; font: 400 11px/18px var(--font-mono); color: var(--fg-muted); }
.rule-card-status[data-tone="success"] { color: var(--success-fg); }
.rule-card-status[data-tone="danger"] { color: var(--danger-fg); }
.rule-card-link { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 700 11px/16px var(--font-sans); color: var(--primary-text); text-decoration: none; border-radius: var(--radius-sm); }
.rule-card-link:hover { text-decoration: underline; }
.rule-card-link:focus-visible, .rule-cards-all:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The footnote (42:10937) and the way to the page, below the cards at the same 8px. */
#repo-learnings-cards { display: grid; gap: var(--space-2); min-width: 0; }
.rule-cards-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; font: 400 11px/1.5 var(--font-sans); color: var(--fg-muted); }
.rule-cards-note svg { flex: none; margin-top: 3px; }
.rule-cards-all { justify-self: start; font: 700 11px/16px var(--font-sans); color: var(--primary-text); }

/* ---- The Learnings page: tabs, add form, actions, the linked card, context ---- */
.learnings-tabs { width: max-content; max-width: 100%; margin: 0 0 var(--space-3); }
.learnings-tabs .ui-segment[aria-selected="true"] { background: var(--surface-sunken); color: var(--fg); font-weight: 600; }
.learnings-tabs .count { margin-left: var(--space-1); font-variant-numeric: tabular-nums; }
.learning-list { margin-top: var(--space-2); }
.learning-list > li:not(.learning) { padding: var(--space-1) 0; }
.learning-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-1); }
.learning-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.learning-actions .choice { margin: 0; }
li.learning[data-linked] { outline: 2px solid var(--focus); outline-offset: 2px; }
.learning-add { display: grid; gap: var(--space-2); justify-items: start; margin: var(--space-3) 0; }
.learning-add textarea, .learning textarea, .learning input[type="text"], .learning-context textarea { width: 100%; }
.learning .choice { margin: var(--space-1) 0; }
.learning-context { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.learning-context textarea { font-family: var(--font-sans); }