/* ==========================================================================
   /rules - the help centre. Page-scoped, every selector hc- prefixed.
   Tokens come from shell.css so both themes fall out of the tokens; the only
   theme-specific rules here are the two diagram fills that need more contrast
   on the light papyrus background.
   ========================================================================== */

/* ---- search ---- */
.hc-find{position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--card-2),var(--card));border-radius:999px;padding:0 16px 0 18px;height:54px}
.hc-find:focus-within{border-color:var(--red)}
.hc-find svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.hc-find input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:400 15px/1 var(--ui)}
.hc-find input::placeholder{color:var(--faint)}
.hc-find input::-webkit-search-cancel-button{display:none}

/* ---- the two controls under it ---- */
.hc-ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:12px}
.hc-seg{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--card);flex-wrap:wrap}
.hc-seg button{font:500 12.5px/1 var(--ui);padding:9px 14px;border-radius:999px;border:0;background:none;color:var(--dim);cursor:pointer}
.hc-seg button:hover{color:var(--ink)}
.hc-seg button.on{background:var(--fill);color:#fff;font-weight:600}
.hc-size{display:flex;align-items:center;gap:10px;margin-left:auto}
.hc-size > span{font:500 11.5px/1.35 var(--ui);color:var(--faint)}
.hc-count{font:500 12px/1.5 var(--ui);color:var(--faint);padding:10px 2px 0;margin:0}

/* ---- groups ---- */
.hc-grp > .hc-lede{font:400 13px/1.65 var(--ui);color:var(--dim);padding:14px 22px 0;max-width:84ch;margin:0}
.hc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:12px;padding:14px 22px 20px}
.hc-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--card-2),var(--card));overflow:hidden}
.hc-card.is-hard{border-color:var(--line-3)}
.hc-card__h{display:flex;gap:10px;align-items:flex-start;padding:14px 14px 0}
.hc-k{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;font:700 14px/1 'Noto Sans JP',var(--ui);color:var(--red);background:var(--red-a)}
.hc-card__t{min-width:0;flex:1}
.hc-card__t h3{font:600 14.5px/1.3 var(--ui);letter-spacing:-.01em;color:var(--ink);margin:0}
.hc-card__t small{display:block;font:400 11.5px/1.4 var(--ui);color:var(--faint);margin-top:2px}
.hc-tag{flex:none;font:600 9px/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--red);border:1px solid var(--red-b);background:var(--red-a);border-radius:999px;padding:5px 8px}
.hc-fig{padding:12px 14px 0}
.hc-fig b{display:block;font:600 27px/1.05 var(--num);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hc-fig span{display:block;font:400 11.5px/1.45 var(--ui);color:var(--faint);margin-top:3px}
.hc-eg{margin:12px 14px 0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:10px;background:var(--card)}
.hc-eg > span{display:block;font:600 9px/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.hc-eg p{font:400 12.5px/1.6 var(--ui);color:var(--dim);margin:6px 0 0}
.hc-eg b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hc-more{margin:12px 14px 14px;align-self:flex-start;font:600 11.5px/1 var(--ui);color:var(--dim);background:none;border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.hc-more:hover{border-color:var(--red);color:var(--ink)}
.hc-more::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease}
.hc-card.is-open .hc-more::after{transform:rotate(-135deg) translate(-2px,-2px)}
.hc-body{padding:0 14px 14px;margin-top:-4px}
.hc-body p{font:400 12.5px/1.7 var(--ui);color:var(--dim);margin:0 0 9px}
.hc-body p:last-child{margin-bottom:0}
.hc-body ul{margin:0 0 9px;padding-left:18px}
.hc-body li{font:400 12.5px/1.65 var(--ui);color:var(--dim);margin-bottom:5px}
.hc-body b{color:var(--ink);font-weight:600}
.hc-body a{color:var(--red)}
.hc-br{border-top:1px solid var(--line);padding-top:9px;font-size:12px}
.hc-br.is-hard{color:var(--red)}

/* ---- the diagrams ---- */
.hc-vz{padding:13px 14px 0}
.hc-viz{display:block;width:100%;height:auto;overflow:visible}
.hc-viz text{font:600 8px/1 var(--ui);fill:var(--faint);letter-spacing:.03em}
.hc-viz text.k{fill:var(--ink)}
.hc-viz text.r{fill:var(--red)}
.hc-viz text.g{fill:var(--up)}
.hc-viz .trk{fill:var(--raise)}
.hc-viz .bar{fill:var(--line-3)}
.hc-viz .barr{fill:var(--red)}
.hc-viz .bard{fill:var(--red-a)}
.hc-viz .barg{fill:var(--up)}
.hc-viz .barga{fill:var(--up-a)}
.hc-viz .ln{stroke:var(--line-2);stroke-width:1;fill:none}
.hc-viz .lnk{stroke:var(--ink);stroke-width:1.3;fill:none}
.hc-viz .lnr{stroke:var(--red);stroke-width:1.4;fill:none}
.hc-viz .lng{stroke:var(--up);stroke-width:1.4;fill:none}
.hc-viz .dash{stroke:var(--line-3);stroke-width:1;stroke-dasharray:3 3;fill:none}
.hc-viz .dashr{stroke:var(--red);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.hc-viz .box{fill:none;stroke:var(--line-2);stroke-width:1}
.hc-viz .dot{fill:var(--line-3)}
.hc-viz .dotg{fill:var(--up)}
.hc-viz .dotr{fill:var(--red)}
[data-theme="light"] .hc-viz .trk{fill:rgba(120,90,60,.13)}
[data-theme="light"] .hc-viz .bar{fill:rgba(120,90,60,.42)}
[data-theme="light"] .hc-viz .dot{fill:rgba(120,90,60,.42)}

/* ---- empty state and the footer links ---- */
.hc-none{padding:36px 22px;text-align:center}
.hc-none b{display:block;font:600 15px/1.3 var(--ui);color:var(--ink)}
.hc-none span{display:block;font:400 12.5px/1.65 var(--ui);color:var(--faint);margin-top:5px}
.hc-none a{color:var(--red)}
.hc-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;padding:14px 22px 20px}
.hc-help a{display:block;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--card);text-decoration:none}
.hc-help a:hover{border-color:var(--red)}
.hc-help b{display:block;font:600 13px/1.3 var(--ui);color:var(--ink)}
.hc-help span{display:block;font:400 11.5px/1.5 var(--ui);color:var(--faint);margin-top:3px}
.hc-card mark{background:var(--red-a);color:var(--ink);border-radius:3px;padding:0 2px}

@media (max-width:760px){
  .hc-find{height:50px;padding:0 14px 0 15px}
  .hc-find input{font-size:16px}
  .hc-vz{padding-left:12px;padding-right:12px}
  .hc-size{margin-left:0;width:100%;flex-wrap:wrap}
  .hc-cards,.hc-help{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  .hc-grp > .hc-lede{padding-left:16px;padding-right:16px}
  .hc-seg button{padding:10px 12px}
  .hc-fig b{font-size:24px}
}
.hc-card:not(.is-open) .hc-body{display:none}

/* ==========================================================================
   Responsive + rendering pass, 23 Sep 2026.
   ========================================================================== */

/* The diagrams draw into a 300x78 viewBox and scale with the card, so a label
   set in px scales with it too. The phone rule used to bump the type to 9px,
   which pushed five captions 11-12% past the right edge of the viewBox and
   the card clipped them ("...and the account stops" lost its last four
   words). The type is back to the 8px the viewBox was drawn for, the svg is
   capped so one card per row does not blow it up, and a hair of extra side
   padding absorbs the longest line. */
.hc-vz{padding:13px 18px 0}
.hc-viz{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
/* the three caption rows run the full 300 units of the viewBox, so they get a
   hair less type than the labels inside the drawing */
.hc-viz text[y="72"],.hc-viz text[y="76"],.hc-viz text[y="78"],.hc-viz text[y="82"]{font-size:7.6px}

/* every control a finger reaches for */
/* the input fills the pill so the whole 52px pill is the tap target, not the
   21px line of text inside it */
.hc-find input{align-self:stretch;height:auto}
@media (max-width:1080px),(pointer:coarse){
  .hc-find{height:52px}
  .hc-find input{font-size:16px}
  .hc-seg button{min-height:40px;padding:10px 14px}
  .hc-more{min-height:40px;padding:8px 14px}
  .hc-help a{min-height:52px}
  .hc-size select,.hc-size input{min-height:40px;font-size:16px}
}

/* narrow phones: the search pill and the segment wrap instead of squeezing */
@media (max-width:400px){
  .hc-find{padding:0 12px 0 13px;gap:8px}
  .hc-cards,.hc-help{padding-left:12px;padding-right:12px}
  .hc-grp > .hc-lede{padding-left:12px;padding-right:12px}
  .hc-vz{padding-left:10px;padding-right:10px}
  .hc-fig b{font-size:22px}
  .hc-seg{width:100%}
  .hc-seg button{flex:1 1 auto}
}

/* landscape phones: the search bar and controls stop eating the viewport */
@media (max-height:520px) and (orientation:landscape){
  .hc-find{height:44px}
  .hc-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .hc-viz{max-width:400px}
}

/* wide screens: three or four columns of cards, and prose that stops at a
   comfortable measure rather than running the width of a 27in monitor */
@media (min-width:1600px){
  .hc-cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .hc-grp > .hc-lede{max-width:78ch}
  .hc-help{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* low-end: the card gradients become flat fills, and nothing casts */
html.mz-low .hc-card,html.mz-low .hc-find{background:var(--card);box-shadow:none}
html.mz-low .hc-more::after{transition:none}

/* ==========================================================================
   The rule book scroll (24 Sep). Always paper and ink, in both themes.
   ========================================================================== */
.rb{--paper:#f3ead8;--paper2:#e9dcc2;--sumi:#1b1713;--sumi2:#4a4038;--shu:#b8291d;
  position:relative;margin:0 auto 28px;max-width:880px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}
.rb__rod{height:18px;margin:0 -14px;border-radius:9px;position:relative;z-index:2;
  background:linear-gradient(180deg,#5a3a22,#2e1c10 55%,#1a100a)}
.rb__rod::before,.rb__rod::after{content:"";position:absolute;top:-3px;width:26px;height:24px;border-radius:6px;background:linear-gradient(180deg,#c9a45a,#7a5a22)}
.rb__rod::before{left:-8px}.rb__rod::after{right:-8px}
.rb__paper{position:relative;color:var(--sumi);padding:40px clamp(18px,5vw,56px) 34px;
  background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(80% 50% at 90% 100%,rgba(160,120,60,.14),transparent 70%),
    linear-gradient(180deg,var(--paper),var(--paper2));
  border-left:10px solid #2c2a33;border-right:10px solid #2c2a33;
  transform-origin:top;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.16,1,.3,1)}
.rb--in .rb__paper{clip-path:inset(0 0 0 0)}
.rb__paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.rb__head{position:relative;display:flex;gap:22px;align-items:center;padding-bottom:22px;margin-bottom:8px;border-bottom:2px solid var(--sumi)}
.rb__big{font:700 clamp(64px,11vw,104px)/1 "Shippori Mincho","Noto Sans JP",serif;color:var(--sumi);flex:none}
.rb__kick{margin:0 0 6px;font:600 11px/1 var(--ui,inherit);letter-spacing:.18em;text-transform:uppercase;color:var(--shu)}
.rb h2{margin:0;font:800 clamp(22px,3.4vw,32px)/1.15 "Shippori Mincho",Georgia,serif;letter-spacing:-.01em;color:var(--sumi)}
.rb__sub{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--sumi2);max-width:58ch}
.rb__list{list-style:none;margin:0;padding:0;position:relative}
.rb__r{display:grid;grid-template-columns:52px 1fr 112px;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(27,23,19,.18);
  opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1)}
.rb__r.in{opacity:1;transform:none}
.rb__n{width:46px;height:46px;display:grid;place-items:center;border-radius:6px;background:var(--shu);color:#fbf3e4;
  font:700 24px/1 "Shippori Mincho","Noto Sans JP",serif;box-shadow:inset 0 0 0 2px rgba(251,243,228,.35);transform:rotate(-3deg)}
.rb h3{margin:0;font:800 20px/1.2 "Shippori Mincho",Georgia,serif;color:var(--sumi)}
.rb__line{margin:4px 0 6px;font:600 italic 16px/1.4 "Shippori Mincho",Georgia,serif;color:var(--sumi)}
.rb__d{margin:0;font-size:13.5px;line-height:1.55;color:var(--sumi2);max-width:60ch}
.rb__end{display:inline-block;margin-top:9px;padding:3px 8px 2px;border:1.5px solid var(--shu);border-radius:3px;color:var(--shu);
  font:700 10.5px/1.3 var(--ui,inherit);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-1.5deg)}
.rb__ink{width:112px;height:112px;fill:none;stroke:var(--sumi);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.rb__ink .b{stroke-width:5.5}.rb__ink .w{stroke-width:1.6;opacity:.6}.rb__ink .f{fill:var(--sumi)}
.rb__ink path,.rb__ink rect,.rb__ink circle{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.8s cubic-bezier(.3,.6,.3,1) .25s}
.rb__r.in .rb__ink path,.rb__r.in .rb__ink rect,.rb__r.in .rb__ink circle{stroke-dashoffset:0}
.rb__foot{display:flex;gap:18px;align-items:center;margin-top:26px}
.rb__seal{flex:none;width:74px;height:74px;display:grid;place-items:center;border:3px solid var(--shu);border-radius:10px;color:var(--shu);
  font:700 44px/1 "Shippori Mincho","Noto Sans JP",serif;transform:rotate(-6deg);opacity:.92}
.rb__foot b{display:block;font:800 18px/1.3 "Shippori Mincho",Georgia,serif;color:var(--sumi)}
.rb__foot span:not(.rb__seal){display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--sumi2)}
@media (max-width:640px){
  .rb__rod{margin:0 -6px}
  .rb__paper{border-width:6px}
  .rb__head{flex-direction:column;align-items:flex-start;gap:8px}
  .rb__r{grid-template-columns:40px 1fr 64px;gap:12px}
  .rb__n{width:38px;height:38px;font-size:20px}
  .rb__ink{width:64px;height:64px;align-self:start}
}
@media (prefers-reduced-motion:reduce){.rb__paper{clip-path:none;transition:none}.rb__r{opacity:1;transform:none;transition:none}.rb__ink *{stroke-dashoffset:0!important;transition:none!important}}