/* Commonplace shell: the tokens, sidebar, top bar and footer every page shares.
   Loaded last on both the study desk (trivia.css) and the geography wing
   (style.css), so the two halves read as one site rather than two apps. */

:root {
  --paper: #f6f4ee;       /* page */
  --surface: #fffefa;     /* cards, inputs */
  --white: #fffefa;
  --sunk: #eeeee5;        /* sidebar */
  --ink: #20352e;         /* text */
  --ink-soft: #4f5e55;
  --muted: #737b70;
  --line: #dedfd4;
  --line-strong: #c3cabb;
  --green: #254e3f;
  --green-soft: #61816a;
  --wash: #e8eee3;
  --orange: #b74729;
  --gold: #c58b2f;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --sidebar-w: 258px;
}

body.shell {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
body.shell button, body.shell input, body.shell select, body.shell textarea { font-family: inherit; }
body.shell :focus-visible { outline: 3px solid #d48b47; outline-offset: 3px; }

.skip-link { position: fixed; top: -100px; left: 10px; background: var(--surface); padding: 10px; z-index: 100; }
.skip-link:focus { top: 10px; }

/* ---------- sidebar */
.sidebar {
  width: var(--sidebar-w); position: fixed; inset: 0 auto 0 0; z-index: 50;
  background: var(--sunk); border-right: 1px solid var(--line);
  padding: 30px 22px 22px; display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar .brand {
  display: flex; gap: 11px; align-items: center; text-decoration: none; color: var(--ink);
  font: 700 24px var(--serif); letter-spacing: -.7px;
}
.sidebar .brand-mark {
  font: italic 40px/49px var(--serif); background: var(--green); color: var(--paper);
  width: 46px; height: 50px; text-align: center; border-radius: 4px; flex: none;
}
.sidebar .brand small { display: block; font: 600 7px var(--sans); letter-spacing: 1.1px; margin-top: 4px; color: var(--muted); }
.sidebar .nav-label {
  margin: 30px 10px 10px; color: var(--muted);
  font: 600 10px var(--sans); letter-spacing: 1.7px;
}
.sidebar nav { display: grid; gap: 2px; }
.sidebar .nav-item {
  border: 0; background: none; border-radius: 5px; text-align: left; color: var(--ink);
  padding: 9px 12px; font-size: 13px; display: flex; align-items: center; gap: 13px;
  text-decoration: none; cursor: pointer;
}
.sidebar .nav-item span { font-size: 17px; width: 21px; text-align: center; color: var(--green-soft); }
.sidebar .nav-item:hover { background: #e4e7dc; }
.sidebar .nav-item.active, .sidebar .nav-item[aria-current="page"] { background: #dce5d8; color: var(--green); font-weight: 600; }
.sidebar .nav-item.active span, .sidebar .nav-item[aria-current="page"] span { color: var(--green); }
.sidebar-note { margin: auto 10px 0; border-top: 1px solid #d3d7cb; padding-top: 20px; }
.sidebar-note p { font: 22px/1.3 var(--serif); margin: 10px 0; }
.sidebar-note em { color: var(--orange); }
.sidebar .tiny-label { font: 600 10px var(--sans); letter-spacing: 1.7px; }
.sidebar-note .small { font-size: 12px; }
.sidebar-note .muted { color: var(--muted); }
.storage-note { font-size: 10px; color: var(--muted); line-height: 1.6; margin: 13px 0 0; }

/* ---------- main column */
.shell-main {
  margin-left: var(--sidebar-w); padding: 0 52px; max-width: 1600px;
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column;
}
.shell-main > #view { flex: 1; }
.shell-main > footer span { color: var(--muted); }
.page * + .paper-page { margin-top: 18px; }
.shell-main > .page { flex: 1; padding: 34px 0 50px; }
.topbar {
  height: auto; min-height: 72px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 20px;
  font-size: 10px; letter-spacing: 1.5px; color: var(--muted);
}
.topbar .section-name { text-transform: uppercase; white-space: nowrap; }
.topbar #today { margin-left: 4px; white-space: nowrap; }
.shell-main > footer {
  border-top: 1px solid var(--line); padding: 19px 0; color: var(--muted);
  font-size: 10px; display: flex; justify-content: space-between; gap: 12px;
}

/* ---------- site search, in the top bar on every page */
.sitesearch { position: relative; margin-left: auto; z-index: 30; letter-spacing: 0; }
.sitesearch input {
  width: min(320px, 40vw); padding: 8px 14px; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 100px;
}
.sitesearch input::placeholder { color: var(--muted); }
.sitesearch input:focus { border-color: var(--green-soft); outline: none; }
.ac {
  position: absolute; top: calc(100% + 7px); right: 0;
  width: min(390px, 88vw); max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 18px 50px -14px rgba(32, 53, 46, .35); padding: 5px; z-index: 40;
}
.ac-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 4px; border: 0; background: none;
  color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
  font-size: 14px; letter-spacing: 0;
}
.ac-row.on, .ac-row:hover { background: var(--wash); }
.ac-row img { width: 28px; height: 19px; object-fit: cover; border-radius: 2px; flex: none; }
.ac-row .ac-dot {
  width: 28px; height: 19px; flex: none; border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--line) 0 3px, var(--surface) 3px 6px);
}
.ac-row b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.2; }
.ac-row small { color: var(--muted); font-size: .78rem; }

@media (max-width: 1100px) {
  :root { --sidebar-w: 215px; }
  .sidebar { padding-inline: 16px; }
  .sidebar .brand { font-size: 21px; }
  .shell-main { padding-inline: 30px; }
}
@media (max-width: 760px) {
  .sidebar {
    position: static; width: auto; padding: 14px 18px; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidebar .brand-mark { width: 38px; height: 41px; font-size: 32px; line-height: 41px; }
  .sidebar .nav-label, .sidebar-note, .storage-note { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 4px; margin-top: 12px; }
  .sidebar nav + nav { margin-top: 4px; }
  .sidebar .nav-item { white-space: nowrap; padding: 7px 10px; font-size: 12px; }
  .sidebar .nav-item span { display: none; }
  .shell-main { margin: 0; padding: 0 16px; }
  .topbar { min-height: 0; padding: 12px 0; flex-wrap: wrap; gap: 8px 14px; font-size: 9px; letter-spacing: 1px; }
  .sitesearch { order: 3; flex: 1 0 100%; margin-left: 0; }
  .sitesearch input { width: 100%; font-size: 16px; }
  .ac { left: 0; right: auto; width: 100%; }
  .topbar #today { margin-left: auto; }
  .shell-main > .page { padding-top: 24px; }
  .shell-main > footer { display: block; }
  .shell-main > footer span { display: block; margin-top: 4px; }
}
@media (pointer: coarse) { .ac-row { padding: 11px 10px; } }