/* THE menu — one canonical source for the door menu, shared VERBATIM by
   rainyseason.cr (the shell) and the concierge. Scoped to .rs-doors so it drops
   into either host. Do not edit a copy; edit the canonical (packages/shell/) and
   run tools/sync-shared.sh. Palette tokens (--storm/--gold/... ) come from the
   host; --dim/--faint/--mono carry fallbacks so the file stands alone. */
.rs-doors {
  /* The left inset is the design system's one rail (--rail); the bar mark's
     left edge lands on the same rail, so glyph and menu share a column. The
     right inset (8px) puts the row's 46px indicator column over the 46px
     close-X, so arrow and lock centre on the X's axis. */
  --menu-x-l: var(--rail, 22px); --menu-x-r: 8px; --menu-ind: 46px;
  --m-word: clamp(14px, 4vw, 17px); /* one label size for every row, open or locked */
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 6px 0 0;
}
.rs-doors .m-row {
  appearance: none; position: relative;
  display: flex; flex-direction: row; align-items: flex-start;
  width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--ink); text-decoration: none; cursor: pointer;
  padding: 11px var(--menu-x-r) 11px var(--menu-x-l); min-height: 44px;
  box-sizing: border-box;
  --hl-x: 8px; --hl-y: 2px; --hl-radius: 0;
}
/* The highlight box lives on ::before so it insets without moving the words. */
.rs-doors .m-row::before {
  content: ""; position: absolute; inset: var(--hl-y) var(--hl-x);
  border-radius: var(--hl-radius); background: transparent; z-index: 0; pointer-events: none;
  transition: background 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-doors .m-row--child { padding-left: calc(var(--menu-x-l) + 16px); }
/* The concierge CTA — the menu's one button. It is the site's beam button
   (button.css) dropped in where the concierge row used to sit: the ONE app-wide
   button width (--btn-w-full), centred in the panel like every hero CTA.
   .m-cta centres it (the .btn is inline-flex, so a flex parent centres it —
   margin:auto would not); the rail padding keeps it off the edge on a phone. */
.rs-doors .m-cta { padding: 16px var(--menu-x-l) 6px; display: flex; justify-content: center; }
.rs-doors .m-cta .btn { width: 100%; max-width: var(--btn-w-full, 420px); }
/* This is the ONE button that keeps its weather mark: the rainyseason concierge
   cloud-and-stars mark (blue stars). It rides tight to the label and the pair
   centres together — the app-wide buttons-and-icons standard (button.css). The
   only menu-scoped bit is un-hiding the mark past the text-only button law. */
.rs-doors .m-cta .btn.btn--glyph > .btn__mark { display: block !important; }
/* The concierge CTA is the menu's one solid button: a hard-rain blue block. The
   border matches the fill so the beam is the only edge light; the label is
   already --ink (white). (William, 2026-08-02) */
.rs-doors .m-cta .btn.btn--beam,
.rs-doors .m-cta .btn.btn--beam:hover,
.rs-doors .m-cta .btn.btn--beam:focus-visible {
  background: var(--hard-rain);
  border-color: var(--hard-rain);
  border-image: none;   /* stay a clean blue edge; skip the mark's hover stroke gradient */
  color: var(--white);
}
/* White beam — the same flashlight sweep recoloured to white so it reads ON TOP
   of the blue solid (a hard-rain beam would vanish into the fill). */
.rs-doors .m-cta .btn.btn--beam::before {
  background: conic-gradient(from var(--btn-beam),
    var(--white) 0deg,
    var(--white) 34deg,
    color-mix(in srgb, var(--white) 30%, transparent) 56deg,
    transparent 76deg,
    transparent 360deg);
}
/* Locked rows — the lock on the right rail, nothing to press. */
.rs-doors .m-row--locked {
  align-items: center; cursor: default;
  padding-top: 10px; padding-bottom: 10px;
}
.rs-doors .m-row--locked .m-label {
  font-size: clamp(14px, 4vw, 17px); letter-spacing: var(--track-title); font-weight: 500;
}
/* The lock rides the same 46px indicator column as the arrow: pushed to the
   right rail, then inset by half the leftover so its 15px glyph centres on the
   X's axis, exactly where a row's arrow sits. */
.rs-doors .m-lock { margin-left: auto; margin-right: calc((var(--menu-ind) - 15px) / 2); color: var(--faint, #6b7076); flex: none; position: relative; z-index: 1; }
@media (hover: hover) {
  .rs-doors .m-lock { opacity: 0.2; transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1); }
  .rs-doors .m-row:hover .m-lock { opacity: 1; }
}
.rs-doors .m-copy { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rs-doors .m-label-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.rs-doors .m-label {
  flex: 0 1 auto; min-width: 0; margin: 0; padding: 0;
  font-size: var(--m-word); letter-spacing: var(--track-title); text-transform: lowercase;
  font-weight: 500; line-height: 1.15; color: inherit;
}
/* Path grammar: a quiet leading slash, always white (--ink) to match the
   site's path slash (button.css .curl-slash), so every row reads as one mark. */
.rs-doors .m-label::before { content: "/"; margin-right: 0.1em; color: var(--ink); font-weight: inherit; }
.rs-doors .m-tag {
  flex: 0 0 auto; font-size: var(--t-eyebrow); letter-spacing: var(--track-caps); text-transform: lowercase;
  color: var(--spark); border: 1px solid color-mix(in srgb, var(--spark) 45%, transparent);
  padding: 2px 6px; line-height: 1.5; white-space: nowrap;
}
/* Hint — in-flow grid reveal; shown at rest on the desk (touch). */
.rs-doors .m-descwrap {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-doors .m-hint {
  min-height: 0; overflow: hidden; margin: 0; padding-top: 4px;
  padding-left: calc(var(--m-word) * 0.8);
  font-size: var(--t-small); font-weight: 400; letter-spacing: var(--track-micro); text-transform: none;
  line-height: 1.4; color: var(--dim, #9aa0a6);
}
/* The guide arrow — Fira Code "=>", fused at rest (touch has no pointer to
   draw it together); it leans forward on press. */
.rs-doors .m-go {
  flex: 0 0 var(--menu-ind); width: var(--menu-ind);
  display: inline-grid; place-items: center; margin-left: auto;
  font-family: var(--mono, "Fira Code", ui-monospace, monospace); font-size: clamp(19px, 2.4vw, 28px); line-height: 1;
  color: var(--ink); opacity: 0.9;
  transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.33, 1, 0.68, 1);
}
.rs-doors .m-go > span { grid-area: 1 / 1; }
.rs-doors .m-go-apart { display: none; }
.rs-doors .m-go-lig { font-feature-settings: "liga" 1, "calt" 1; }
.rs-doors .m-row.is-on::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.rs-doors .m-row.is-on .m-label, .rs-doors .m-row.is-on .m-tag { opacity: 0.72; }
.rs-doors .m-row:active::before { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.rs-doors .m-row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}
/* A group is shut at rest; a tap (touch) or hover (desktop) opens it. The
   reveal animates the same on both. */
.rs-doors .m-group-kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.rs-doors .m-group-kids-in { overflow: hidden; min-height: 0; }
.rs-doors .m-group > .m-row--parent .m-go { transform: none; }
.rs-doors .m-group.is-open .m-group-kids { grid-template-rows: 1fr; }
.rs-doors .m-group.is-open > .m-row--parent .m-go { transform: rotate(90deg); }
/* The parent's body copy is never shown at rest — only once the door is
   opened (tap, here) or hovered (the hover block below). */
.rs-doors .m-group > .m-row--parent .m-descwrap { grid-template-rows: 0fr; opacity: 0; }
.rs-doors .m-group.is-open > .m-row--parent .m-descwrap { grid-template-rows: 1fr; opacity: 1; }

/* Pointer devices: rows rest receded; the pointed-at row powers up, its hint
   unfolds, the arrow fuses. Mirrors the main app's hover model. */
@media (hover: hover) {
  .rs-doors .m-label, .rs-doors .m-tag, .rs-doors .m-go {
    opacity: 0.62;
    transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1), color 460ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.33, 1, 0.68, 1);
  }
  .rs-doors .m-descwrap { grid-template-rows: 0fr; opacity: 0; }
  .rs-doors .m-go-apart { display: inline-block; font-feature-settings: "liga" 0, "calt" 0; transition: opacity 150ms ease; }
  .rs-doors .m-go-apart > span { display: inline-block; transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1); }
  .rs-doors .m-go-lig { opacity: 0; transition: opacity 150ms ease; }
  .rs-doors .m-group-kids { grid-template-rows: 0fr; transition: grid-template-rows 460ms cubic-bezier(0.22, 1, 0.36, 1); }
  .rs-doors .m-group > .m-row--parent .m-go { transform: none; transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms cubic-bezier(0.22, 1, 0.36, 1); }
  .rs-doors .m-row:hover .m-label, .rs-doors .m-row:focus-visible .m-label,
  .rs-doors .m-row:hover .m-tag, .rs-doors .m-row:focus-visible .m-tag,
  .rs-doors .m-row:hover .m-go, .rs-doors .m-row:focus-visible .m-go { opacity: 1; }
  .rs-doors .m-row:hover::before, .rs-doors .m-row:focus-visible::before { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .rs-doors .m-row:hover .m-descwrap, .rs-doors .m-row:focus-visible .m-descwrap { grid-template-rows: 1fr; opacity: 1; transition-delay: 150ms; }
  .rs-doors .m-row:hover .m-go { transform: translateX(5px); }
  .rs-doors .m-row:hover .m-go-apart, .rs-doors .m-row:focus-visible .m-go-apart { opacity: 0; }
  .rs-doors .m-row:hover .m-go-lig, .rs-doors .m-row:focus-visible .m-go-lig { opacity: 1; }
  .rs-doors .m-group:hover .m-group-kids, .rs-doors .m-group:focus-within .m-group-kids { grid-template-rows: 1fr; transition-delay: 150ms; }
  .rs-doors .m-group:hover > .m-row--parent .m-go, .rs-doors .m-group:focus-within > .m-row--parent .m-go { transform: rotate(90deg); }
  .rs-doors .m-group:hover > .m-row--parent .m-label, .rs-doors .m-group:focus-within > .m-row--parent .m-label { opacity: 0.55; }
  .rs-doors .m-group:hover > .m-row--parent .m-descwrap, .rs-doors .m-group:focus-within > .m-row--parent .m-descwrap { grid-template-rows: 1fr; opacity: 1; transition-delay: 150ms; }
}

/* Manifesto + year-mark — the takeover's foot. */
.rs-doors .m-manifesto {
  margin: 24px 0 0; padding: 11px var(--menu-x-r) 11px var(--menu-x-l);
  font-family: var(--mono, "Fira Code", ui-monospace, monospace); font-size: var(--t-small); letter-spacing: var(--track-eyebrow);
  line-height: 1.8; text-transform: lowercase; color: var(--ink); white-space: nowrap;
}
.rs-doors .m-manifesto .m-dot { color: var(--spark); }
.rs-doors .m-foot {
  margin-top: auto; display: flex; justify-content: center;
  padding: 28px var(--menu-x-r) calc(20px + env(safe-area-inset-bottom, 0px));
  font-family: var(--mono, "Fira Code", ui-monospace, monospace); font-size: var(--t-caption); letter-spacing: var(--track-eyebrow); text-transform: lowercase;
  color: var(--faint, #6b7076); text-align: center;
}
/* The credit is a quiet link — Fira Code, lowercase. At rest it reads
   "human rights reserved"; on hover the three words draw together, ".org"
   unfurls, and the mark underlines into humanrightsreserved.org. No colour
   shift — the underline (in its own quiet ink) is the only tell. */
.rs-doors .m-foot-mark {
  display: inline-flex; align-items: center; min-height: var(--hit, 44px);
  color: var(--dim, #9aa0a6); text-decoration: none;
  font-family: var(--mono, "Fira Code", ui-monospace, monospace); text-transform: none;
  border-bottom: 1px solid transparent; cursor: pointer;
  transition: border-color 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-doors .m-foot-mark:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.rs-doors .m-hrr {
  display: inline-flex; align-items: baseline; gap: 0.5ch;
  transition: gap 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-doors .m-hrr-tld {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: baseline;
  max-width: 0; opacity: 0;
  transition: max-width 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
@media (hover: hover) {
  .rs-doors .m-foot-mark:hover,
  .rs-doors .m-foot-mark:focus-visible { border-bottom-color: currentColor; }
  .rs-doors .m-foot-mark:hover .m-hrr,
  .rs-doors .m-foot-mark:focus-visible .m-hrr { gap: 0; }
  .rs-doors .m-foot-mark:hover .m-hrr-tld,
  .rs-doors .m-foot-mark:focus-visible .m-hrr-tld { max-width: 6ch; opacity: 1; }
}

/* Reduced motion — still the doors, just no travel. */
@media (prefers-reduced-motion: reduce) {
  .rs-doors .m-descwrap, .rs-doors .m-go, .rs-doors .m-go-apart, .rs-doors .m-go-lig,
  .rs-doors .m-label, .rs-doors .m-tag, .rs-doors .m-group-kids,
  .rs-doors .m-foot-mark, .rs-doors .m-hrr, .rs-doors .m-hrr-tld { transition: none !important; }
}