/* Lane 152: shared UI kit. The ONLY stylesheet that may hold colour literals (exceptions: docs/lanes/LANE152_REPORT.md, tests/ui-style.test.cjs).
   Every window, title bar, close button, tab strip, button, focus ring and tooltip is styled here from the tokens below.
   Panels opt in with class names only: .msh-window (root), .msh-titlebar, .msh-close, .msh-tabs / .msh-tab, .msh-wbtn, .msh-body. */
:root {
  --msh-bg-0: #0d0a08;
  --msh-bg-1: #17120f;
  --msh-bg-2: #291f18;
  --msh-bg-3: #3a2d20;
  --msh-bg-4: #5a4630;
  --msh-parchment: #f3e3b6;
  --msh-parchment-2: #d8c18a;
  --msh-parchment-ink: #5b3d17;
  --msh-border-dim: #4a3d25;
  --msh-border: #8b6336;
  --msh-border-hi: #bd9658;
  --msh-text: #ead8b7;
  --msh-text-hi: #f5ecd6;
  --msh-text-gold: #f1d69b;
  --msh-text-muted: #a89878;
  --msh-text-dim: #7a6c55;
  --msh-accent: #d5ad60;
  --msh-accent-hi: #f5ce45;
  --msh-accent-lo: #79501f;
  --msh-focus: #facc15;
  --msh-ok: #5ee890;
  --msh-ok-lo: #15803d;
  --msh-warn: #f59e0b;
  --msh-danger: #e05a4a;
  --msh-danger-lo: #8a2a22;
  --msh-info: #55baff;
  --msh-info-lo: #2a5a8a;
  --msh-info-bg: #14243b;
  --msh-info-border: #6d8bae;
  --msh-info-text: #9fb3c8;
  --msh-violet: #c084fc;
  --msh-slate: #64748b;
  --msh-slate-lt: #cbd5e1;
  --msh-grey: #8a8f96;
  --msh-white: #ffffff;
  --msh-black: #000000;
  --msh-rarity-common: #aab6c8;
  --msh-rarity-uncommon: #5ee890;
  --msh-rarity-rare: #55baff;
  --msh-rarity-epic: #bf82ff;
  --msh-rarity-legendary: #ffc653;

  /* the same colours as r, g, b triplets, for rgba(var(--msh-NAME-rgb), alpha) */
  --msh-bg-0-rgb: 13, 10, 8;
  --msh-bg-1-rgb: 23, 18, 15;
  --msh-bg-2-rgb: 41, 31, 24;
  --msh-bg-3-rgb: 58, 45, 32;
  --msh-bg-4-rgb: 90, 70, 48;
  --msh-parchment-rgb: 243, 227, 182;
  --msh-parchment-2-rgb: 216, 193, 138;
  --msh-parchment-ink-rgb: 91, 61, 23;
  --msh-border-dim-rgb: 74, 61, 37;
  --msh-border-rgb: 139, 99, 54;
  --msh-border-hi-rgb: 189, 150, 88;
  --msh-text-rgb: 234, 216, 183;
  --msh-text-hi-rgb: 245, 236, 214;
  --msh-text-gold-rgb: 241, 214, 155;
  --msh-text-muted-rgb: 168, 152, 120;
  --msh-text-dim-rgb: 122, 108, 85;
  --msh-accent-rgb: 213, 173, 96;
  --msh-accent-hi-rgb: 245, 206, 69;
  --msh-accent-lo-rgb: 121, 80, 31;
  --msh-focus-rgb: 250, 204, 21;
  --msh-ok-rgb: 94, 232, 144;
  --msh-ok-lo-rgb: 21, 128, 61;
  --msh-warn-rgb: 245, 158, 11;
  --msh-danger-rgb: 224, 90, 74;
  --msh-danger-lo-rgb: 138, 42, 34;
  --msh-info-rgb: 85, 186, 255;
  --msh-info-lo-rgb: 42, 90, 138;
  --msh-info-bg-rgb: 20, 36, 59;
  --msh-info-border-rgb: 109, 139, 174;
  --msh-info-text-rgb: 159, 179, 200;
  --msh-violet-rgb: 192, 132, 252;
  --msh-slate-rgb: 100, 116, 139;
  --msh-slate-lt-rgb: 203, 213, 225;
  --msh-grey-rgb: 138, 143, 150;
  --msh-white-rgb: 255, 255, 255;
  --msh-black-rgb: 0, 0, 0;
  --msh-rarity-common-rgb: 170, 182, 200;
  --msh-rarity-uncommon-rgb: 94, 232, 144;
  --msh-rarity-rare-rgb: 85, 186, 255;
  --msh-rarity-epic-rgb: 191, 130, 255;
  --msh-rarity-legendary-rgb: 255, 198, 83;
  /* spacing, radii, shadows, layers */
  --msh-space-1: 4px; --msh-space-2: 8px; --msh-space-3: 12px; --msh-space-4: 16px; --msh-space-5: 24px;
  --msh-radius-sm: 4px; --msh-radius-md: 8px; --msh-radius-lg: 12px; --msh-radius-pill: 999px;
  --msh-shadow-1: 0 2px 6px rgba(var(--msh-black-rgb), .45);
  --msh-shadow-2: 0 8px 24px rgba(var(--msh-black-rgb), .6);
  --msh-shadow-window: 0 16px 55px rgba(var(--msh-black-rgb), .7), inset 0 0 0 1px rgba(var(--msh-border-hi-rgb), .35);
  --msh-scrim: rgba(var(--msh-black-rgb), .55);
  --msh-hairline: rgba(var(--msh-white-rgb), .1);
  --msh-z-window: 11000; --msh-z-tooltip: 12000;
  /* font sizes honour the Text size setting (--ui-text-scale, js/settings.js) */
  --msh-text-scale: var(--ui-text-scale, 1);
  --msh-font-xs: calc(11px * var(--msh-text-scale)); --msh-font-sm: calc(12px * var(--msh-text-scale)); --msh-font-md: calc(14px * var(--msh-text-scale));
  --msh-font-lg: calc(16px * var(--msh-text-scale)); --msh-font-xl: calc(20px * var(--msh-text-scale));
  --msh-font: system-ui, -apple-system, "Segoe UI", sans-serif; --msh-font-display: Georgia, "Times New Roman", serif;
  --msh-target: 32px;          /* minimum control height on desktop */
  --msh-bar-clear: 96px;       /* space kept free at the bottom for the action bar; js/ui-kit.js measures the real bar */
  --msh-focus-ring: 3px solid var(--msh-focus);
  /* phone sheet insets and the minimap width: js/ui-kit.js measures the real HUD blocks (Lane 172) */
  --msh-sheet-top: 8px; --msh-sheet-left: 8px; --msh-sheet-right: 8px; --msh-sheet-bottom: var(--msh-bar-clear); --msh-minimap-w: 0px;
}
@media (pointer: coarse), (max-width: 767px) { :root { --msh-target: 44px; } }

