/* The shell (Frankie, 10/16): the same left column on every page the site writes, the content on
   the right, so only the right side changes. Linked by the site's pages and written into the public
   wiki, which has its own stylesheet and a smaller base size, so the sizes here are in px. */

/* A page change keeps the shell still and fades the content, in browsers that can. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.shell { view-transition-name: shell; }

body.shelled { display: flex; align-items: flex-start; margin: 0; }
body.shelled > .content { flex: 1; min-width: 0; }

.shell {
  width: 290px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 3px; padding: 18px 12px 16px;
  background: var(--panel); border-right: 1px solid var(--line); font-size: 16px; line-height: 1.5;
}
.shell-brand {
  display: flex; align-items: center; gap: 7px; padding: 0 8px; text-decoration: none; color: inherit;
  font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: .02em; font-weight: 700;
}
.shell-brand .nautilus { height: .82em; width: auto; flex: none; }
/* In sepia the name is ocean blue (Frankie, 10/11). */
:root[data-theme="sepia"] .shell-brand { color: #1f5f8b; }
.shell-tag { margin: 8px 8px 16px; font-size: 14px; color: var(--muted); line-height: 1.4; }

/* The doors as a menu: the open one shows its sub-pages, the one you are on is in its colour. */
.shell-menu { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.shell-item { border-left: 5px solid var(--c); border-radius: 9px; }
.shell-item > a {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 0 9px 9px 0;
  text-decoration: none; color: inherit; font-family: var(--serif); font-size: 19px; font-weight: 700;
}
.shell-item > a .em { margin-left: auto; font-size: 16px; }
.shell-item > a:hover, .shell-item.open > a { background: var(--cb); }
.shell-item.open > a, .shell-item > a.on { color: var(--c); }
.shell-item ul { list-style: none; margin: 1px 0 8px; padding: 0 0 0 9px; display: none; }
.shell-item.open ul { display: block; }
.shell-item li a {
  display: flex; align-items: baseline; gap: 6px; padding: 4px 9px; margin: 1px 0; border-radius: 6px;
  text-decoration: none; color: inherit; font-size: 15px; border-left: 2px solid var(--line);
}
.shell-item li.hue a { border-left-color: var(--c); }
.shell-item li a:hover { background: var(--cb); }
.shell-item li a.on { background: var(--cb); color: var(--c); font-weight: 600; }
.shell-item li a .n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
/* Ask Sarjana sits at the bottom, with his portrait (Frankie, 10/16). */
.shell-ask { margin-top: auto; }
.shell-ask > a { padding: 6px 10px; }
.shell-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); flex: none; background: var(--card); }
/* On the wiki, its own list of articles sits in the Wiki door, drawn by the wiki. */
.shell-item .side {
  display: none; position: static; width: auto; height: auto; transform: none; padding: 2px 0 8px 9px;
  border: 0; background: none; overflow: visible; box-shadow: none;
}
.shell-item.open .side { display: block; }
.shell-item .side > h2 { display: none; }

/* The foot: the theme and sound buttons, the credits link. */
.shell-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted);
}
.shell-foot a { color: var(--muted); }
.shell-credits { width: 100%; text-align: center; margin-top: 2px; }
.shell-foot a.on { color: var(--ink); font-weight: 600; }
.theme-btn, .art-btn, .sound-btn {
  font: inherit; font-size: 13px; padding: 4px 11px; border-radius: 99px; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.theme-btn:hover, .art-btn:hover, .sound-btn:hover { background: var(--bg); }
/* The spoiler switch (D-531, D-535), red while spoilers are shown. */
.spoiler-btn.on { border-color: hsl(0 70% 50%); color: hsl(0 70% 45%); background: hsl(0 80% 50% / .1); }
:root[data-theme="dark"] .spoiler-btn.on { color: hsl(0 80% 72%); }
.lex-switch { margin: -4px 0 12px; }

/* The AI art switch (Frankie, 10/16): with it off, everything marked "ai" goes, on every page and
   in the wiki: the pictures made with Gemini or ChatGPT, the portraits and faces cut from them,
   the painted map and its names, and the menu entries and sections that hold nothing else. */
html[data-art="off"] .ai { display: none !important; }

/* The wiki's search, at the top of its column. */
body.shelled > .content > .top .search { margin: 0 auto; }

/* The menu can be hidden for more room on a computer, on every page, and stays hidden (Frankie,
   10/19 the battle; 10/22 every page). A tab on the column's edge. */
.menu-tab {
  position: fixed; top: 14px; left: 290px; z-index: 30; font: 600 14px/1 system-ui, sans-serif; cursor: pointer;
  padding: 8px 9px; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0;
  background: var(--panel); color: var(--ink); box-shadow: 2px 2px 6px rgb(0 0 0 / .15);
}
.menu-tab:hover { background: var(--card); }
html[data-menu="hidden"] .shell { display: none; }
html[data-menu="hidden"] .menu-tab { left: 0; }

/* A phone: a bar on top, the shell slides in from the left. */
.shell-bar, .shell-shade { display: none; }
@media (max-width: 860px) {
  .menu-tab { display: none; }
  html[data-menu="hidden"] .shell { display: flex; }
  .shell-bar {
    display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 54px;
    padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 20;
  }
  .shell-bar .shell-brand { font-size: 24px; padding: 0; }
  .shell-menu-btn {
    font: inherit; font-size: 14px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer;
    background: var(--card); color: var(--ink); border: 1px solid var(--line);
  }
  .shell {
    position: fixed; left: 0; top: 54px; height: calc(100vh - 54px); height: calc(100dvh - 54px); width: min(304px, 86vw); z-index: 15;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 30px rgb(0 0 0 / .25);
  }
  .shell > .shell-brand, .shell > .shell-tag { display: none; }
  body.menu-open .shell { transform: none; }
  body.menu-open .shell-shade { display: block; position: fixed; inset: 54px 0 0 0; background: rgb(0 0 0 / .4); z-index: 10; }
  body.shelled > main, body.shelled > .content { margin-top: 54px; }
  body.shelled > .content > .top { top: 54px; }
}