img{max-width:100%}
:root{
  --navy:#123861; --navbar:#123861; --ink:#0d1220;
  --card-title:#123861; --card-desc:#6b7280;
  --cream:#fff6ea; --green:#ccff8c;
  --radius-lg:50px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; direction:rtl; font-family:'Rubik','Heebo',Arial,sans-serif;
  color:#000; background-color:#f5f7f9; min-height:100vh;
}
.mesh{position:fixed; inset:0; z-index:-1; background:#f5f7f9}
a{color:inherit}
/* ---------- navbar ---------- */
header{
  background:var(--navbar); color:#fff; min-height:80px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:12px 40px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand b{font-weight:900; font-size:25px; line-height:35px; white-space:nowrap}
.brand .logoframe{padding:5px; border-radius:8px; display:flex}
.brand img{width:81px; height:32px; object-fit:cover; display:block}
nav{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
nav a{color:#fff; text-decoration:none; font-size:16px; line-height:25px; opacity:.7}
nav a:hover{opacity:1}
nav a.on{opacity:1; font-weight:700; line-height:20px}
.searchwrap{position:relative}
.search{
  background:#fff; border:0; border-radius:12px; width:220px;
  padding:8px 38px 8px 16px; font:inherit; font-size:14px; color:#333;
}
.search::placeholder{color:#666673}
.search:focus{outline:2px solid var(--green)}
.searchwrap svg{position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none}
.results{
  position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:380px; overflow:auto;
  background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(9,20,40,.25); z-index:50; display:none;
}
.results.open{display:block}
.results a{display:block; padding:10px 16px; text-decoration:none; border-bottom:1px solid #eef1f5}
.results a:last-child{border-bottom:0}
.results a:hover,.results a.sel{background:#f3f8ee}
.results .rt{font-weight:700; font-size:15px; color:var(--navy)}
.results .rs{font-size:12.5px; color:#6b7280; margin-top:2px}
.results .rk{font-size:11px; color:#8a93a3}
.results .none{padding:14px 16px; font-size:14px; color:#6b7280}
/* ---------- layout ---------- */
.page{max-width:1440px; margin:0 auto; padding:0 clamp(16px,3vw,60px);
      display:flex; flex-direction:column; gap:30px}
.hero{padding:50px 20px 0; text-align:center}
.hero h1{font-size:clamp(30px,4vw,45px); line-height:1.15; font-weight:900; margin:0 0 12px; text-wrap:balance; color:var(--navy)}
.hero .sub{font-size:20px; line-height:35px; opacity:.7; margin:0 auto; max-width:760px}
.crumb{margin:26px auto -16px; max-width:820px; width:100%; font-size:14px; text-align:start; color:var(--navy)}
.crumb.crumb-rule{max-width:894px}
.crumb a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.crumb a:hover{font-weight:600}
.crumb .sep{margin:0 8px; opacity:.6; direction:ltr; unicode-bidi:isolate}
.sheet{
  background:#fff;
  border-radius:var(--radius-lg); padding:clamp(28px,5vw,80px);
}
.sheet.alt{background:linear-gradient(-63deg,#fff 68%,rgba(236,208,187,.25) 103%),#fff}
.sheet.narrow{max-width:820px; width:100%; margin:0 auto; border-radius:0;
  padding:clamp(32px,6vw,72px) clamp(24px,7vw,96px)}
.sheet h2.sec{font-size:25px; font-weight:900; line-height:35px; margin:0 0 40px; text-align:right}
/* ---------- filter chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px auto 22px; max-width:1000px}
.chip{
  background:#fff; border:1px solid #fff; box-shadow:none;
  border-radius:100px; padding:8px 16px; font:inherit; font-size:14px; line-height:20px; font-weight:500;
  color:var(--navy); cursor:pointer; white-space:nowrap;
}
.chipdivider{height:1px; background:rgba(17,57,98,.14); max-width:900px; margin:0 auto 34px}
.chipcloud{max-width:940px; gap:10px; margin:0 auto}
.grouptitle{font-size:20px; font-weight:800; color:var(--navy); margin:0 0 18px; text-align:start}
.group + .group{margin-top:46px; padding-top:37px; border-top:1px solid rgba(17,57,98,.14)}
.backtop{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px; color:var(--navy); font-weight:600; font-size:15px; text-decoration:none}
.backtop:hover{text-decoration:underline}
.homebtns{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; margin-top:30px}
.homelink{display:inline; margin-top:26px; font-size:16px; font-weight:500; color:var(--navy); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.homelink .extarrow{margin-inline-start:3px; vertical-align:-2px}
.homelink:hover{text-decoration-thickness:2px}
.homebtn{display:inline-flex; align-items:center; gap:10px; background:var(--navy); color:#fff; text-decoration:none; font-weight:500; font-size:15px; line-height:1.2; padding:12px 22px; border-radius:100px; box-shadow:0 4px 16px rgba(9,20,40,.15); transition:background .15s}
.homebtn:hover{background:#0d2a48}
.homewrap{ min-height:calc(100vh - var(--headerh) - 40px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
.homewrap .hero{ padding-top:0 }
body.home .hero h1{ font-size:clamp(40px,5.5vw,62px) }
.crumb.crumb-wide{ max-width:none; width:100%; margin:26px 0 -16px; text-align:start }
/* sticky breadcrumb bar: full-bleed from the screen's left edge up to the side panel */
.crumb, .crumb.crumb-wide, .crumb.crumb-rule{
  position:sticky; top:var(--headerh); z-index:120; background:#f5f7f9;
  text-align:left; max-width:none;
  width:calc(100vw - var(--treepad)); margin-right:calc(50% - 50vw + var(--treepad) / 2); margin-left:0;
  padding:8px 24px 10px 40px; box-sizing:border-box;
  transition:width .28s ease, margin-right .28s ease }
body{ overflow-x:hidden }
.brandnav{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
/* top-nav dropdown */
.navdd{ position:relative }
.extarrow{ display:inline-block; margin-inline-start:4px; opacity:.85; vertical-align:-1px; line-height:0 }
.extarrow svg{ width:13px; height:13px }
.navdd-btn{ background:none; border:0; color:#fff; font:inherit; font-size:16px; line-height:25px; opacity:.7; cursor:pointer; display:inline-flex; align-items:center; gap:9px; padding:0 }
.navdd-btn:hover, .navdd.open .navdd-btn{ opacity:1 }
.navdd-btn.on{ opacity:1; font-weight:700 }
.navdd-btn .ddchev{ width:7px; height:7px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-top:-4px; transition:transform .2s, margin .2s }
.navdd.open .navdd-btn .ddchev{ transform:rotate(135deg); margin-top:4px }
.navdd-menu{ display:none; position:absolute; top:100%; right:0; padding-top:14px; z-index:90 }
.navdd.open .navdd-menu{ display:block }
.ddpanel{ background:#fff; min-width:250px; padding:8px 0; box-shadow:0 12px 40px rgba(9,20,40,.22) }
.navdd-menu a{ display:block; color:var(--navy); opacity:1; padding:11px 20px; font-size:15px; line-height:1.4; text-decoration:none; white-space:nowrap }
.navdd-menu a:hover{ background:rgba(17,57,98,.06) }
.navdd-menu a.on{ font-weight:700; background:rgba(202,255,140,.4); line-height:1.4 }
/* the side panel exists only inside the two guideline sections */
body.no-tree{ --treepad:0px }
body.no-tree .tree{ display:none }
.treehead-a{ background:#eef0f3 }
.treesec-about{ display:none }
.treehead .tchevwrap{ display:none }
body.home .mesh{ background-color:#e6e3c9; background-image:
    radial-gradient(115% 115% at 10% 12%, rgba(255,193,197,.95) 0%, rgba(255,193,197,.55) 30%, rgba(255,193,197,0) 62%),
    radial-gradient(125% 125% at 88% 30%, rgba(174,237,130,.95) 0%, rgba(174,237,130,.5) 34%, rgba(174,237,130,0) 66%),
    radial-gradient(140% 140% at 50% 85%, rgba(233,234,216,.9) 0%, rgba(233,234,216,.45) 40%, rgba(233,234,216,0) 72%),
    linear-gradient(120deg,#f7c7c9 0%,#e9ead8 48%,#aeed82 100%) }
:root{ --treew:252px; --treestrip:46px; --treepad:252px; --headerh:80px }
body.tree-collapsed{ --treepad:var(--treestrip) }
.tree{ position:fixed; top:var(--headerh); right:0; height:calc(100vh - var(--headerh)); width:var(--treew); background:#fff; box-shadow:-4px 0 24px rgba(9,20,40,.10); z-index:300; display:flex; flex-direction:column; transition:transform .28s ease }
header{ position:sticky; top:0; z-index:350 }
.page{ max-width:calc(1440px + var(--treepad)); padding-right:calc(clamp(16px,3vw,60px) + var(--treepad)); transition:padding-right .28s ease, max-width .28s ease }
footer{ padding-right:var(--treepad) }
body.tree-collapsed .tree{ transform:translateX(calc(var(--treew) - var(--treestrip))) }
.treetoggle{ position:absolute; top:10px; left:8px; width:30px; height:30px; background:none; border:0; padding:0; color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3 }
.treetoggle:hover{ background:rgba(17,57,98,.12) }
.treetoggle svg{ width:20px; height:20px }
.treetoggle .tgchev{ transition:transform .2s; transform-origin:8.5px 12px }
body.tree-collapsed .treetoggle .tgchev{ transform:rotate(180deg) }
.treebody{ overflow-y:auto; padding:48px 0 30px; flex:1; transition:opacity .18s }
body.tree-collapsed .treebody{ opacity:0; pointer-events:none }
.treehead{ display:block; text-decoration:none; font-weight:800; font-size:15px; color:var(--navy); padding:12px 18px; margin:0 0 4px; border-radius:0; white-space:nowrap }
.treesec + .treesec{ margin-top:10px }
.treehead-r{ background:#fdedee }
.treehead-b{ background:#e6eef7 }
.treehead.on{ background:rgba(202,255,140,.55) }
.treegbtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:500; color:var(--navy); text-align:start; padding:9px 18px }
.treegbtn:hover{ background:rgba(17,57,98,.05) }
.treegbtn.on{ background:rgba(202,255,140,.4); font-weight:700 }
.tchev{ display:inline-block; width:7px; height:7px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; flex:none; opacity:.6 }
.treegroup.open .tchev{ transform:rotate(-45deg) }
.treegroup + .treegroup{ border-top:1px solid rgba(17,57,98,.06) }
.treesub{ display:none; padding:2px 0 8px }
.treegroup.open .treesub{ display:block }
.treelink{ display:block; text-decoration:none; font-size:13px; line-height:1.4; color:#334; padding:7px 42px 7px 18px; border-inline-start:2px solid transparent }
.treelink:hover{ background:rgba(17,57,98,.05); color:var(--navy) }
.treelink.on{ background:rgba(202,255,140,.4); color:var(--navy); font-weight:600; border-inline-start-color:rgba(150,210,60,.9) }
@media(max-width:1024px){
  body, body.tree-collapsed, body.no-tree{ --treepad:0px }
  .tree{ display:none; top:var(--headerh); right:0; left:0; width:auto; height:auto; max-height:calc(100vh - var(--headerh)); transform:none !important; z-index:400; box-shadow:0 16px 34px rgba(9,20,40,.25) }
  body.menu-open .tree, body.no-tree.menu-open .tree{ display:flex }
  .treetoggle{ display:none }
  .treebody{ padding-top:6px; opacity:1 !important; pointer-events:auto !important }
  .treesec-about{ display:block }
  .treehead{ font-size:16px; padding:14px 20px; display:flex; align-items:center; justify-content:flex-start; gap:6px; margin:0 }
  .treesec + .treesec{ margin-top:0; border-top:1px solid rgba(17,57,98,.08) }
  .treegbtn{ font-size:15px; padding:12px 20px }
  .treelink{ font-size:14px; padding:10px 44px 10px 20px }
  .tchevwrap{ padding:8px 10px; margin:-8px -10px }
}
.chip:hover{background:#ffb5d6; border-color:#ffb5d6}
.chip.on{background:#ffb5d6; border-color:#ffb5d6; color:#123861}
.chip:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.nogrid{font-size:15px; color:#6b7280; padding:8px 4px}
/* ---------- index flow (text + grid, reorderable) ---------- */
.flow{font-size:16px; line-height:1.75; color:#111}
.flow > :not(.gridwrap){max-width:620px; margin-inline:auto; text-align:right}
.flow p{margin-bottom:14px}
.flow ul,.flow ol{margin:0 auto 14px; padding-right:22px}
.flow li{margin-bottom:12px}
.flow .gridwrap{margin:40px 0}
.flow > .gridwrap:last-child{margin-bottom:0}
/* ---------- card grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px 24px}
.card{
  background:#fff; border-radius:12px; overflow:hidden; text-decoration:none;
  box-shadow:0 2px 12px rgba(0,0,0,.1); min-height:170px; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 10px 28px rgba(9,20,40,.18)}
.thumb{height:88px; flex:none; display:flex; align-items:center; justify-content:center}
.thumb svg{width:38px; height:38px; color:#fff; opacity:.92; filter:drop-shadow(0 1px 3px rgba(9,20,40,.25))}
.cardtag{font-size:12px; font-weight:600; letter-spacing:.2px; color:var(--navy); opacity:.55}
.card .body{padding:13px 20px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card h3{margin:0; font-size:20px; line-height:30px; font-weight:700; color:var(--card-title)}
.card p{margin:0; font-size:14px; line-height:20px; color:var(--card-desc)}
.card .att{margin-top:auto; padding-top:8px; font-size:14px; color:var(--navy); opacity:.5}
/* ---------- article ---------- */
.article{max-width:620px; margin:0 auto; text-align:right}
.article .prose{font-size:16px; line-height:1.75; color:#111}
.article h2{font-size:19px; line-height:1.5; font-weight:700; margin:36px 0 8px; color:var(--navy)}
.article h2:first-child{margin-top:0}
.article h2.rule{font-size:22px; margin-top:52px; padding-top:28px; border-top:1px solid rgba(17,57,98,.12); scroll-margin-top:24px}
.article h3{font-size:16.5px; line-height:1.5; font-weight:700; margin:24px 0 6px; color:var(--navy)}
.article h2[id], .article h3[id]{scroll-margin-top:calc(var(--headerh) + 64px)}
.article p{margin:0 0 14px}
.article ul,.article ol{margin:0 0 14px; padding-right:22px}
.article li{margin-bottom:12px}
.article li b{font-weight:600}
.article .sample{
  background:rgba(17,57,98,.10);
  border-radius:10px; padding:12px 18px; margin:0 0 14px;
}
.prose figure.figimg{margin:26px 0 30px; text-align:center}
.prose figure.figimg img{max-width:100%; border-radius:10px; box-shadow:0 2px 12px rgba(9,20,40,.10)}
.prose figure.figimg figcaption{margin-top:10px; font-size:14px; line-height:1.5; color:var(--navy)}
.article .linkline a{color:var(--navy); font-weight:600}
.article ul.linklist{list-style:disc}
.article ul.linklist a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.article ul.linklist li{margin-bottom:6px}
.prose [data-rich] a{color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.article table{border-collapse:collapse; width:100%; margin:10px 0 20px; font-size:15px; line-height:1.6}
.article th{background:rgba(17,57,98,.08); color:var(--navy); font-weight:700; text-align:right; padding:10px 14px}
.article td{border-top:1px solid #e7ebf1; padding:9px 14px; vertical-align:top}
.article tr:nth-child(even) td{background:rgba(17,57,98,.03)}
/* ---------- principle rules: buttons + split view ---------- */
.rulegrid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; scroll-margin-top:110px}
.rulebtn{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(17,57,98,.06); border:1px solid rgba(17,57,98,.12); border-radius:14px;
  padding:14px 18px; font-size:16px; font-weight:600; color:var(--navy); text-decoration:none;
  transition:background .15s ease, transform .15s ease}
.rulebtn:hover{background:rgba(202,255,144,.35); transform:translateX(-3px)}
.rulebtn .num{flex:none; width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff;
  font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.rulebtn .chev{flex:none; opacity:.45; font-weight:900; direction:ltr; unicode-bidi:isolate}
.sheet-collapse{transition:transform .28s ease, opacity .28s ease; transform-origin:center right;
  transform:translateX(150px) scaleX(.94); opacity:0; pointer-events:none}
.rulewrap{display:flex; align-items:stretch; gap:16px; justify-content:center}
.pbar{flex:none; width:58px; border-radius:0; text-decoration:none;
  background:linear-gradient(180deg,#fff 60%,rgba(179,236,135,.3)),#fff;
  box-shadow:none;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px 0;
  animation:barIn .32s ease}
.pbar:hover{background:#f3f8ee}
.pbar .vtitle{writing-mode:vertical-rl; transform:rotate(180deg); font-size:15px; font-weight:700; color:var(--navy); letter-spacing:.4px}
.pbar svg{width:18px; height:18px; color:var(--navy); opacity:.6; flex:none}
.pbar{animation-delay:.04s; animation-fill-mode:backwards}
.rulesheet{animation-fill-mode:backwards}
.rulesheet{flex:0 1 820px; max-width:820px; min-width:0; animation:ruleIn .32s ease; position:relative; border-radius:0; padding:clamp(32px,6vw,72px) clamp(24px,7vw,96px)}
.rulehead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  max-width:620px; margin:0 auto 26px}
.ruletitle{font-size:clamp(24px,3vw,32px); font-weight:900; color:var(--navy); margin:0; line-height:1.2}
.ruleclose{position:absolute; top:24px; inset-inline-end:24px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,57,98,.07); color:var(--navy); text-decoration:none; font-size:21px; font-weight:700; line-height:1; z-index:5}
.ruleclose:hover{background:rgba(17,57,98,.15)}
.sheet-expand{animation:expandIn .3s ease}
@keyframes ruleIn{from{opacity:0; transform:translateX(-34px)} to{opacity:1; transform:none}}
@keyframes barIn{from{opacity:0; transform:translateX(36px)} to{opacity:1; transform:none}}
@keyframes expandIn{from{opacity:0; transform:translateX(150px) scaleX(.94)} to{opacity:1; transform:none}}
@media (max-width:760px){ .rulewrap{flex-direction:column} .pbar{width:100%; flex-direction:row; justify-content:center; padding:10px} .pbar .vtitle{writing-mode:horizontal-tb} }
@media (prefers-reduced-motion:reduce){ .rulesheet,.pbar,.sheet-expand{animation:none} .sheet-collapse{transition:none} }
/* ---------- table of contents ---------- */
.article h2{scroll-margin-top:24px}
#tocui{position:fixed; top:110px; inset-inline-start:14px; z-index:60; text-align:start}
.tocbtn{display:flex; align-items:center; gap:8px; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--navy); background:#fff; border:1px solid rgba(17,57,98,.18); border-radius:100px;
  padding:8px 14px; cursor:pointer; box-shadow:0 3px 14px rgba(9,20,40,.12)}
.tocbtn:hover{background:#f3f8ee}
.tocbtn svg{width:15px; height:15px}
.tocpanel{display:block; gap:0; margin-top:8px; background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(9,20,40,.22);
  padding:10px 6px; width:250px; max-height:min(60vh,480px); overflow:auto}
.tocpanel a{opacity:1; line-height:1.4}
.tocpanel a{display:block; padding:7px 14px; font-size:13.5px; line-height:1.4; color:#334;
  text-decoration:none; border-radius:8px; border-inline-start:2px solid transparent}
.tocpanel a:hover{background:#f3f8ee; color:var(--navy)}
.tocpanel a.on{color:var(--navy); font-weight:700; border-inline-start-color:var(--green); background:rgba(202,255,144,.18)}
.tocpanel a.toc3{padding-inline-start:28px; font-size:12.5px; opacity:.88}
.article h3{scroll-margin-top:24px}
@media (max-width:1120px){ #tocui{top:auto; bottom:18px} .tocpanel{position:fixed; bottom:64px; inset-inline-start:14px} }
.sheet.withtoc{max-width:1060px; display:flex; gap:40px; align-items:flex-start;
  padding:clamp(30px,4.5vw,60px) clamp(24px,4vw,52px)}
.sheet.withtoc .article{margin:0 auto; flex:1 1 auto}
.tocside{display:block; position:sticky; top:100px; flex:0 0 214px; align-self:flex-start;
  background:#fbfdf7; border:1px solid rgba(17,57,98,.1); border-radius:14px;
  padding:14px 10px; max-height:calc(100vh - 132px); overflow:auto}
.tocside .toctitle{font-size:12px; font-weight:800; color:var(--navy); opacity:.55;
  padding:4px 12px 10px; letter-spacing:.4px}
.tocside a{display:block; padding:7px 12px; font-size:13px; line-height:1.45; color:#334;
  text-decoration:none; border-radius:8px; border-inline-start:2px solid transparent}
.tocside a:hover{background:#f3f8ee; color:var(--navy)}
.tocside a.on{color:var(--navy); font-weight:700; border-inline-start-color:var(--green); background:rgba(202,255,144,.2)}
.tocside a.toc3{padding-inline-start:24px; font-size:12.5px; opacity:.9}
@media(max-width:920px){ .sheet.withtoc{flex-direction:column; max-width:820px} .tocside{position:static; flex:none; width:100%; max-height:none; margin-bottom:8px} }
.bgcollapse{border:0; background:#fff; border-radius:0; box-shadow:none; padding:2px 22px; margin:0 0 22px}
.bgcollapse>summary{cursor:pointer; list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; padding:15px 2px; color:var(--navy)}
.bgcollapse>summary::-webkit-details-marker{display:none}
.bgcollapse .bglabel{font-weight:700; font-size:17px}
.bgcollapse .bghint{font-size:13px; opacity:.55}
.bgcollapse>summary::after{content:''; flex:none; width:9px; height:9px; margin-inline-start:auto; border-left:2.5px solid var(--navy); border-bottom:2.5px solid var(--navy); transform:rotate(45deg); transition:transform .25s}
.bgcollapse[open]>summary::after{transform:rotate(-45deg)}
.bgcollapse .bgbody{padding:2px 0 12px; font-size:16px; line-height:1.75; color:#111}
.bgcollapse .bgbody p{margin:0 0 14px}
.bgcollapse .bgbody ul,.bgcollapse .bgbody ol{margin:0 0 14px; padding-right:22px}
.bgcollapse .bgbody li{margin-bottom:12px}
.bgcollapse .bgbody li b{font-weight:600}
.bgcollapse .bgbody h2{font-size:19px; line-height:1.5; font-weight:700; margin:28px 0 8px}
.bgcollapse .bgbody h3{font-size:16.5px; line-height:1.5; font-weight:700; margin:24px 0 6px}
.bgcollapse .bgbody :is(h2,h3):first-child{margin-top:6px}
.article.hs-color h2, .bgcollapse.hs-color h2{color:#123861}
.article.hs-color h3, .bgcollapse.hs-color h3{color:#f04047}
.article.hs-bg h2, .bgcollapse.hs-bg h2{color:#123861; background:#fdedee; padding:9px 15px; border-radius:10px}
.article.hs-bg h3, .bgcollapse.hs-bg h3{color:#123861; background:#e6eef7; padding:7px 14px; border-radius:8px}
.bgcollapse.hs-bg .bgbody h3{background:#fdedee}
.tocside a.tocbg{font-weight:700; color:var(--navy)}
.tocside .tocname{font-size:15px; font-weight:800; color:var(--navy); opacity:1; letter-spacing:0; padding:2px 12px 10px; margin-bottom:6px; border-bottom:1px solid rgba(17,57,98,.12)}
.testsheet{max-width:1160px; width:100%; margin:0 auto; background:none; box-shadow:none; border-radius:0; padding:0}
.tocrow{display:flex; gap:34px; align-items:flex-start; justify-content:center}
.tocrow .maincol{flex:1 1 620px; max-width:660px; min-width:0; display:flex; flex-direction:column; gap:22px}
.tocrow .tocspacer{flex:0 0 210px}
.tocside{flex:0 0 210px}
@media(max-width:920px){ .tocrow{flex-direction:column} .tocrow .maincol{order:0; max-width:none} .tocrow .tocside{order:1; position:static; flex:none; width:100%; max-height:none} .tocrow .tocspacer{display:none} }
.gcard{background:#fff; border:0; border-radius:0; box-shadow:none; padding:clamp(22px,3vw,38px) clamp(20px,3vw,36px)}
.maincol .bgcollapse{margin:0}
.gcard .article{max-width:none; margin:0}
.testsheet .tocside{background:#fff; border:0; border-radius:0; box-shadow:none; padding:16px 14px}
.maincol{display:flex; flex-direction:column; gap:22px; min-width:0}
.testsheet .maincol.solo{max-width:660px; width:100%; margin:0 auto}
.bgcollapse.lc .sample{background:transparent; padding:2px 0 8px; margin:0 0 8px}
.samplelist ul{margin:0; padding-right:20px}
.samplelist li{margin:0 0 6px}
.samplelist li:last-child{margin-bottom:0}
.crumbrow{display:flex; justify-content:center; gap:34px; max-width:1160px; width:100%; margin:0 auto}
.crumbrow:not(.cr-toc){gap:0}
.crumbrow .crside{flex:0 0 0}
.crumbrow.cr-toc .crside{flex:0 0 210px}
.crumbrow .crmain{flex:1 1 620px; max-width:660px; min-width:0}
.crumbrow .crmain .crumb{max-width:none; width:100%; margin:26px 0 -16px}
.indexsheet{padding-top:22px}
/* ---------- experiment: compact row list ---------- */
.sheet.rowsheet{background:#fff; border-radius:0; max-width:940px; width:100%; margin:0 auto; padding:clamp(26px,3.5vw,44px)}
.sheet.rowsheet.rowsheet-wide{padding-inline:20px}
/* white blocks float above the light blue-gray page */
.sheet:not(.testsheet), .gcard, .bgcollapse, .pbar{ box-shadow:0 6px 30px rgba(9,20,40,.13) }
.tree{ box-shadow:-6px 0 26px rgba(9,20,40,.13) }
.rowlist.cols2{gap:10px}
.rowlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.rowlist.cols2{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); grid-auto-flow:column}
@media(max-width:760px){ .rowlist.cols2{grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row} }
.rowsheet .grouptitle{margin:0 0 16px; text-align:start}
.rowitem{display:flex; align-items:stretch; background:#fff; text-decoration:none; min-height:60px; border:1px solid rgba(17,57,98,.12); transition:background .15s}
.rowitem:hover{background:#fbf9f9}
.rowitem .rtitle{flex:1; display:flex; align-items:center; padding:10px 14px; font-size:15.5px; font-weight:500; line-height:1.35; color:var(--navy)}
.rowitem .rtile{flex:none; width:56px; display:flex; align-items:center; justify-content:center}
.rowitem .rtile svg{width:24px; height:24px}
.rowitem .rnum{font-size:19px; font-weight:700; line-height:1}
.rowitem .rchev{flex:none; align-self:center; width:7px; height:7px; margin:0 10px 0 14px; border-left:1px solid; border-bottom:1px solid; border-color:inherit; transform:rotate(45deg)}
.indexsheet .gridwrap{margin-top:6px}
.navarrow{display:inline-block; width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; flex:none}
.navarrow-l{transform:rotate(45deg)}
.navarrow-r{transform:rotate(-135deg)}
.navarrow-u{transform:rotate(135deg)}
.pagenav{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:4px; flex-wrap:wrap}
.rulenav{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:30px; padding-top:20px; border-top:1px solid rgba(17,57,98,.1); flex-wrap:wrap}
.navback{display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:500; text-decoration:none; font-size:15px}
.navback:hover{text-decoration:underline}
.navnext{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff; text-decoration:none; font-weight:500; font-size:15px; padding:11px 20px; border-radius:100px}
.navnext:hover{background:#0d2a48}
.rulecol{flex:0 1 820px; max-width:820px; min-width:0; display:flex; flex-direction:column}
.rulecol .rulesheet{flex:none; max-width:none; width:100%}
.lastrule{margin-top:16px; font-size:15px; line-height:1.7; color:var(--navy); text-align:start}
.lastrule .lastrule-link{display:inline-flex; align-items:center; gap:6px; color:var(--navy); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.rulenav-next{justify-content:flex-end}
.article.hs-bg h2.qhead{background:none; color:#123861; padding:0; border-radius:0}
.bgcollapse.lc>summary .bglabel{color:#f04047}
.bgcollapse.lc>summary::after{border-color:#f04047}
.hero h1[data-num]::before{content:attr(data-num) ". "}
.thumbnum{width:40px; height:40px; border-radius:50%; background:transparent; border:2px solid #fff; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; text-shadow:0 1px 3px rgba(9,20,40,.35)}
.thumbnum-plain{border:0; width:auto; height:auto; font-size:30px}
@media(max-width:920px){ .crumbrow .crside{display:none} .crumbrow, .crumbrow.cr-toc{gap:0} .crumbrow .crmain{max-width:none} }
/* ---------- footer ---------- */
footer{padding:60px 20px; text-align:center; font-size:14px}
footer .subnav{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-bottom:22px}
footer .subnav a{color:#0c1e33; opacity:.6; text-decoration:none}
footer .subnav a:hover{opacity:1; text-decoration:underline}
footer .cr{opacity:.3}
#menubtn{display:none; background:none; border:0; color:#fff; cursor:pointer; padding:8px; border-radius:8px}
#menubtn:hover{background:rgba(255,255,255,.12)}
#menubtn svg{width:26px; height:26px; display:block}
@media (max-width:1024px){
  #menubtn{display:block}
  nav#nav{display:none !important}
  .search{width:160px}
}
@media (max-width:900px){
  header{padding:12px 16px}
  .brand b{font-size:18px; white-space:normal}
  .search{width:130px}
}
@media (prefers-reduced-motion:reduce){ .card{transition:none} }
/* ---------- edit mode ---------- */
.editbar{
  position:fixed; bottom:18px; inset-inline-start:18px; z-index:100;
  display:flex; gap:8px; align-items:center;
  background:var(--navbar); padding:8px 10px; border-radius:100px;
  box-shadow:0 8px 30px rgba(9,20,40,.35);
}
.ebtn{font:inherit; font-size:13px; border:0; border-radius:100px; padding:6px 14px;
  cursor:pointer; background:rgba(255,255,255,.12); color:#fff}
.ebtn:hover{background:rgba(255,255,255,.24)}
.ebtn.primary{background:var(--green); color:var(--navy); font-weight:700}
.ebtn:disabled{opacity:.5; cursor:default}
.emsg{color:#fff; font-size:12.5px; opacity:.85; max-width:280px; line-height:1.4}
body.editing [data-path]{outline:1px dashed rgba(17,57,98,.4); outline-offset:3px; border-radius:4px; cursor:text}
body.editing [data-path]:hover{outline-color:var(--navy)}
body.editing [data-path]:focus{outline:2px solid var(--navy); background:rgba(202,255,144,.18)}
body.editing .card{cursor:default}
body.editing .card:hover{transform:none; box-shadow:0 2px 12px rgba(0,0,0,.1)}
.etools{position:absolute; z-index:99; display:flex; flex-direction:column; gap:4px}
.etool{
  width:28px; height:28px; border:0; border-radius:8px;
  background:var(--navy); color:#fff; cursor:grab; font:inherit; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(9,20,40,.3);
}
.etool:hover{filter:brightness(1.25)}
.etool.del{background:#9c2f2f; cursor:pointer}
.etool.del.armed{width:auto; padding:0 12px; font-size:12.5px; font-weight:700; white-space:nowrap}
.etool.add{background:#3f7d4e; cursor:pointer; font-size:17px}
/* formatting toolbar */
.fmtbar{position:fixed; bottom:18px; inset-inline-end:18px; z-index:100;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center;
  max-width:min(92vw,680px);
  background:var(--navbar); padding:8px 10px; border-radius:24px;
  box-shadow:0 8px 30px rgba(9,20,40,.35)}
.fbtn{font:inherit; font-size:12.5px; border:0; border-radius:100px; padding:6px 12px;
  cursor:pointer; background:rgba(255,255,255,.12); color:#fff}
.fbtn:hover{background:rgba(255,255,255,.24)}
.fbtn.on{background:var(--green); color:var(--navy); font-weight:700}
.fbtn:disabled{opacity:.4; cursor:default}
.fbtn.fb{font-weight:800} .fbtn.fi{font-style:italic}
.fsep{width:1px; height:18px; background:rgba(255,255,255,.25)}
.linkrow{display:flex; gap:6px; align-items:center}
.linkin{font:inherit; font-size:12.5px; border:0; border-radius:100px; padding:6px 12px; width:230px; direction:ltr}
@media (max-width:900px){ .fmtbar{bottom:74px} }
.drop-hint{outline:3px solid #7cc24b !important; outline-offset:3px}
.dragging{opacity:.35}
/* ---------- not-found page (404.html and unknown #/routes) ---------- */
.nfsearch{margin:30px auto 0; width:min(440px,100%)}
.nfsearch .search{width:100%; padding:13px 44px 13px 18px; font-size:16px; border-radius:100px; box-shadow:0 4px 16px rgba(9,20,40,.12)}
.nfsearch svg{right:18px}
.nfsearch .results{width:100%; text-align:right}
.nfmore{font-size:18px; line-height:1.6; opacity:.7; margin:48px auto 0; max-width:620px}
.nfwrap .homebtns{margin-top:18px}