/* 1765 Regina — The Regina Rule (tool-specific styles; everything else comes from kit.css).
   Scoped under .rk-tool--rule (sheets wrap their body in the same class). Motion: transform/opacity only. */

.rk-tool--rule { --rr-gap: 18px; }
.rk-tool--rule .rr-body > * + * { margin-top: 0; }
.rk-tool--rule .rr-view { padding-top: 6px; }
.rk-tool--rule .rk-seg { margin-bottom: 22px; }
.rk-tool--rule .rr-small { font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.rk-tool--rule .rr-stack { flex-direction: column; margin: 6px 0 14px; }
.rk-tool--rule .rr-privacy { display: flex; gap: 8px; align-items: flex-start; }
.rk-tool--rule .rr-privacy .rk-icon { margin-top: 3px; color: var(--rk-gold); }
.rk-tool--rule .rr-threshold { padding: 4px 0 8px; }
.rk-tool--rule .rr-h3 { font: 600 20px/1.25 var(--rk-f-display); margin: 0; color: var(--rk-ink); }
.rk-tool--rule .rr-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.rk-tool--rule .rr-count { font: 600 10.5px/1.3 var(--rk-f-inscr); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-ink-mute); white-space: nowrap; }
.rk-tool--rule .rr-note { margin: -6px 0 20px; padding: 12px 16px; border-left: 2px solid var(--rk-gold); background: color-mix(in srgb, var(--rk-gold) 7%, transparent); border-radius: 0 var(--rk-r2) var(--rk-r2) 0; font: italic 500 18px/1.45 var(--rk-f-display); color: var(--rk-ink); }

/* ---------- checklist rows ---------- */
.rk-tool--rule .rr-list { margin-bottom: 18px; }
.rk-tool--rule .rr-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 8px; }
.rk-tool--rule .rr-row.is-optional { background: color-mix(in srgb, var(--rk-blue) 10%, transparent); }
.rk-tool--rule .rr-check { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.rk-tool--rule .rr-box { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rk-line-gold-2); color: transparent; background: transparent; transition: transform 90ms var(--rk-ease); }
.rk-tool--rule .rr-check.is-pressed .rr-box { transform: scale(0.88); }
.rk-tool--rule .rr-check[aria-checked="true"] .rr-box { background: var(--rk-btn-bg); border-color: transparent; color: var(--rk-btn-ink); }
.rk-tool--rule .rr-main { flex: 1; min-width: 0; padding-top: 2px; }
.rk-tool--rule .rr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 17.5px; line-height: 1.3; color: var(--rk-ink); }
.rk-tool--rule .rr-ico { color: var(--rk-gold); }
.rk-tool--rule .rr-row.is-kept .rr-title > span:not(.rr-run) { color: var(--rk-ink-dim); }
.rk-tool--rule .rr-run { font: 600 10px/1 var(--rk-f-inscr); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-gold-bright); border: 1px solid var(--rk-line-gold); border-radius: 99px; padding: 5px 8px; }
.rk-tool--rule .rr-cad { font: 600 10px/1 var(--rk-f-inscr); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-ink-mute); }
.rk-tool--rule .rr-sub { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--rk-ink-mute); }
.rk-tool--rule .rr-extra { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rk-tool--rule .rr-tag { display: inline-block; font-size: 13.5px; line-height: 1.3; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--rk-line-2); color: var(--rk-ink-dim); }
.rk-tool--rule .rr-tag--auto { border-color: var(--rk-line-gold); color: var(--rk-gold-bright); }
.rk-tool--rule .rr-law { display: block; width: 100%; font-size: 14.5px; line-height: 1.45; color: var(--rk-ink-dim); border-left: 2px solid var(--rk-alert); padding-left: 10px; }
.rk-tool--rule .rr-links { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rk-tool--rule .rr-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--rk-gold-bright); font: 600 11px/1.2 var(--rk-f-inscr); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-align: left; }
.rk-tool--rule .rr-link.is-pressed { opacity: 0.7; }
.rk-tool--rule .rr-rulehow { margin-top: -6px; }
.rk-tool--rule .rr-fine { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--rk-ink-mute); }
/* storage refused: a standing notice, not a toast that fades */
.rk-tool--rule .rr-unsaved { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--rk-alert) 55%, transparent); border-radius: var(--rk-r2); background: color-mix(in srgb, var(--rk-alert) 8%, transparent); font-size: 15.5px; line-height: 1.45; color: var(--rk-ink); }
.rk-tool--rule .rr-unsaved .rk-icon { flex: none; margin-top: 2px; color: var(--rk-alert); }

