/* Visual rulebook. Isolated from score-entry tiles and the persistent admin shell. */
.rv-page{max-width:1240px;--rv-accent:#24583e;--rv-soft:#e7ede0;color:#233d32}
.rv-page[data-ruleset="hk_new18"]{--rv-accent:#17675f;--rv-soft:#e3eeea}
.rv-page[data-ruleset="mcr"]{--rv-accent:#315d83;--rv-soft:#e5edf4}
.rv-page .page-heading{margin-bottom:24px}
.rv-page button,.rv-page a,.rv-page input{font-size:16px}
.rv-page h2{font-size:26px;letter-spacing:-.035em;line-height:1.25;margin:8px 0 12px}
.rv-page h3{font-size:18px;line-height:1.35;letter-spacing:-.025em;margin:0}
.rv-page p{line-height:1.65}
.rv-systems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rv-systems :is(a,button){display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;border-radius:12px;background:#fffdf7;color:#496052;text-decoration:none;border:1px solid #d8dfd2;font-weight:650}
.rv-systems :is(a,button).selected{background:var(--rv-accent);color:#fffcef;border-color:var(--rv-accent)}
.rv-system-mark{font-family:serif;font-size:26px;line-height:1}
.rv-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 0 26px;padding:0 2px;color:#596b5e;font-size:16px}
.rv-summary p{margin:0}
.rv-summary strong{color:var(--rv-accent)}
.rv-toolbar{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}
.rv-categories{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #d9dfd3;padding-bottom:14px}
.rv-categories button{border:0;background:transparent;color:#536459;min-height:44px;padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer}
.rv-categories button[aria-pressed="true"]{background:var(--rv-soft);color:var(--rv-accent)}
.rv-search{position:relative;display:flex;align-items:center;margin:0}
.rv-search>.icon{position:absolute;left:16px;width:20px;height:20px;pointer-events:none;color:#718173}
.rv-search input{width:100%;min-width:0;background:#fffdf8;border:1px solid #c7d1c0;border-radius:10px;padding:14px 44px;height:54px;color:#233d32}
.rv-kicker{font-size:16px;font-weight:650;letter-spacing:.1em;color:var(--rv-accent)}
.rv-lesson{background:var(--rv-soft);padding:28px 30px;border-radius:16px}
.rv-lesson-copy{max-width:720px}
.rv-lesson-copy p{margin:0 0 22px}
.rv-lesson h2{font-size:32px}
.rv-example{padding:4px 0 0}
.rv-hand{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 20px;padding:10px 0}
.rv-group{display:flex;flex-direction:column;gap:12px;min-width:0}
.rv-group-tiles{display:flex;gap:3px;align-items:center}
.rv-tile{display:inline-block;position:relative;flex:none;width:38px;height:50px;vertical-align:middle;background:#fffdf2;border:1px solid #8d9c87;border-radius:5px;box-shadow:0 3px 0 #b4bea4,0 4px 0 #7a8c72,0 7px 8px #1d352519;color:#224f39}
.rv-tile svg{width:100%;height:100%;display:block}
.rv-tile .tile-number{font-size:21px;fill:#28516d;text-anchor:middle;font-family:serif}
.rv-tile .tile-character{font-size:22px;fill:#a4352d;text-anchor:middle;font-family:serif}
.rv-tile .tile-honor{font-size:36px;fill:#205a47;text-anchor:middle;font-family:serif}
.rv-tile .tile-honor.red{fill:#a4352d}
.rv-group-label{font-size:16px;color:#516251;text-align:center}
.rv-lesson .rv-tile{width:43px;height:57px}
.rv-example-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;color:#627060;font-size:16px}
.rv-play{display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:44px;background:transparent;border:0;padding:8px 0;color:var(--rv-accent);font-weight:650;cursor:pointer}
.rv-play>span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fffdf6;font-size:22px;box-shadow:0 1px 4px #18392818}
.rv-play:hover{text-decoration:underline;text-underline-offset:4px}
.rv-page :is(a,button,input):focus-visible{outline:3px solid #b48b37;outline-offset:3px}
.rv-lesson-note{border-top:1px solid #18392822;padding-top:16px;margin:14px 0 0;font-size:16px;color:#4c6052}
.rv-basics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:32px 0 30px;border-bottom:1px solid #d5ddcf}
.rv-basics article{min-width:0}
.rv-basics .rv-hand{min-height:72px}
.rv-basics p{font-size:16px;margin:10px 0 0}
.rv-muted{color:#657261}
.rv-section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:34px 0 8px}
.rv-section-heading p{color:#63725f;max-width:300px;margin-bottom:12px}
.rv-family{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #dce2d6}
.rv-family p{max-width:350px;color:#63725f;margin:9px 0 0;font-size:16px}
.rv-alias{display:inline-block;font-size:16px;color:#7b806b;margin-top:4px}
.rv-family-tiles{display:flex;gap:7px;flex-wrap:wrap;padding:5px 0 8px}
.rv-family-tiles .rv-tile{width:42px;height:56px}
.rv-result-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.rv-result-count{margin:0;color:#5d6b5b;font-size:16px}
.rv-pattern-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:0}
.rv-pattern{padding:25px 0 24px;min-width:0;border-bottom:1px solid #d4ddcf}
.rv-pattern-head{display:flex;justify-content:space-between;align-items:start;gap:18px}
.rv-pattern h3{font-size:20px}
.rv-pattern-title{color:var(--rv-accent);font-size:16px;margin:6px 0 0}
.rv-value{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;min-height:64px;padding:8px 12px;background:var(--rv-soft);color:var(--rv-accent);border-radius:10px;line-height:1.2}
.rv-value strong{font-size:26px;font-variant-numeric:tabular-nums}
.rv-value span{font-size:16px;margin-top:3px}
.rv-description{font-size:16px;color:#536352;margin:15px 0 12px}
.rv-pattern .rv-hand{gap:14px 12px}
.rv-pattern .rv-tile{width:32px;height:43px}
.rv-pattern .rv-example-foot{margin-top:10px}
.rv-flow{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:18px 0}
.rv-flow li{display:flex;gap:8px;align-items:center;max-width:100%;font-size:16px;color:#566750}
.rv-flow b{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:var(--rv-soft);color:var(--rv-accent);font-size:16px}
.rv-no-results{padding:32px 0;color:#62735b}
.rv-footnote{display:flex;gap:14px;align-items:start;padding:26px 0;color:#697460}
.rv-footnote>.icon{flex:none;width:22px;height:22px;margin-top:4px}
.rv-footnote p{font-size:16px;margin:0}
.rv-page [hidden]{display:none!important}
@media(min-width:1150px){.rv-lesson .rv-hand{justify-content:space-between;gap:20px}.rv-lesson .rv-tile{width:48px;height:63px}}
@media(max-width:1100px){.rv-basics{grid-template-columns:repeat(2,minmax(0,1fr))}.rv-summary{align-items:start;flex-direction:column;gap:4px}.rv-family{grid-template-columns:1fr;gap:12px}.rv-family p{max-width:none}.rv-family-tiles .rv-tile{width:44px;height:58px}}
@media(max-width:700px){.rv-pattern-list{grid-template-columns:1fr}.rv-lesson{padding:22px 18px}.rv-systems{gap:6px}.rv-systems :is(a,button){gap:7px;flex-direction:column;padding:10px 5px;line-height:1.25;text-align:center;min-height:78px}.rv-system-mark{font-size:23px}.rv-categories{gap:4px}.rv-categories button{padding:9px 11px}.rv-lesson h2{font-size:28px}.rv-lesson .rv-tile{width:36px;height:48px}.rv-section-heading{align-items:start;flex-direction:column;gap:0}.rv-section-heading p{max-width:none;margin:0 0 8px}.rv-family-tiles{gap:6px}.rv-family-tiles .rv-tile{width:40px;height:53px}.rv-pattern .rv-tile{width:34px;height:45px}.rv-basics{gap:26px 20px}.rv-basics .rv-tile{width:29px;height:39px}.rv-basics h3{font-size:18px}.rv-basics .rv-hand{min-height:58px}.rv-summary{margin:14px 0 20px}.rv-play{font-size:16px}.rv-result-bar{align-items:start}}
@media(prefers-reduced-motion:reduce){.rv-page *{scroll-behavior:auto!important}}

.rv-scoring{padding:18px 0;border-top:1px solid #d5ddcf;margin-bottom:20px;font-size:16px}
.rv-scoring summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:600;color:var(--rv-accent)}
.rv-scoring-body{max-width:780px;line-height:1.7;padding:8px 0 12px;color:#536352}
@media(max-width:700px){.rv-page .page-heading{margin-bottom:18px}.rv-toolbar{gap:12px}.rv-categories{padding-bottom:10px}.rv-page .rv-summary{margin-bottom:14px}.rv-pattern{padding-top:18px}}

/* Welcome overlay: one fixed header, one scrolling content area. */
.welcome-card button.welcome-rules{width:100%;background:transparent;color:#334d38;padding:10px 14px;cursor:pointer}
.welcome-card button.welcome-rules:hover{background:#e9eddf}
dialog.rules-modal{width:min(1040px,calc(100vw - 40px));max-width:none;height:min(860px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:20px;overflow:hidden;background:#f7f6ef;box-shadow:0 24px 90px #071e3270}
dialog.rules-modal[open]{display:flex;flex-direction:column}
dialog.rules-modal::backdrop{background:#09251ec2;backdrop-filter:blur(6px)}
.rules-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:20px 26px;background:#faf9f3;border-bottom:1px solid #dce2d5}
.rules-modal-header h2{margin:0;font-size:26px;letter-spacing:-.035em;line-height:1.25}
.rules-modal-header p{margin:5px 0 0;font-size:16px;color:#64705c}
.rules-modal-close{width:46px;height:46px;flex:none;color:#244a37;background:transparent}
.rules-modal-close .icon{width:24px;height:24px}
.rules-modal-body{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;flex:1;padding:22px 26px 26px}
.rules-modal .rv-page{padding:0;margin:0;max-width:none;width:100%}
.rules-modal .rv-systems button{cursor:pointer;font-family:inherit}
.rules-modal .rv-systems button:focus-visible,.rules-modal-close:focus-visible{outline:3px solid #b48b37;outline-offset:3px}
.rules-modal .rv-summary{flex-direction:column;align-items:start;gap:4px;margin:14px 0 20px}
.rules-modal .rv-toolbar{gap:14px;margin-bottom:20px}
.rules-modal .rv-lesson{padding:24px}
.rules-modal .rv-lesson .rv-hand{justify-content:flex-start;gap:16px}
.rules-modal .rv-lesson .rv-tile{width:40px;height:53px}
.rules-modal .rv-lesson h2{font-size:28px}
.rules-modal .rv-basics{grid-template-columns:repeat(2,minmax(0,1fr))}
.rules-modal-loading,.rules-modal-error{padding:40px 12px;text-align:center;font-size:16px}
.rules-modal-loading .spinner{display:inline-block}
.rules-modal-error p{max-width:460px;margin:14px auto 22px}
@media(max-width:700px){
 dialog.rules-modal{width:calc(100vw - 20px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border-radius:16px}
 .rules-modal-header{padding:14px 16px}
 .rules-modal-header h2{font-size:23px}
 .rules-modal-body{padding:16px}
 .rules-modal .rv-systems :is(a,button){min-height:64px;padding:8px 3px}
 .rules-modal .rv-system-mark{font-size:20px}
 .rules-modal .rv-categories{gap:2px}
 .rules-modal .rv-categories button{padding:8px 9px}
 .rules-modal .rv-lesson{padding:18px 14px}
 .rules-modal .rv-lesson .rv-tile{width:34px;height:45px}
 .rules-modal .rv-family-tiles .rv-tile{width:37px;height:49px}
 .rules-modal .rv-lesson .rv-hand{gap:18px 12px}
 .rules-modal .rv-pattern-list{grid-template-columns:1fr}
 .rules-modal .rv-family{grid-template-columns:1fr}
 .rules-modal .rv-example-foot{gap:4px}
}

@media(max-width:380px){.rules-modal .rv-basics{grid-template-columns:1fr}.rules-modal .rv-basics .rv-tile{width:36px;height:48px}}

/* Compact controls: the active system already names the selected rules. */
.rv-page .rv-summary{margin:10px 0 12px;gap:0}
.rv-page .rv-toolbar{gap:12px;margin-bottom:14px}
.rv-page .rv-categories{padding-bottom:10px}
.rv-page .rv-result-bar{margin-bottom:4px}
.rv-page .rv-pattern{padding-top:18px}
@media(max-width:700px){
 .rv-page .rv-systems :is(a,button){min-height:64px;padding:8px 4px;gap:4px}
 .rv-page .rv-summary{margin:10px 0}
 .rv-page .rv-toolbar{gap:10px}
 .rv-page .rv-categories{padding-bottom:8px}
}