/* The site menu (owner mock 14, 2026-10-17). Loaded by every knightly page: the
   home page and the report pages. Built by /assets/menu.js.

   The panel is a 780 x 1125 unit sheet at ONE fit scale --m: the smaller of
   window width / 2000 and window height / 1125 on a desktop window (the panel
   is then 39 percent of the window wide), and of width / 780 and height / 1125
   under 1000 px (the panel is the window wide: the full-screen takeover on a
   phone). Every number is in those units, so the whole panel fits with no
   scrolling and no crop: it is scaled, never cut. The rows are the owner's drawn
   frames (menu-knightly-N.webp: the small empty box and the long pill); the
   label on each pill is real text. This file is self-contained so a page that
   does not load site.css (the report pages) draws the same menu. */
/* LAYERS (owner 2026-10-18, the kit's numbers: rk_branding chalk kit.base.css
   and kit.chip-layer.css): the menu sits ABOVE the staging chip (150) and
   below the kit pop-ups (200). menu.js sets html.ck-menu-open while the menu
   is open; the kit hides the staging chip under that class.

   A POP-OUT OVER A LIVE PAGE (owner 2026-10-23). The backdrop is a
   TRANSPARENT click catcher, not a wash and not a second ground: the page
   behind the panel keeps its own colors and stays legible, and the menu reads
   as a sheet sitting on top of the running site. It still covers the window,
   so a click anywhere outside the panel closes the menu (hit testing does not
   care about alpha) and the kit's layer order is unchanged.

   This reverses, FOR THE MENU ONLY, the 2026-10-18 note that used to sit here
   ("its backdrop is the page ground, opaque, so nothing of the page shows
   through it"). That note was written from the desktop menu mock, which drew
   only what the pop-out looks like on its own, never that the app behind it
   goes dark. The kit's POP-UPS keep the opaque ground: they are a different
   layer (200) and a different owner decision, and nothing here touches
   them. */
.rk-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: transparent;
}
.rk-menu-backdrop[hidden],
.rk-menu[hidden] { display: none; }
.rk-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 170;
  max-width: 100vw;
  margin: 0;
  color: #fff;
  --vh: 100vh;
  --m: min(calc(100vw / 2000), calc(var(--vh) / 1125));
  width: calc(780 * var(--m));
  padding: 0;
  overflow: hidden;
  background: var(--rk-ground);
}
@supports (height: 100svh) {
  .rk-menu {
    --vh: 100svh;
  }
}
@media (width < 1000px) {
  .rk-menu {
    --m: min(calc(100vw / 780), calc(var(--vh) / 1125));
  }
}
/* SCROLL (owner 2026-10-23). Desktop and tablet keep their scroll: the panel is
   a pop-out over a page that is still live, and freezing the page behind it is
   what made the menu read as a takeover. Under 600 the panel IS the window, so
   there is nothing of the page left to keep live and the lock stays: it stops
   the page behind a full-width sheet from scrolling under a stray touch drag.
   The panel is position: fixed and its sheet is sized from 100svh, so it never
   moves or re-fits when the page behind it scrolls. */
