/* The Rules screen (D2 Task 25), from Rules.dc.html (approved 05/11). Every colour is a token: the draft chip is the unknown chip, the info
   line the brand's soft tint, Decline the fail ink and Flag the unknown ink of the segments. The card, the buttons, the fields, the
   segments and the switch are components.css; motion is the base sheet's to turn off. Listed in STYLESHEETS (src/web/routes-pages.js),
   after deal.css. */

.rlRoot { padding: 28px 32px 64px; }
.rlWrap { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin: 0 auto; }

/* ---- The header and the draft bar ---- */
.rlHead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rlTitle { flex: 1 1 280px; min-width: 0; }
.rlTitle h1 { margin: 0; font: 600 26px var(--font-head); letter-spacing: -0.015em; }
.rlSub { color: var(--ink-3); font-size: 13.5px; }
.rlClean { color: var(--ink-3); font-size: 13px; }
.rlHead .btn { border-radius: var(--r-lg); }
.rlHead .btn.primary { padding: 0 20px; }
.rlPublishOff, .rlPublishOff:disabled { padding: 0 20px; background: var(--line); color: var(--ink-3); opacity: 1; }

/* ---- The info line (also a refusal of the set that names no rule) ---- */
.rlInfo { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border: 1px solid var(--brand-tint); border-radius: var(--r-lg); background: var(--brand-soft); color: var(--ink-2); font-size: 13.5px; }
.rlInfoIcon { flex: none; margin-top: 2px; color: var(--brand); }
.rlGeneral { border-color: var(--fail-bg); background: var(--fail-bg); color: var(--fail-ink); }
.rlGeneral .rlInfoIcon { color: var(--fail-ink); }

/* ---- The cards ---- */
.rlProgramsHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 2px 0; }
.rlProgramsHead h2 { margin: 0; font: 600 18px var(--font-head); }
.rlProgramsHead span { color: var(--ink-3); font-size: 13px; }
.rlCard { display: flex; flex-direction: column; animation-delay: var(--rl-delay, 0s); }
.rlCardHead { padding: 16px 20px 12px; }
.rlCardHead h3 { margin: 0; font: 600 16px var(--font-head); }
.rlCardSub { color: var(--ink-3); font-size: 13px; }
.rlScroll { overflow-x: auto; }
.rlTable { min-width: 720px; }
.rlCols, .rlRow { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.9fr) minmax(0, 1.1fr) 56px; gap: 16px; padding: 0 20px; border-top: 1px solid var(--line-soft); }
.rlCols { padding-top: 6px; padding-bottom: 6px; color: var(--ink-3); font-size: 12px; }
.rlColOn { text-align: center; }

/* ---- A rule ---- */
.rlRow { align-items: center; padding-top: 10px; padding-bottom: 10px; transition: background var(--t-hover), opacity var(--t-ui); }
.rlRow:hover { background: var(--surface-2); }
.rlOff { opacity: .55; }
.rlName { min-width: 0; }
.rlRuleName { font-weight: 600; }
.rlMetric { color: var(--ink-3); font-size: 12.5px; }
.rlCond { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rlFixed { color: var(--ink-2); font-size: 13px; }
.rlOp { flex: 0 0 118px; width: 118px; height: 40px; padding: 0 8px; }
.rlVal { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; height: 40px; padding: 0 10px; }
.rlVal:focus-within { border-color: var(--brand-line); box-shadow: var(--sh-ring); }
.rlValOff { background: var(--field-off); }
.rlPre, .rlUnit { color: var(--ink-3); }
.rlUnit { font-size: 13px; white-space: nowrap; }
.rlInput { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 600 14px var(--font-body); }
.rlInput:disabled { color: var(--ink-3); }
.rlSegs { padding: 3px; gap: 3px; border-radius: var(--r-md); }
.rlSeg { min-height: 38px; border: 0; background: transparent; font: 600 12.5px var(--font-body); }
.rlSeg:disabled { cursor: not-allowed; }
.rlDecline.segOn { color: var(--fail-ink); }
.rlFlag.segOn { color: var(--unknown-ink); }
.rlSw { justify-self: center; }
.rlSw input:disabled { cursor: not-allowed; }
.rlRowError { grid-column: 1 / -1; margin-top: -2px; color: var(--fail-ink); font-size: 12.5px; }

.rlFoot { padding: 2px; color: var(--ink-3); font-size: 13px; }

@media (max-width: 600px) {
  .rlRoot { padding: 20px 16px 48px; }
}