/* ---------- the week strip ---------- */
.rk-tool--rule .rr-week { margin: 6px 0 22px; }
.rk-tool--rule .rr-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rk-tool--rule .rr-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 72px; padding: 8px 0; border-radius: var(--rk-r2); border: 1px solid var(--rk-line-2); background: var(--rk-surface); color: var(--rk-ink); cursor: pointer; font: inherit; transition: transform 90ms var(--rk-ease); }
.rk-tool--rule .rr-day.is-pressed { transform: scale(0.95); }
.rk-tool--rule .rr-day__w { font: 600 9.5px/1 var(--rk-f-inscr); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rk-ink-mute); }
.rk-tool--rule .rr-day__d { font: 600 21px/1.1 var(--rk-f-display); }
.rk-tool--rule .rr-day__n { font-size: 12.5px; color: var(--rk-ink-mute); font-variant-numeric: tabular-nums; }
.rk-tool--rule .rr-day.is-all { background: var(--rk-btn-bg); border-color: transparent; color: var(--rk-btn-ink); }
.rk-tool--rule .rr-day.is-all .rr-day__w, .rk-tool--rule .rr-day.is-all .rr-day__n { color: var(--rk-btn-ink); }
.rk-tool--rule .rr-day.is-some { border-color: var(--rk-gold); background: color-mix(in srgb, var(--rk-gold) 14%, var(--rk-surface)); }
.rk-tool--rule .rr-day.is-today { box-shadow: 0 0 0 2px var(--rk-bg), 0 0 0 3px var(--rk-gold-bright); }
/* a day before her rule began: not a control, drawn as an empty frame */
.rk-tool--rule .rr-day.is-before { cursor: default; background: transparent; border-style: dashed; }
.rk-tool--rule .rr-day.is-before .rr-day__d { color: var(--rk-ink-mute); }

/* ---------- cards ---------- */
.rk-tool--rule .rr-begin .rr-verse, .rk-tool--rule .rr-verse { margin: 4px 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--rk-gold); font: italic 500 18px/1.5 var(--rk-f-display); color: var(--rk-ink); }
.rk-tool--rule .rr-verse cite { display: block; font: 600 10.5px/1.4 var(--rk-f-inscr); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; color: var(--rk-ink-mute); margin-top: 6px; }
.rk-tool--rule .rr-readcard .rk-progress { margin: 12px 0 14px; }
.rk-tool--rule .rr-quiet { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 4px 0 8px; padding: 10px 4px; border: 0; border-top: 1px solid var(--rk-line); background: transparent; color: var(--rk-ink-mute); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.rk-tool--rule .rr-quiet .rk-icon { color: var(--rk-alert); }
.rk-tool--rule .rr-quiet.is-pressed { opacity: 0.7; }

/* ---------- my rule ---------- */
.rk-tool--rule .rr-rulelist { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: rr; }
.rk-tool--rule .rr-rulei { counter-increment: rr; position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--rk-line); }
.rk-tool--rule .rr-rulei::before { content: counter(rr, upper-roman); position: absolute; left: 0; top: 17px; font: 600 11px/1 var(--rk-f-inscr); letter-spacing: 0.12em; color: var(--rk-gold); }
.rk-tool--rule .rr-plan { margin: 6px 0 0; font: italic 500 18.5px/1.45 var(--rk-f-display); color: var(--rk-ink); }
.rk-tool--rule .rr-fa { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--rk-ink-mute); }
.rk-tool--rule .rr-fa__x { display: block; }
.rk-tool--rule .rr-fa__x.is-on { color: var(--rk-ink-dim); }
.rk-tool--rule .rr-fa__x.is-on::after { content: " ✓"; color: var(--rk-gold); }
.rk-tool--rule .rr-streakline { margin: 6px 0 0; font-size: 14px; color: var(--rk-gold-bright); }

/* ---------- editor ---------- */
.rk-tool--rule .rr-editlist { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 10px; }
.rk-tool--rule .rr-edit { padding: 12px 14px; border: 1px solid var(--rk-line-2); border-radius: var(--rk-r2); background: var(--rk-surface); }
/* keyboard focus must not land under the sticky save bar (or the site header) */
.rk-tool--rule .rr-edit, .rk-tool--rule .rr-edit * { scroll-margin-bottom: 170px; scroll-margin-top: 96px; }
.rk-tool--rule .rr-edit.is-on { border-color: var(--rk-line-gold-2); background: linear-gradient(180deg, var(--rk-raised), var(--rk-surface)); }
.rk-tool--rule .rr-edit__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-tool--rule .rr-edit .rk-seg { margin: 12px 0 8px; }
.rk-tool--rule .rr-edit .rk-field { margin: 12px 0 0; }
.rk-tool--rule .rr-edit .rr-plan { padding: 10px 12px; background: color-mix(in srgb, var(--rk-gold) 7%, transparent); border-radius: var(--rk-r2); margin-top: 12px; }
.rk-tool--rule .rr-onoff { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rk-line-2); background: transparent; color: var(--rk-ink-dim); font: 600 10.5px/1 var(--rk-f-inscr); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: transform 90ms var(--rk-ease); }
.rk-tool--rule .rr-onoff.is-on { border-color: var(--rk-gold); color: var(--rk-gold-bright); background: color-mix(in srgb, var(--rk-gold) 12%, transparent); }
.rk-tool--rule .rr-onoff.is-pressed { transform: scale(0.96); }
.rk-tool--rule .rr-editbar { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--rk-bg) 22%); }

