/* Offsets assumed from style.css. Override these if the header, nav or minimap move. */
:root {
  --ms-top: 16px;
  --ms-width: 440px;
  --ms-clear-left: 320px;  /* brand right edge, desktop */
  --ms-clear-right: 292px; /* minimap left edge, desktop */
  --ms-mid-top: 92px;      /* below brand and minimap at 601-899px */
  --ms-mid-left: 16px;
  --ms-phone-top: 64px;    /* below the phone brand */
  --ms-phone-drop-top: 116px;
}
.ms { position: fixed; z-index: 40; top: var(--ms-top); height: 44px; box-sizing: border-box;
  left: max(var(--ms-clear-left), calc(50vw - var(--ms-width) / 2));
  right: max(var(--ms-clear-right), calc(50vw - var(--ms-width) / 2));
  display: flex; align-items: center; background: var(--paper, #f0e4c4); color: var(--ink, #2c2416);
  border: 2px solid var(--edge, #8a6f3e); border-radius: 999px; box-shadow: var(--shadow); }
.ms:focus-within { outline: 3px solid #186a96; outline-offset: -1px; }
.ms-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-glass { margin-left: 14px; opacity: .7; }
.ms-input { flex: 1; min-width: 0; height: 100%; padding: 0 8px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.ms-input::placeholder { color: inherit; opacity: .6; }
.ms-clear { flex: none; margin-right: 2px; border-radius: 50%; min-width: 40px; height: 40px; padding: 0; border: 0; font-size: 20px; }
.ms-clear[hidden] { display: none; }
.ms-drop { position: absolute; top: calc(100% + 6px); left: -2px; right: -2px; display: flex; flex-direction: column; max-height: min(60vh, 460px);
  background: var(--paper, #f0e4c4); border: 2px solid var(--edge, #8a6f3e); border-radius: var(--r, 12px); overflow: hidden; box-shadow: var(--shadow); }
.ms-drop[hidden] { display: none; }
.ms-list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.ms-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; box-sizing: border-box; cursor: pointer; border-top: 1px solid rgb(138 111 62 / .3); }
.ms-opt:first-child { border-top: 0; }
.ms-opt:hover { background: #e2d2a4; }
.ms-opt[aria-selected="true"] { background: #5a4522; color: var(--paper, #f0e4c4); }
.ms-opt span { min-width: 0; display: flex; flex-direction: column; }
.ms-opt b, .ms-opt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-opt b { font-size: 14px; font-weight: 600; }
.ms-opt small { font-size: 12px; opacity: .8; }
.ms-note { margin: 0; padding: 10px; font-size: 13px; }
.ms-note[hidden] { display: none; }
.ms-foot { margin: 0; padding: 3px 10px; border-top: 2px solid var(--edge, #8a6f3e); font-size: 11px; }
.ms-foot a { color: inherit; }
.ms-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ms-pin { position: relative; padding-bottom: 10px; pointer-events: none; }
.ms-pin span { display: block; padding: 2px 8px; background: #b5301f; color: #fff; border: 2px solid #6e1a10; white-space: nowrap; font-size: 13px; font-weight: 600; }
.ms-pin::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -7px; border: 7px solid transparent; border-top: 10px solid #6e1a10; border-bottom: 0; }
.ms-drop-in { animation: ms-drop .32s cubic-bezier(.3, 1.4, .6, 1); }
@keyframes ms-drop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ms-drop-in { animation: none; } }
@media (min-width: 601px) and (max-width: 899px) {
  .ms { top: var(--ms-mid-top); left: var(--ms-mid-left); right: 76px; }
}
@media (max-width: 600px) {
  .ms { top: var(--ms-phone-top); left: 12px; right: 68px; }
  .ms-glass { display: none; }
  .ms-drop { position: fixed; top: var(--ms-phone-drop-top); left: 12px; right: 12px; max-height: calc(100dvh - var(--ms-phone-drop-top) - 16px); }
}