/* The companion on a laptop or desktop screen, loaded only at 1024px and
   wider (src/apps/companion.njk). The game views become two columns inside a
   wider case file: a sticky sidebar with every stage, the documents and their
   pictures, and the page beside it. The sidebar replaces the dock. Welcome
   stays the single column companion.css sets. */

:root {
  --side-w: 288px;
  --wide-file: 1180px;
}

[data-view]:not([data-view="welcome"]) .file {
  display: grid;
  max-width: var(--wide-file);
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  align-items: start;
}

[data-view]:not([data-view="welcome"]) .app-bar {
  max-width: var(--wide-file);
}

.dock,
.bar-search {
  display: none;
}

[data-view]:not([data-view="welcome"]) main {
  padding-bottom: 0;
}

.side:not(:empty) {
  position: sticky;
  top: 0;
  display: block;
  max-height: 100vh;
  overflow-y: auto;
  padding: calc(var(--bar-h) + var(--rail-h) + 28px) 20px 32px 32px;
  border-right: 1px solid var(--line);
}

.side-title {
  margin: 0 0 8px;
  color: var(--signal-red);
  font-family: var(--label);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.side-link {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  color: var(--navy);
  line-height: 1.3;
  text-decoration: none;
}

a.side-link:hover .label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.side-link .num {
  color: var(--signal-red);
  font-weight: 700;
}

.side-link.solved .num::after {
  content: " \2713" / "";
  color: var(--success);
}

.side-shop {
  margin: 0;
  padding: 16px 8px 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.side-link.locked {
  color: var(--muted);
}

.side-link[aria-current="page"] {
  background: var(--story);
  box-shadow: inset 3px 0 0 var(--signal-red);
}

/* The page column is wider than a phone's, so the reading text keeps a
   measure while pictures use the full width. */
.page > p,
.page > .story,
.page > .questions {
  max-width: 68ch;
}