/* ---------- reading ---------- */
.rk-tool--rule .rr-books .rk-item.is-on { background: color-mix(in srgb, var(--rk-gold) 9%, transparent); }
.rk-tool--rule .rr-books .rk-item.is-on .rk-item__end { color: var(--rk-gold-bright); }
.rk-tool--rule .rr-view--read .rr-h3 { margin: 18px 0 6px; }
.rk-tool--rule .rr-portions .rk-item.is-read .rk-item__icon { color: var(--rk-gold-bright); }
.rk-tool--rule .rr-portions .rk-item.is-next { background: color-mix(in srgb, var(--rk-gold) 8%, transparent); }
.rk-tool--rule .rr-reader { font-size: 18.5px; }
.rk-tool--rule .rr-place { font: 600 10.5px/1.4 var(--rk-f-inscr); letter-spacing: 0.2em; text-transform: uppercase; color: var(--rk-gold); margin: 0 0 14px; }
.rk-tool--rule .rr-cite { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rk-line); font-size: 14.5px; line-height: 1.55; color: var(--rk-ink-mute); }
.rk-tool--rule .rr-cite a, .rk-tool--rule .rr-small a { color: var(--rk-gold-bright); }
/* a note for today's reader, before the old text: quieter than the reading, never mistaken for it */
.rk-tool--rule .rr-readnote { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--rk-line); border-left: 2px solid var(--rk-gold); font-size: 15.5px; line-height: 1.55; }
.rk-tool--rule .rr-readnote p { margin: 0; }
.rk-tool--rule .rr-readnote .rk-card__label { margin-bottom: 6px; }
.rk-tool--rule .rr-readnote__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.rk-tool--rule .rr-booknote { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid var(--rk-gold); color: var(--rk-ink-dim); line-height: 1.55; }

/* ---------- review ---------- */
.rk-tool--rule .rr-stats .rk-progress { margin-bottom: 12px; }
.rk-tool--rule .rr-past { margin-top: 18px; }
.rk-tool--rule .rr-past .rr-h3 { margin-bottom: 10px; }
.rk-tool--rule .rr-pastrev { padding: 12px 16px; }

/* ---------- crisis sheet + day sheet ---------- */
.rk-tool--rule.rr-daysheet .rr-list { margin-bottom: 4px; }
.rk-tool--rule.rr-crisis .rk-crisis__title { margin-top: 0; }
/* inside a sheet the protocol needs no card of its own: one frame, the full width for the lines */
.rk-tool--rule.rr-crisis .rk-crisis { border: 0; background: transparent; padding: 0; margin: 0; }
.rk-tool--rule .rr-stats .rr-nodue .rk-progress__n { font-style: italic; }

@media (min-width: 720px) {
  .rk-tool--rule .rr-stack { flex-direction: row; }
  .rk-tool--rule .rr-stack .rk-btn--block { width: auto; flex: 1; }
  .rk-tool--rule .rr-fa__x { display: inline; }
  .rk-tool--rule .rr-fa__x + .rr-fa__x::before { content: "· "; color: var(--rk-ink-mute); }
}
@media (prefers-reduced-motion: reduce) {
  .rk-tool--rule .rr-box, .rk-tool--rule .rr-day, .rk-tool--rule .rr-onoff { transition: none; }
  .rk-tool--rule .rr-check.is-pressed .rr-box, .rk-tool--rule .rr-day.is-pressed, .rk-tool--rule .rr-onoff.is-pressed { transform: none; }
}
/* seven day cells keep a 44px target down to a 360px phone */
@media (max-width: 380px) {
  .rk-tool--rule .rr-strip { gap: 3px; }
}

/* ---------- the /rule/ page's list of anchors (outside the tool; /rule/ links this file itself) ---------- */
.prose .rr-anchors { margin: 0.4em 0 1.6em; padding: 0; counter-reset: rra; border-bottom: 1px solid var(--line); }
.prose .rr-anchors dt { counter-increment: rra; position: relative; margin: 0; padding: 18px 0 4px 44px; border-top: 1px solid var(--line); font: 600 21px/1.3 var(--f-display); color: var(--ink); }
.prose .rr-anchors dt::before { content: counter(rra, upper-roman); position: absolute; left: 0; top: 23px; font: 600 11px/1 var(--f-inscr); letter-spacing: 0.14em; color: var(--accent); }
.prose .rr-anchors dd { margin: 0; padding: 0 0 18px 44px; color: var(--ink-dim); }
@media (max-width: 480px) {
  .prose .rr-anchors dt { padding-left: 34px; }
  .prose .rr-anchors dd { padding-left: 34px; }
}
/* until the tool mounts, hold its place: the explanation below is not pushed down under her eyes */
#rg-tool[data-tool="rule"]:not(.rk-host) { min-height: 100vh; }
/* long views: the browser lays out and paints only the cards on screen (contents stay focusable and readable) */
.rk-tool--rule .rr-rulei, .rk-tool--rule .rr-edit { content-visibility: auto; contain-intrinsic-size: auto 190px; }