/* Rule cards: one rule article as the app's preset card (flag, title,
   one-line rule, chevron). Shared by the Learn index, the guides page and the
   use-case pages; the build writes the markup (rule_card in build_site.py).
   Spacing is the app's (TrackerPresetSheet): 12 between cards, 14 padding
   and corner radius, 14 between icon and text, 3 between title and rule. */
.rule-section { margin-top: 26px; }
.rule-cards, .rule-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rule-tools { margin: 18px 0 8px; }
.rule-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rule-card:hover { border-color: var(--line-strong); background: var(--bg-card-strong); }
.rule-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rule-card::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-top: 2px solid var(--muted-2, var(--muted));
  border-right: 2px solid var(--muted-2, var(--muted));
  transform: rotate(45deg);
  opacity: 0.7;
}
.rule-flag { flex: none; width: 36px; height: 25px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.rule-text { display: grid; gap: 3px; min-width: 0; }
.rule-text strong { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.rule-text span { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.rule-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.rule-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .rule-cards, .rule-tools { grid-template-columns: 1fr; } }

/* A card that is not a rule (the use-case pages' "any other limit" card)
   spans the row. */
.rule-card-wide { grid-column: 1 / -1; }
.rule-icon-plus { font-size: 1.3rem; font-weight: 500; line-height: 1; }

/* In the use-case pages' blocks, the same distance from the intro as their
   other lists. */
.hx-uc-wrap > .rule-cards { margin-top: 28px; }
.hx-uc-sub + .rule-cards { margin-top: 14px; }

/* The related cards at the foot of a Learn article. The article variants
   style `.related a` as blue text links; a card keeps the card look. */
.related .rule-cards { margin-top: 14px; }
.related a.rule-card { color: var(--text); font-size: inherit; text-decoration: none; }
/* An odd last related card spans the row instead of standing alone. */
@media (min-width: 721px) { .related .rule-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; } }