/* Daily Life Doc, round 9, round 10 (zone R): the page Rules (js/flow/rules-page.js, rules-switches.js,
   rules-row.js) and a rule's page (rules-rule.js). Round 10: Allowed is six switches; the sheets are gone.
   A text document of calm sections: a quiet heading, one white area of rows, no boxes around single lines. One type
   scale (the tokens --t-* of css/base.css); every change moves with the tokens --m-* (a new rule rises in, a status
   cross-fades, the switch slides, Next run glows once). Red only where nothing runs: a reason, a late run, and the
   warning (the page's red tint, the tokens --bad-bg / --bad-d) while schedules have stopped running. */

/* ---- The page: the patient's name, the warning, three sections ---- */
.rl-name { padding: 0 2px; font-size: var(--t-s); font-weight: 500; line-height: 1.4; color: var(--ink2); }
.rl-warn { margin-top: 12px; padding: 12px 16px 13px; border-radius: 18px; background: var(--bad-bg); color: var(--bad-d); }
.rl-warn[hidden] { display: none; }
.rl-warn b { display: block; font-size: var(--t-s); font-weight: 600; line-height: 1.4; }
.rl-warn > span { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.45; opacity: .86; }
/* The care team's own time in the warning: the warning's own colour, quieter (never the grey of a white row). */
.rl-warn .rl-mine { color: inherit; opacity: .78; }
.rl-sec { margin-top: 22px; }
.rl-sec[hidden] { display: none; }
.rl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 2px; }
.rl-h h2 { margin: 0; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.rl-new { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--t-s); font-weight: 600; color: var(--ink);
  transition: opacity var(--m-press) ease; }
.rl-new::before { content: '+'; font-size: 18px; font-weight: 400; line-height: 1; color: var(--ink2); }
.rl-new::after { content: ''; position: absolute; inset: -4px -10px; }
.rl-new:active { opacity: .55; }
.rl-card { margin-top: 6px; padding: 2px 18px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.rl-card[hidden] { display: none; }

/* ---- A rule of When … then … or Schedules: the sentence, the reading, the status, the switch ---- */
.rl-rule { position: relative; }
.rl-rule + .rl-rule { border-top: 1px solid var(--line); }
.rl-open { display: block; width: 100%; padding: 14px 58px 15px 0; text-align: left; transition: opacity var(--m-press) ease; }
.rl-open:active { opacity: .6; }
.rl-text, .rl-read, .rl-st, .rl-last { display: block; overflow-wrap: anywhere; }
.rl-text { font-size: var(--t-m); font-weight: 500; line-height: 1.45; color: var(--ink); }
.rl-at { padding: 0 3px; margin: 0 -1px; border-radius: 6px; background: var(--tint); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rl-read { margin-top: 4px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); }
/* F4: a rule that changes the theme is said once, by its reading, which then stands as the row's words. */
.rl-text:empty + .rl-read { margin-top: 0; font-size: var(--t-m); font-weight: 500; color: var(--ink); }
.rl-st { margin-top: 7px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); }
.rl-st b { font-weight: 600; color: var(--ink); }
.rl-dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 1px; border-radius: 50%; background: var(--good); vertical-align: middle; transition: background-color var(--m-step) ease; }
.rl-st[data-code="paused"] .rl-dot, .rl-st[data-code="finished"] .rl-dot, .rl-st[data-code="stopped"] .rl-dot, .rl-st[data-code="nozone"] .rl-dot { background: var(--ink3); }
.rl-st.red, .rl-st.red b { color: var(--bad); }
.rl-st.red .rl-dot { background: var(--bad); }
.rl-next { border-radius: 6px; }
.rl-next.late { color: var(--bad); font-weight: 600; }
/* The care team's own time beside the patient's ("· 11:00 PM yours"), quieter, only where the two clocks differ. */
.rl-mine { font-weight: 400; color: var(--ink3); white-space: nowrap; }
.rl-last { margin-top: 1px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); }
.rl-rule.stopped .rl-open { opacity: .55; }
.rl-rule.stopped .rl-at { background: none; }
[hidden].rl-read, [hidden].rl-last, [hidden].rl-st { display: none; }