/* ---- window frame ---- */
.msh-window { background: linear-gradient(145deg, var(--msh-bg-2), var(--msh-bg-1)) !important; border: 2px solid var(--msh-border) !important; border-radius: var(--msh-radius-md) !important;
  box-shadow: var(--msh-shadow-window) !important; color: var(--msh-text) !important; font-family: var(--msh-font); box-sizing: border-box; padding: var(--msh-space-3) !important;
  max-width: calc(100vw - 2 * var(--msh-space-2)); }
.msh-window-titlebar, .msh-titlebar { min-height: 42px; display: flex; align-items: center; gap: var(--msh-space-2); padding: 0 var(--msh-space-2); box-sizing: border-box;
  background: linear-gradient(var(--msh-accent-lo), var(--msh-bg-3)); border-bottom: 1px solid var(--msh-border-hi); color: var(--msh-text-gold); touch-action: none; user-select: none; }
.msh-window-titlebar { cursor: move; }
/* a panel's own header bleeds to the frame edge; windows framed by js/ui-window.js (.msh-flush, set by js/ui-kit.js) have no padding to bleed past */
.msh-window > .msh-titlebar { margin: calc(-1 * var(--msh-space-3)) calc(-1 * var(--msh-space-3)) var(--msh-space-3); border-radius: calc(var(--msh-radius-md) - 2px) calc(var(--msh-radius-md) - 2px) 0 0; }
.msh-window.msh-flush { --msh-inset: var(--msh-space-3); padding: 0 var(--msh-inset) var(--msh-inset) !important; }
.msh-window.msh-flush > .msh-window-titlebar, .msh-window.msh-flush > .msh-titlebar { margin: 0 calc(-1 * var(--msh-inset)) var(--msh-space-2); }
h2.msh-titlebar { justify-content: center; }
h2.msh-titlebar, .msh-titlebar h2, .msh-titlebar h3, .msh-window-title { flex: 1; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .08em; color: var(--msh-text-gold); font: 700 var(--msh-font-sm)/1 var(--msh-font); }
.msh-window-emblem { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--msh-bg-2); border: 1px solid var(--msh-border-hi); color: var(--msh-text-gold); }
.msh-window-close, .msh-close { min-width: 28px; min-height: 28px; width: 28px; height: 28px; padding: 0; border: 1px solid var(--msh-border-hi); border-radius: 50%;
  background: linear-gradient(var(--msh-accent), var(--msh-accent-lo)); color: var(--msh-bg-1); font-size: 20px; line-height: 20px; font-weight: 900; cursor: pointer; }
