/* RICEMATRIX shell — global navigator + runtime chrome.
   Deliberately namespaced and self-contained so it never inherits from, or
   leaks into, each page's own Tailwind palette. */

.rm-shell, .rm-shell * { box-sizing: border-box; }

:root {
  --rm-bg: #070c14;
  --rm-panel: #0d141f;
  --rm-line: #1d2938;
  --rm-text: #e6edf7;
  --rm-dim: #7d8da3;
  --rm-accent: #22d3ee;
  --rm-accent-soft: rgba(34, 211, 238, 0.12);
  --rm-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rm-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- launcher ---------- */
.rm-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--rm-line);
  border-radius: 999px;
  background: var(--rm-panel);
  color: var(--rm-text);
  font-family: var(--rm-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.rm-launcher:hover { transform: translateY(-2px); border-color: var(--rm-accent); }
.rm-launcher:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-launcher .rm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rm-accent);
  box-shadow: 0 0 0 3px var(--rm-accent-soft);
}
.rm-launcher kbd {
  font-family: var(--rm-mono);
  font-size: 11px;
  color: var(--rm-dim);
  border: 1px solid var(--rm-line);
  border-radius: 4px;
  padding: 1px 5px;
}
@media (max-width: 640px) { .rm-launcher kbd { display: none; } }

/* ---------- mobile menu button ----------
   Injected into the page's own header, shown only while that header's nav is
   hidden by the design's breakpoint. Inherits colour so it reads correctly on
   every screen's palette, light or dark. */
.rm-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}
.rm-menu:hover { opacity: 1; }
.rm-menu:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ---------- palette overlay ---------- */
.rm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: none;
  padding: 8vh 16px 16px;
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(6px);
  font-family: var(--rm-font);
}
.rm-overlay[data-open="true"] { display: block; }

.rm-palette {
  max-width: 720px;
  margin: 0 auto;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rm-line);
  border-radius: 14px;
  background: var(--rm-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: rm-rise 0.16s ease-out;
}
@keyframes rm-rise { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .rm-palette { animation: none; }
  .rm-launcher { transition: none; }
}

.rm-palette-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rm-line);
}
.rm-palette-head svg { flex: none; color: var(--rm-dim); }
.rm-search {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--rm-text);
  font-family: var(--rm-font);
  font-size: 15px;
  outline: none;
}
.rm-search::placeholder { color: var(--rm-dim); }
.rm-close {
  border: 1px solid var(--rm-line);
  background: transparent;
  color: var(--rm-dim);
  border-radius: 6px;
  font-family: var(--rm-mono);
  font-size: 11px;
  padding: 3px 7px;
  cursor: pointer;
}
.rm-close:hover { color: var(--rm-text); border-color: var(--rm-accent); }

.rm-list { overflow-y: auto; padding: 6px 0 10px; }
.rm-group {
  padding: 12px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-dim);
}
.rm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  color: var(--rm-text);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.rm-item:hover, .rm-item[data-active="true"] {
  background: var(--rm-accent-soft);
  border-left-color: var(--rm-accent);
}
.rm-item[aria-current="page"] { color: var(--rm-accent); font-weight: 600; }
.rm-item[aria-current="page"]::after {
  content: "current";
  margin-left: auto;
  font-family: var(--rm-mono);
  font-size: 10px;
  color: var(--rm-dim);
}
.rm-item .rm-ico {
  flex: none;
  width: 22px;
  text-align: center;
  font-size: 17px;
  color: var(--rm-dim);
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 400;
}
.rm-item:hover .rm-ico, .rm-item[aria-current="page"] .rm-ico { color: var(--rm-accent); }
.rm-empty { padding: 26px 16px; text-align: center; color: var(--rm-dim); font-size: 13px; }

.rm-palette-foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--rm-line);
  color: var(--rm-dim);
  font-size: 11px;
  font-family: var(--rm-mono);
}

/* ---------- flow bar (prev / next within a wizard) ---------- */
.rm-flow {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--rm-line);
  border-radius: 999px;
  background: var(--rm-panel);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--rm-font);
}
.rm-flow a, .rm-flow span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--rm-text);
}
.rm-flow a:hover { background: var(--rm-accent-soft); color: var(--rm-accent); }
.rm-flow span { color: var(--rm-dim); font-family: var(--rm-mono); font-size: 11px; }
@media (max-width: 640px) { .rm-flow { display: none; } }

/* ---------- toast ---------- */
.rm-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2147483200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.rm-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--rm-line);
  border-radius: 8px;
  background: var(--rm-panel);
  color: var(--rm-text);
  font-family: var(--rm-font);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: rm-toast-in 0.18s ease-out;
}
.rm-toast[data-tone="ok"] { border-left: 3px solid #34d399; }
.rm-toast[data-tone="info"] { border-left: 3px solid var(--rm-accent); }
@keyframes rm-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- generic interaction affordances ---------- */
[data-nav] { cursor: pointer; }
.rm-hidden { display: none !important; }

/* ---------- layout repairs ----------
   Two export defects that make a page scroll sideways at desktop width. Both
   are scoped so they can only affect the exact broken pattern. */

/* simulation-sandbox: the header is `w-full` AND `ml-64` — full body width plus
   a 16rem margin to clear the fixed sidebar, so it overflows by exactly the
   margin (1536px in a 1280px viewport). Sibling screens with the same sidebar
   correctly use w-[calc(100%-16rem)]; this restores that intent. */
header.w-full.ml-64 { width: calc(100% - 16rem); }

/* network-intel: the header's action cluster is a few pixels wider than the
   space left for it. Flex children default to min-width:auto and so refuse to
   shrink below their content, pushing the document instead. Allowing them to
   shrink is a no-op for headers that already fit. */
header { min-width: 0; }
header > * { min-width: 0; }