/* The rule library (templates/partials/rule_library.html), on the public /rules page and
   under a trader's own rules. Product colours where the app shell defines them. */
.rule-library { display: grid; gap: 1rem; }
.rule-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 1.25rem; align-items: start; padding: 1.2rem 1.25rem; border: 1px solid var(--outline-variant, #d2d2d7); border-radius: 18px; background: var(--surface, #fff); color: var(--on-surface, #1d1d1f); scroll-margin-top: 6rem; }
.rule-entry h2, .rule-entry h3 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 800; color: var(--on-surface, #1d1d1f); }
.rule-entry p { margin: .4rem 0 0; line-height: 1.55; color: var(--on-surface-variant, #424245); }
.rule-entry-result { font-weight: 650; color: var(--on-surface, #1d1d1f) !important; }
.rule-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .85rem; }
.rule-btn { min-height: 40px; padding: .5rem .95rem; border: 1px solid var(--outline-variant, #d2d2d7); border-radius: 999px; background: var(--surface, #fff); color: var(--on-surface, #1d1d1f); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.rule-btn:hover { border-color: var(--primary, #0064c8); }
.rule-btn-primary { border-color: var(--primary, #0064c8); background: var(--primary, #0064c8); color: #fff; }
.rule-btn[hidden] { display: none; }
.rule-link { font-size: .88rem; font-weight: 700; color: var(--primary, #0064c8); text-decoration: underline; text-underline-offset: 3px; }
.rule-entry-status { min-height: 1.2em; font-size: .85rem; }
.rule-entry-card { margin: 0; }
.rule-entry-card img { display: block; width: 100%; height: auto; border: 1px solid var(--outline-variant, #d2d2d7); border-radius: 12px; }
@media (max-width: 860px) { .rule-entry { grid-template-columns: 1fr; } }