.msh-body { padding: var(--msh-space-3); }

/* visually hidden but still read by screen readers (a heading the title bar already shows) */
.msh-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- tab strip ---- */
.msh-tabs { display: flex; flex-wrap: wrap; gap: var(--msh-space-1); padding: var(--msh-space-1) 0; }
.msh-tab { min-height: var(--msh-target); padding: 0 var(--msh-space-3); border: 1px solid var(--msh-border-dim); border-bottom-width: 2px; border-radius: var(--msh-radius-sm) var(--msh-radius-sm) 0 0;
  background: var(--msh-bg-3); color: var(--msh-text-muted); font: 600 var(--msh-font-sm) var(--msh-font); cursor: pointer; }
.msh-tab:hover { background: var(--msh-bg-4); color: var(--msh-text-hi); }
.msh-tab[aria-selected="true"], .msh-tab[aria-pressed="true"], .msh-tab.active, .msh-tab.is-active { background: var(--msh-bg-2); color: var(--msh-text-gold); border-color: var(--msh-border-hi); }

/* ---- buttons ---- */
.msh-wbtn { min-height: var(--msh-target); padding: 0 var(--msh-space-3); border: 1px solid var(--msh-border-hi); border-radius: var(--msh-radius-sm);
  background: linear-gradient(var(--msh-accent), var(--msh-accent-lo)); color: var(--msh-bg-1); font: 700 var(--msh-font-sm) var(--msh-font); cursor: pointer; }
.msh-wbtn:hover:not(:disabled) { filter: brightness(1.12); }
.msh-wbtn:disabled, .msh-wbtn[aria-disabled="true"] { background: var(--msh-bg-4); color: var(--msh-text-dim); border-color: var(--msh-border-dim); cursor: not-allowed; filter: none; }
.msh-wbtn.secondary { background: var(--msh-bg-3); color: var(--msh-text); border-color: var(--msh-border); }
.msh-wbtn.danger { background: linear-gradient(var(--msh-danger), var(--msh-danger-lo)); color: var(--msh-white); }