@media (width < 600px) {
  html:has(.rk-menu:not([hidden])) {
    overflow: hidden;
  }
}
.mf {
  position: relative;
  width: 100%;
  height: calc(1125 * var(--m));
}
.mf-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(289.8 * var(--m));
}
.mf-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(289.8 * var(--m));
  height: calc(15.7 * var(--m));
  background-image: linear-gradient(90deg, var(--rk-sweep-purple) 0%, var(--rk-sweep-peach) 100%);
}
.mf .rk-menu__close {
  position: absolute;
  left: calc(50 * var(--m));
  top: calc(41.4 * var(--m));
  width: calc(82 * var(--m));
  height: calc(116.4 * var(--m));
  min-width: 44px;
  min-height: 56px;
  margin: 0;
  color: var(--bd-white, #fff);
}
.mf .rk-menu__close svg {
  width: 100%;
  height: 100%;
}
.mf-squirrel {
  position: absolute;
  margin: 0;
}
.mf-squirrel {
  left: calc(308.6 * var(--m));
  top: calc(53.1 * var(--m));
  width: calc(159.4 * var(--m));
}
.mf-squirrel img {
  display: block;
  width: 100%;
  height: auto;
}
.mf-version {
  position: absolute;
  left: calc(572.8 * var(--m));
  top: calc(233 * var(--m));
  width: calc(160 * var(--m));
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font: italic 700 max(12px, calc(17.2 * var(--m))) / 1.25 var(--rk-font-mono);
  color: var(--bd-white, #fff);
}
/* Hidden until a released version exists (owner 2026-10-13): display:none takes
   the line out of the layout, so nothing in the menu shifts. */
.mf-title {
  position: absolute;
  left: calc(91.1 * var(--m));
  top: calc(360 * var(--m));
  margin: 0;
  font: italic 400 max(14px, calc(17.2 * var(--m))) / 1.25 var(--rk-font-mono);
  color: var(--bd-white, #fff);
}
.mf-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mf-row {
  position: absolute;
  background: no-repeat center / 100% 100%;
}
.mf-link {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font: 400 max(22px, calc(39.8 * var(--m))) / 1 var(--rk-font-hero);
  letter-spacing: 0.169em;
  font-synthesis: none;
}
.mf-link:focus-visible {
  outline: 2px dashed var(--rk-chalk);
  outline-offset: 3px;
}
/* Menu hover rule (owner instruction 2026-10-13, all sites that draw menu
   outlines): the row, outline and name as one unit, grows about 4 percent from
   its center and the name is underlined in the row's own color (the row sets
   color, the label inherits it; currentColor is that color, never white).
   Transform only, so nothing shifts or scrolls. Hover grows only where a real
   hover exists, so a tap never leaves a row grown. */
.mf-row {
  transform-origin: 50% 50%;
  transition: transform 140ms ease-out;
}
.mf-link:focus-visible .mf-label {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.18em;
}
.mf-row:not(.is-off):has(> .mf-link:focus-visible) {
  transform: scale(1.04);
  z-index: 1;
}
@media (hover: hover) {
  .mf-link:hover .mf-label {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.18em;
  }
  .mf-row:not(.is-off):has(> .mf-link:hover) {
    transform: scale(1.04);
    z-index: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mf-row {
    transition: none;
  }
}
/* Unavailable rows are drawn at full brightness, exactly as the mock draws them; only the pointer says they do nothing: no grow, no underline. */
.mf-row.is-off .mf-link {
  cursor: default;
}
.mf-row.is-off .mf-link:hover .mf-label,
.mf-row.is-off .mf-link:focus-visible .mf-label {
  text-decoration: none;
}
/* THE ROWS (UI_Knightly_ENG page 17, 2026-10-30; lane L31 before it). The public
   menu is six rows in the order of the home page's sections: home, mission,
   energy, about, install, start (the reports row is gone; the Pro rows live on
   the report pages only). Each row's box is the mock's (its small box and
   its pill, the page's points times 1.0411, the 780 unit sheet). Rows 1 to 5 are
   the kit's five drawn strips in their own colors; rows 6 to 8 reuse a strip,
   recolored the way the mock colors them: the strip is a MASK over the row's
   color (a pseudo-element, so the label is not masked). The reports row draws
   the gold crown in the small box's place, as the mock does. A signed-in reader
   without Pro gets an eighth row, sign out, and the eight rows close up
   (data-rows="8") so they still fit the sheet. The Pro menu (five rows) uses
   rows 1 to 5. The "menu ..." title sits at 360 (the mock's 358). */
.mf-r1 {
  left: calc(98.7 * var(--m));
  top: calc(398.0 * var(--m));
  width: calc(549.1 * var(--m));
  height: calc(75.0 * var(--m));
  background-image: url(/assets/vendor/chalk/assets/menu-knightly-1.webp?v=1158d6e92bcb);
  color: #fdcac3;
}
.mf-r1 .mf-link {
  margin: calc(7.0 * var(--m)) 0 0 calc(-7.0 * var(--m));
  left: 19.91%;
  top: 1.15%;
  width: 79.93%;
  height: 97.70%;
}
.mf-r2 {
  left: calc(93.4 * var(--m));
  top: calc(495.4 * var(--m));
  width: calc(547.8 * var(--m));
  height: calc(85.6 * var(--m));
  background-image: url(/assets/vendor/chalk/assets/menu-knightly-2.webp?v=763b06ad3d0b);
  color: #faafa5;
}
.mf-r2 .mf-link {
  margin: calc(0.0 * var(--m)) 0 0 calc(-0.8 * var(--m));
  left: 20.35%;
  top: 2.80%;
  width: 79.49%;
  height: 96.18%;
}
.mf-r3 {
  left: calc(91.2 * var(--m));
  top: calc(608.0 * var(--m));
  width: calc(541.6 * var(--m));
  height: calc(88.9 * var(--m));
  background-image: url(/assets/vendor/chalk/assets/menu-knightly-3.webp?v=c4af8f51aba9);
  color: #d98e85;
}
.mf-r3 .mf-link {
  margin: calc(3.1 * var(--m)) 0 0 calc(3.9 * var(--m));
  left: 20.49%;
  top: 0.97%;
  width: 79.35%;
  height: 98.06%;
}
.mf-r4 {
  left: calc(94.6 * var(--m));
  top: calc(714.0 * var(--m));
  width: calc(557.0 * var(--m));
  height: calc(84.1 * var(--m));
  background-image: url(/assets/vendor/chalk/assets/menu-knightly-4.webp?v=11d710008c9d);
  color: #f1786a;
}
.mf-r4 .mf-link {
  margin: calc(3.1 * var(--m)) 0 0 calc(-6.2 * var(--m));
  left: 21.15%;
  top: 1.04%;
  width: 78.69%;
  height: 97.92%;
}
.mf-r5 {
  left: calc(92.3 * var(--m));
  top: calc(813.8 * var(--m));
  width: calc(549.3 * var(--m));
  height: calc(80.4 * var(--m));
  background-image: url(/assets/vendor/chalk/assets/menu-knightly-5.webp?v=807b6609390e);
  color: #ff4124;
}
.mf-r5 .mf-link {
  margin: calc(-2.3 * var(--m)) 0 0 calc(-9.4 * var(--m));
  left: 23.03%;
  top: 1.09%;
  width: 76.81%;
  height: 98.64%;
}
.mf-r6 {
  left: calc(93.4 * var(--m));
  top: calc(918.0 * var(--m));
  width: calc(542.6 * var(--m));
  height: calc(84.6 * var(--m));
  color: #d7486d;
}
.mf-r6::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url(/assets/vendor/chalk/assets/menu-knightly-1.webp?v=1158d6e92bcb) no-repeat center / 100% 100%;
  mask: url(/assets/vendor/chalk/assets/menu-knightly-1.webp?v=1158d6e92bcb) no-repeat center / 100% 100%;
}
.mf-r6 .mf-link {
  margin: calc(7.0 * var(--m)) 0 0 calc(-7.0 * var(--m));
  left: 19.91%;
  top: 1.15%;
  width: 79.93%;
  height: 97.70%;
}
.mf-r7 {
  left: calc(98.7 * var(--m));
  top: calc(1018.7 * var(--m));
  width: calc(543.8 * var(--m));
  height: calc(74.2 * var(--m));
  color: #b04eb6;
}
.mf-r7::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url(/assets/vendor/chalk/assets/menu-knightly-1.webp?v=1158d6e92bcb) no-repeat center / 100% 100%;
  mask: url(/assets/vendor/chalk/assets/menu-knightly-1.webp?v=1158d6e92bcb) no-repeat center / 100% 100%;
}
.mf-r7 .mf-link {
  margin: calc(7.0 * var(--m)) 0 0 calc(-7.0 * var(--m));
  left: 19.91%;
  top: 1.15%;
  width: 79.93%;
  height: 97.70%;
}
.mf-r8 {
  left: calc(92.3 * var(--m));
  top: calc(1018.7 * var(--m));
  width: calc(549.3 * var(--m));
  height: calc(74.2 * var(--m));
  color: #8c52ff;
}
.mf-r8::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url(/assets/vendor/chalk/assets/menu-knightly-5.webp?v=807b6609390e) no-repeat center / 100% 100%;
  mask: url(/assets/vendor/chalk/assets/menu-knightly-5.webp?v=807b6609390e) no-repeat center / 100% 100%;
}
.mf-r8 .mf-link {
  margin: calc(-2.3 * var(--m)) 0 0 calc(-9.4 * var(--m));
  left: 23.03%;
  top: 1.09%;
  width: 76.81%;
  height: 98.64%;
}
/* The reports row: the pill only (the strip's small box is clipped off) and the
   gold crown in the box's place (the mock's 70.3 unit crown, 10.2 units in from
   the row's left edge and 8.1 units down). */
.mf-reports::before {
  clip-path: inset(0 0 0 18.5%);
}
.mf-reports::after {
  content: "";
  position: absolute;
  left: calc(10.2 * var(--m));
  top: calc(8.1 * var(--m));
  width: calc(70.3 * var(--m));
  height: calc(53.8 * var(--m));
  background: url(/assets/art/crown-pro.webp?v=e987b2b036d8) no-repeat center / contain;
  pointer-events: none;
}
/* Eight rows (the public seven and sign out): the same rows at a 91 unit pitch
   from 384, so the eighth ends inside the sheet (1095 of 1125). */
.mf-list[data-rows="8"] .mf-r1 { top: calc(384.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r2 { top: calc(475.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r3 { top: calc(566.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r4 { top: calc(657.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r5 { top: calc(748.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r6 { top: calc(839.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r7 { top: calc(930.0 * var(--m)); }
.mf-list[data-rows="8"] .mf-r8 { top: calc(1021.0 * var(--m)); }

/* A button row is the same pill as a link row. */
button.mf-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin-block: 0;
  cursor: pointer;
}
/* The menu's own hamburger, for any page header that carries one. */
.hd-menu {
  background: transparent;
  border: 0;
  color: var(--bd-white, #fff);
  cursor: pointer;
}
/* The BETA in the head (UI_Knightly_ENG page 17, 2026-10-30): the same owner
   art as the header chip (assets/art/beta-chip.webp, PROVENANCE-1018c.txt),
   drawn as a mask in the chalk color; decorative here (aria-hidden): the header
   chip is the button that opens the beta list. The mock's box is (610, 145) to
   (690, 212) in sheet units, over the version line (randomly draws the same).
   The sheet draws no site name under the head (page 17). */
.mf-beta {
  position: absolute;
  left: calc(610 * var(--m));
  top: calc(145 * var(--m));
  width: calc(80 * var(--m));
  height: calc(67 * var(--m));
  margin: 0;
  color: var(--bd-white, #fff);
}
.mf-beta__art {
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url(/assets/art/beta-chip.webp?v=db36b2f914f5) center / 100% 100% no-repeat;
  mask: url(/assets/art/beta-chip.webp?v=db36b2f914f5) center / 100% 100% no-repeat;
}
/* Pro header: the gold crown with the word "pro" drawn as live text under it. */
.mf-pro {
  position: absolute;
  left: calc(632 * var(--m));
  top: calc(34 * var(--m));
  width: calc(112 * var(--m));
  margin: 0;
  text-align: center;
  color: var(--bd-white, #fff);
}
.mf-pro[hidden] { display: none; }
.mf-pro img {
  display: block;
  width: calc(86 * var(--m));
  height: auto;
  margin: 0 auto;
}
.mf-pro span {
  display: block;
  margin-top: calc(4 * var(--m));
  font: 400 max(16px, calc(34 * var(--m))) / 1 var(--rk-font-hero);
  letter-spacing: 0.05em;
}
.mf-version[hidden] { display: none; }
/* "history / recycle": the dumpster fire and its words, below the rows. Until
   the history page exists the row is dimmed and out of the tab order. */
.mf-hist {
  position: absolute;
  left: calc(78 * var(--m));
  top: calc(1004 * var(--m));
  width: calc(622 * var(--m));
  height: calc(100 * var(--m));
  margin: 0;
  list-style: none;
}
.mf-hist-link {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--m));
  box-sizing: border-box;
  height: 100%;
  min-height: 44px;
  color: #eae6df;
  text-decoration: none;
  font: 400 max(20px, calc(39.8 * var(--m))) / 1 var(--rk-font-hero);
  letter-spacing: 0.169em;
  font-synthesis: none;
}
.mf-hist-link img {
  display: block;
  flex: none;
  height: 100%;
  width: auto;
  max-width: calc(86 * var(--m));
  object-fit: contain;
}
.mf-hist-link:focus-visible {
  outline: 2px dashed var(--rk-chalk, #f6f3ed);
  outline-offset: 3px;
}
.mf-hist.is-off .mf-hist-link {
  color: #3c3c3c;
  cursor: default;
}
@media (hover: hover) {
  .mf-hist:not(.is-off) .mf-hist-link:hover span { text-decoration: underline; text-underline-offset: 0.18em; }
}