/* IP School, the AI Studio and the wiki share one masthead, so moving between them only changes
   what is in it: the title on the left, a search in the middle, and the same way to every view
   on the right, with the one you are in lit. */
.view-masthead {
  --vm-line: #2e2c29;
  --vm-text: #f5f2ec;
  --vm-muted: #a39d93;
  --vm-display: 'Oldschool Grotesk Condensed', 'Arial Narrow', Arial, sans-serif;
  position: relative; z-index: 4; flex: none;
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(200px, 400px) minmax(max-content, 1fr);
  align-items: center; gap: 12px 24px;
  min-height: 68px; box-sizing: border-box; padding: 12px 28px; border-bottom: 1px solid var(--vm-line);
}
.view-start { display: flex; align-items: center; gap: 16px; min-width: 0; }
.view-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--vm-text); font: inherit; text-align: left; }
button.view-brand { cursor: pointer; }
.view-brand-icon { width: 34px; height: 34px; flex: none; fill: #fc5b0a; }
.view-brand > span, .view-brand > div { display: flex; flex-direction: column; gap: 3px; }
.view-title { margin: 0; font: 900 24px/1 var(--vm-display); text-transform: uppercase; white-space: nowrap; }
.view-label { margin: 0; color: var(--vm-muted); font: 500 12px/1 var(--vm-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* ---- the search: each view looks through its own things ---- */
.view-search { position: relative; grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
.view-search > svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--vm-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.view-search:focus-within > svg { stroke: var(--vm-text); }
.view-search input[type="search"] { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: none; height: 36px; margin: 0; padding: 0 14px 0 38px; border: 1px solid #3a3a3f; border-radius: 999px; background: #161618; color: var(--vm-text); font: 14px/1 -apple-system, "Segoe UI", sans-serif; }
.view-search input[type="search"]::placeholder { color: #8a847b; }
.view-search input[type="search"]:focus { outline: none; border-color: #fc5b0a; box-shadow: 0 0 0 3px #fc5b0a33; }
/* The wiki's results list (wiki.css) opens in the same place as the others. */
.view-search-results, .view-search #wiki-list { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 6; width: max(100%, 380px); max-width: calc(100vw - 48px); max-height: min(480px, 60dvh); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 8px; border: 1px solid #454036; border-radius: 14px; background: #1d1d1d; box-shadow: 0 16px 40px #0009; transform: translateX(-50%); }
.view-search-group { margin: 10px 10px 4px; color: #ff9a66; font: 800 12px/1.4 -apple-system, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.view-search-group:first-child { margin-top: 4px; }
.view-search-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: #e9e4da; cursor: pointer; font: 15px/1.3 -apple-system, "Segoe UI", sans-serif; text-align: left; }
.view-search-item:hover, .view-search-item:focus-visible, .view-search-more:hover, .view-search-more:focus-visible { background: #2a2926; outline: none; }
.view-search-thumb { display: grid; place-items: center; width: 36px; height: 36px; flex: none; box-sizing: border-box; border-radius: 8px; object-fit: cover; background: #2a2a2e; color: #a39d93; font-size: 13px; }
.view-search-thumb.is-round { border-radius: 50%; }
svg.view-search-mark, img.view-search-mark { padding: 7px; fill: #fc5b0a; }
.view-search-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.view-search-text strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.view-search-text small { overflow: hidden; color: #98918a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.view-search-more { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px; border: 0; border-radius: 8px; background: none; color: #ffd400; cursor: pointer; font: 700 13px/1.3 -apple-system, "Segoe UI", sans-serif; text-align: left; }
.view-search-status, .view-search-note { margin: 10px; color: #98918a; font: 13px/1.4 -apple-system, "Segoe UI", sans-serif; }
.view-search-note { margin-top: 6px; font-size: 12px; }
/* The one row that points to another view sits under a rule at the bottom. */
.view-search-item.view-search-elsewhere { position: relative; margin-top: 9px; }
.view-search-item.view-search-elsewhere::before { content: ""; position: absolute; top: -5px; left: 10px; right: 10px; border-top: 1px solid #34302a; }
.view-search-where { flex: none; color: #ff9a66; font: 900 13px/1 var(--vm-display, 'Oldschool Grotesk Condensed', 'Arial Narrow', sans-serif); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* ---- the way to every view, in the same order everywhere ---- */
.view-nav { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 4px; }
.view-nav button { padding: 8px 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--vm-muted); cursor: pointer; font: 900 14px/1.3 var(--vm-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.view-nav button:hover { background: #222221; color: var(--vm-text); }
/* Where you are reads quietly: off-white on a faint pill, no yellow. */
.view-nav button[aria-current="page"] { background: rgba(255, 255, 255, .045); color: var(--vm-text); }
.view-nav button[aria-current="page"]:hover { background: #222221; }
.view-nav button:focus-visible { outline: 2px solid #fc5b0a; outline-offset: 2px; }
/* Back and Map leave this view rather than switch it, so they never wear the current view's
   fill; a thin rule sets them apart from the three views. */
.view-nav .view-map, .view-nav .view-back { position: relative; padding: 8px 14px; color: var(--vm-text); }
.view-nav .view-map { margin-left: 21px; }
.view-nav .view-back { margin-right: 21px; }
.view-nav .view-map::before, .view-nav .view-back::after { content: ""; position: absolute; top: 9px; bottom: 9px; border-left: 1px solid #34302a; }
.view-nav .view-map::before { left: -13px; }
.view-nav .view-back::after { right: -13px; }

/* Tablets keep everything on one centred row: the title without its subtitle, the way to the other
   views, and a small search at the right that opens a page of its own (below). */
@media (max-width: 900px) {
  .view-masthead { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; min-height: 60px; padding: 10px 20px; }
  .view-label, #community-presence { display: none; }
  .view-brand > span, .view-brand > div { gap: 0; }
  .view-nav { grid-column: 2; grid-row: 1; }
  .view-search { grid-column: 3; grid-row: 1; width: auto; }
  dialog:not(.view-searching) .view-search input[type="search"] { width: 116px; cursor: pointer; }
}
@media (max-width: 640px) {
  .view-masthead { min-height: 0; padding: 10px 14px; gap: 10px; }
  .view-brand-icon { width: 28px; height: 28px; }
  .view-title { font-size: 20px; }
  /* The title already says where you are. */
  .view-nav button[aria-current="page"] { display: none; }
  .view-nav { gap: 2px; }
  .view-nav button { font-size: 12px; padding: 7px 8px; }
  .view-nav .view-map, .view-nav .view-back { padding: 7px 10px; }
  .view-nav .view-map { margin-left: 6px; }
  .view-nav .view-back { margin-right: 6px; }
  .view-nav .view-map::before, .view-nav .view-back::after { display: none; }
  /* Only the magnifier shows until the search opens. */
  dialog:not(.view-searching) .view-search input[type="search"] { width: 36px; padding: 0; }
  dialog:not(.view-searching) .view-search input[type="search"]::placeholder { color: transparent; }
  dialog:not(.view-searching) .view-search > svg { left: 10px; }
}
/* Phones move between views from the tab bar at the bottom, so only a way back stays up here. */
@media (max-width: 480px) {
  .view-nav > :not(.view-back) { display: none; }
  .view-nav .view-back { margin-right: 0; }
  /* Full screen, with the top kept clear of the status bar. */
  #promptmodal, #wikimodal, #communitymodal, #profilemodal {
    width: 100vw; height: calc(100dvh - var(--app-tabs-h)); max-width: none; max-height: none; box-sizing: border-box;
    margin: 0; inset: 0 0 auto; border: 0; border-radius: 0; padding-top: var(--safe-top);
  }
}

/* ---- the search page: tablets and phones open the search over the whole view, results under it ---- */
.view-search-back { display: none; }
@media (max-width: 900px) {
  dialog.view-searching :is(.prompt-shell, .community-shell) > :not(.view-masthead),
  dialog.view-searching .wiki-shell > :not(.wiki-nav),
  dialog.view-searching .wiki-nav > :not(.view-masthead) { display: none !important; }
  dialog.view-searching .wiki-nav { display: flex !important; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; }
  dialog.view-searching .view-masthead { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 14px 0; border-bottom: 0; }
  dialog.view-searching .view-masthead > :not(.view-search) { display: none !important; }
  dialog.view-searching .view-search { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
  dialog.view-searching .view-search input[type="search"] { width: calc(100% - 54px); height: 44px; margin-left: 54px; padding-left: 40px; font-size: 16px; }
  dialog.view-searching .view-search > svg { top: 22px; left: 68px; }
  dialog.view-searching .view-search-back {
    position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid #3a3a3f; border-radius: 50%; background: #161618; color: var(--vm-text); cursor: pointer;
  }
  dialog.view-searching .view-search-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  dialog.view-searching .view-search-back:hover { background: #222221; }
  dialog.view-searching :is(.view-search-results, .view-search #wiki-list) {
    position: static; flex: 1; min-height: 0; width: auto; max-width: none; max-height: none;
    margin: 12px -14px 0; padding: 6px 8px 24px; border: 0; border-top: 1px solid var(--vm-line); border-radius: 0;
    background: transparent; box-shadow: none; transform: none;
  }
  /* Before there is anything to show, the page says what it can find. */
  dialog.view-searching .view-search::after { content: attr(data-hint); margin: 26px 4px 0; color: var(--vm-muted); font: 15px/1.5 -apple-system, "Segoe UI", sans-serif; }
  dialog.view-searching .view-search:has(.view-search-results:not([hidden]))::after,
  dialog.view-searching .browse-open .view-search::after { display: none; }
}