/* ---- keyboard focus: one ring everywhere ---- */
button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible,
[tabindex]:focus-visible, .msh-window :focus-visible { outline: var(--msh-focus-ring) !important; outline-offset: 2px !important; }

/* ---- rarity (item names, borders) ---- */
.msh-rarity-common { color: var(--msh-rarity-common); } .msh-rarity-uncommon { color: var(--msh-rarity-uncommon); } .msh-rarity-rare { color: var(--msh-rarity-rare); }
.msh-rarity-epic { color: var(--msh-rarity-epic); } .msh-rarity-legendary { color: var(--msh-rarity-legendary); }

/* ---- tooltip (js/interactive-tooltips.js sets role="tooltip") ---- */
.msh-tooltip, [role="tooltip"] { background: var(--msh-bg-1) !important; color: var(--msh-text) !important; border: 1px solid var(--msh-border-hi) !important; border-radius: var(--msh-radius-sm) !important;
  box-shadow: var(--msh-shadow-2) !important; font-family: var(--msh-font) !important; font-size: var(--msh-font-sm) !important; z-index: var(--msh-z-tooltip) !important; }

/* ---- banner (status / reconnect / settlement messages) ---- */
.msh-banner { background: var(--msh-bg-2) !important; color: var(--msh-text-hi) !important; border: 1px solid var(--msh-border-hi) !important; border-radius: var(--msh-radius-lg) !important;
  box-shadow: var(--msh-shadow-1) !important; font: 600 var(--msh-font-sm) var(--msh-font) !important; }
.msh-banner.warn { border-color: var(--msh-warn) !important; } .msh-banner.danger { border-color: var(--msh-danger) !important; }

/* ---- touch: 44 px targets inside windows ---- */
@media (pointer: coarse), (max-width: 767px) {
  .msh-window button, .msh-window [role="button"], .msh-window [role="tab"], .msh-window select, .msh-window input[type="checkbox"], .msh-window input[type="radio"],
  .msh-window-close, .msh-close, .msh-wbtn, .msh-tab { min-width: 44px !important; min-height: 44px !important; }
  .msh-window-close, .msh-close { width: 44px !important; height: 44px !important; }
  .msh-window input[type="text"], .msh-window input[type="number"], .msh-window input:not([type]) { min-height: 44px !important; }
}
/* ---- desktop: windows keep clear of the action bar (js/ui-kit.js measures it and sets --msh-bar-clear) ---- */
@media (pointer: fine) and (min-width: 768px) {
  .msh-window { max-height: calc(100vh - var(--msh-bar-clear) - var(--msh-space-2)) !important; overflow: auto; }
}

/* ---- Lane 172: phone sheets. A window with .msh-sheet fills the free area between the HUD blocks (js/ui-kit.js measureSheet sets the four insets):
   below the minimap and above the joystick / action bar in portrait, between joystick and minimap in landscape. .msh-sheet-compact keeps its own height (prompts). ---- */
@media (pointer: coarse), (max-width: 767px) {
  .msh-sheet, .mpg-menu, .mpg-ready, .mpl-root, .mpt-card { position: fixed !important; left: var(--msh-sheet-left, 8px) !important; right: var(--msh-sheet-right, 8px) !important; top: var(--msh-sheet-top, 8px) !important; bottom: var(--msh-sheet-bottom, var(--msh-bar-clear)) !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; max-height: none !important; transform: none !important; translate: none !important; overflow: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; }
  .msh-sheet.msh-sheet-compact, .mpg-menu, .mpg-ready, .mpl-root, .mpt-card { bottom: auto !important; max-height: calc(100vh - var(--msh-sheet-top, 8px) - var(--msh-sheet-bottom, var(--msh-bar-clear))) !important; }
  .mpg-menu, .mpg-ready, .mpl-root, .mpt-card { box-sizing: border-box; }
  .msh-sheet input, .msh-sheet select, .msh-sheet textarea { max-width: 100%; box-sizing: border-box; }
}