/* The switch: off means Paused. It slides; the status beside it cross-fades. */
.rl-sw { position: absolute; top: 12px; right: 0; width: 50px; height: 44px; display: grid; place-items: center end; }
.rl-sw[hidden] { display: none; }
.rl-sw i { position: relative; width: 46px; height: 28px; border-radius: 14px; background: color-mix(in srgb, var(--ink3) 38%, var(--soft)); transition: background-color var(--m-step) ease; }
.rl-sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px var(--scrim);
  transition: transform var(--m-step) var(--ease-out); }
.rl-sw[aria-checked="true"] i { background: var(--good); }
.rl-sw[aria-checked="true"] i::after { transform: translateX(18px); }
.rl-sw:active i::after { width: 26px; }
.rl-sw[aria-checked="true"]:active i::after { transform: translateX(14px); }
.rl-in { animation: rl-in var(--m-add) var(--ease-out) both; }
@keyframes rl-in { from { opacity: 0; transform: translateY(3px); } }

/* ---- Allowed: six switches, each with its name and one sentence ---- */
.rl-count { font-size: var(--t-sm); font-weight: 500; color: var(--ink2); }
.rl-count .num { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rl-about { margin: -2px 2px 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); }
.rl-allow { display: flex; align-items: center; gap: 14px; padding: 12px 0 13px; }
.rl-allow + .rl-allow { border-top: 1px solid var(--line); }
.rl-an { flex: 1; min-width: 0; }
.rl-an b { display: block; font-size: var(--t-m); font-weight: 600; line-height: 1.35; }
.rl-an small { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.rl-allow .rl-sw { position: static; flex: none; }
.rl-none { margin: 6px 2px 0; font-size: var(--t-s); line-height: 1.45; color: var(--ink2); }
.rl-none[hidden] { display: none; }
/* Edit and Delete at the bottom right of a row (fixer H3: Edit opens the rule's parts). */
.rl-rule .rl-acts { display: flex; justify-content: flex-end; gap: 14px; margin-top: -8px; padding-bottom: 6px; }
.rl-rule .rl-del { min-height: 36px; padding: 0 2px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); transition: color var(--m-step) ease, opacity var(--m-press) ease; }
.rl-rule .rl-del:active { color: var(--bad); opacity: .7; }
.rl-rule .rl-open { padding-bottom: 6px; }

/* ---- A rule's page: the head, Recent runs ---- */
.rl-one .rl-head { margin-top: 2px; padding: 16px 18px 14px; }
.rl-big { margin: 0; font-size: var(--t-l); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.rl-head .rl-read { margin-top: 6px; }
.rl-strow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.rl-strow .rl-st { margin: 0; }
.rl-strow .rl-sw { position: static; flex: none; }
.rl-runs { padding-top: 0; padding-bottom: 0; }
.rl-run { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; width: 100%; padding: 12px 0 13px; text-align: left; transition: opacity var(--m-press) ease; }
.rl-run + .rl-run { border-top: 1px solid var(--line); }
.rl-run:active:not([disabled]) { opacity: .55; }
.rl-run[disabled] { cursor: default; }
.rl-rw { grid-column: 1; font-size: var(--t-sm); font-weight: 600; line-height: 1.45; color: var(--ink2); }
.rl-rr { grid-column: 1; font-size: var(--t-s); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.rl-rr.warn { color: var(--bad); }
.rl-chev { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; color: var(--ink3); }
.rl-chev svg { width: 16px; height: 16px; }
.rl-rise { animation: dd-rise var(--m-add) var(--ease-out) both; }
.rl-older { min-height: 44px; margin-top: 4px; padding: 0 2px; font-size: var(--t-s); font-weight: 600; color: var(--ink2); }
.rl-older[hidden] { display: none; }
.rl-acts { display: flex; gap: 6px; }
/* The rule's parts open to change on the rule's page (js/flow/rules-edit.js): the card's tint, the page's width. */
.pc.rl-pe { max-width: none; margin-top: 2px; padding: 8px 18px 16px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.pc.rl-pe .pc-rule { padding: 8px 0; background: none; }
.rl-edit { min-height: 40px; padding: 0 4px; font-size: var(--t-s); font-weight: 600; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .rl-in, .rl-rise { animation: none; }
  .rl-sw i, .rl-sw i::after, .rl-dot { transition: none; }
}