/* The one look for everything outside the dungeon: the typeset page of the reading view, carried over to
   every page and every run type. Loaded by index.html only; dungeon.html keeps its own terminal look.
   It sits on top of style.css (same palette tokens) and replaces the terminal conventions: monospace type,
   "# " comment labels, "[ buttons ]", the ">" in the menu, line numbers, the ~ filler and the mode badges. */

body.app {
  --serif: 'EB Garamond', Garamond, 'Adobe Garamond Pro', 'Garamond Premier Pro', Georgia, serif;
  --mono: var(--serif);
  --page: #e6dcc3; --page-dim: #8c8371;
  font: 400 17px/1.5 var(--serif);
  font-size-adjust: 0.47;           /* Garamond has a small x-height: size it as a mono face of the same nominal size */
  font-feature-settings: 'kern', 'liga', 'onum';
  -webkit-font-smoothing: antialiased;
}
body.app ::selection { background: color-mix(in srgb, var(--yellow) 80%, var(--bg)); color: var(--bg); }

/* ---------- the menu on the left ---------- */
body.app .shell { grid-template-columns: 236px minmax(0, 1fr); transition: grid-template-columns .18s ease; }
body.app .shell.side-hidden { grid-template-columns: 0 minmax(0, 1fr); }
body.app .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 22px 14px 18px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
body.app .shell.side-hidden .sidebar { visibility: hidden; padding: 0; border-right: 0; overflow: hidden; }
.side-collapse, .side-open { background: none; border: 0; color: var(--muted); cursor: pointer; font: 400 22px/1 var(--serif); font-size-adjust: none; padding: 4px 8px; }
.side-collapse:hover, .side-open:hover { color: var(--yellow); }
.side-collapse { position: absolute; top: 8px; right: 6px; }
.side-open { position: fixed; top: 10px; left: 10px; z-index: 4; background: var(--bg1); border: 1px solid var(--line2); border-radius: 3px; font-size: 18px; padding: 5px 10px 6px; }
body.app .sidebar { position: sticky; }
body.app .brand { margin-bottom: 30px; }
body.app .brand-name { font-size: 17px; font-weight: 600; font-style: italic; letter-spacing: .01em; }
body.app .brand-sub { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body.app .nav-item, body.app .profile-btn { font-size: 17px; padding: 5px 10px; border-left: 2px solid transparent; }
body.app .nav-icon { display: none; }
body.app .nav-item.active { background: none; color: var(--yellow); border-left-color: var(--yellow); }
body.app .nav-item.sub { font-size: 16px; padding-left: 18px; }
.side-group { margin: 22px 0 6px 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* ---------- headings and labels: no comment marks ---------- */
body.app .side-label::before, body.app .eyebrow::before, body.app .prompt-label::before, body.app .answer-label::before, body.app .rail-label::before { content: none; }
body.app .side-label, body.app .eyebrow, body.app .prompt-label, body.app .answer-label, body.app .rail-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--page-dim); }
body.app .section-head h2::before { content: none; }
body.app .section-head h2, body.app .modal h2 { font-size: 30px; font-weight: 500; font-style: italic; color: var(--page); line-height: 1.2; margin: 2px 0 6px; }
body.app .modal h2 { font-size: 24px; }
body.app .md-h2, body.app .admin-h { font-weight: 500; font-style: italic; color: var(--page); }
body.app .muted { font-size: 13px; }
body.app .empty::before { content: none; }
body.app .empty { font-size: 15px; font-style: italic; }

/* ---------- buttons and links: words, not brackets ---------- */
body.app .primary-btn, body.app .outline-btn, body.app .back-btn { font-weight: 500; font-variant: small-caps; letter-spacing: .05em; font-size: 1.06em; padding: 3px 8px; border-radius: 2px; }
body.app .primary-btn::before, body.app .primary-btn::after, body.app .outline-btn::before, body.app .outline-btn::after { content: none; }
body.app .primary-btn { color: var(--green); border-bottom: 1px solid color-mix(in srgb, var(--green) 55%, transparent); }
body.app .outline-btn { color: var(--page); border-bottom: 1px solid var(--line2); }
body.app .primary-btn:hover { background: var(--green); color: var(--bg); }
body.app .outline-btn:hover { background: var(--page); color: var(--bg); }
body.app .full { border: 1px solid var(--green); padding: 9px; text-align: center; }
body.app .sidebar .outline-btn { text-align: left; }
body.app .link { color: var(--green); font-style: italic; }
body.app .link:hover, body.app .link:focus-visible { background: none; color: var(--yellow); text-decoration: underline; }
body.app .link.danger:hover, body.app .link.danger:focus-visible { background: none; color: var(--red); }
body.app .pill { font-weight: 600; font-variant: small-caps; letter-spacing: .04em; border-radius: 2px; }

/* ---------- cards, tables, forms ---------- */
body.app .book-card, body.app .run-card, body.app .stat-card, body.app .book-block { border-radius: 3px; }
body.app .book-card h3, body.app .run-card h3 { font-size: 20px; font-weight: 500; }
body.app .book-card p, body.app .stat-card p, body.app .run-sub, body.app .book-tag, body.app .run-card-foot { font-size: 14px; }
body.app .book-foot { font-size: 14px; }
body.app .stat-card .big { font-size: 30px; font-weight: 500; font-feature-settings: 'lnum', 'tnum'; }
body.app .breakdown table { font-size: 15px; }
body.app .breakdown th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
body.app .breakdown td, body.app .breakdown .num { font-feature-settings: 'lnum', 'tnum'; }
body.app .modal { border-radius: 3px; }
body.app .modal p { font-size: 15px; }
body.app .modal label { font-size: 14px; }
body.app .modal select, body.app .rec-filters select, body.app .rec-filters input { font-size: 15px; border-radius: 2px; }
body.app .toast { font-size: 15px; border-radius: 2px; }
body.app .mini-fill, body.app .progress-fill { background: var(--green); }
body.app .mini-track, body.app .progress-track { height: 4px; border-radius: 2px; }
body.app .mini-fill, body.app .progress-fill { border-radius: 2px; }

/* ---------- runs: the page, whatever the run type ---------- */
#runView.page .vim-buf { cursor: auto; }
#runView.page.vim, #textView.page.vim { font-size-adjust: none; }
#runView.page #runKicker::before, #runView.page #runTitle::before { content: none; }
#runView.page .cm { font-style: italic; color: var(--page-dim); }
#runView.page .dim { color: #b3a88f; }
#runView.page .prompt { font-weight: 400; }
#runView.page .answer { margin: .5em 0 .3em; padding: .15em .3em .25em; border-bottom: 1px solid var(--line2); }
#runView.page .answer:focus-within { background: none; border-bottom-color: var(--yellow); }
#runView.page .answer textarea { color: var(--aqua); font-size: 1em; line-height: 1.5; }
#runView.page .answer textarea::placeholder { color: var(--dim); font-style: italic; }
#runView.page .ln.answer, #runView.page .ln.next { padding-left: .3em; }
#runView.page #feedback { margin-top: .5em; }
#runView.page .breakdown table { font-size: 17px; }
#runView.page .breakdown th { padding: 0 1.6em 2px 0; text-transform: none; letter-spacing: 0; font-size: 15px; font-style: italic; border-bottom: 1px solid var(--line); }
#runView.page .breakdown td { padding: 1px 1.6em 1px 0; }
#runView.page .ww { text-underline-offset: 4px; }
#runView.page .vim-foot { background: var(--bg); }
#runView.page .cmdline { min-height: 1.6em; }
#runView.page #cmdMsg { font-weight: 400; white-space: pre-wrap; }
#runView.page #cmdMsg.cmd-err { color: var(--red); }
#runView.page .cmd-hint { font-size: 14px; color: var(--dim); }
#runView.page .sl-mode { display: none; }
#runView.page .sl-right { border: 0; }
#runView.page .sl-effort { cursor: pointer; }
#runView.page .sl-effort:hover { color: var(--yellow); background: none; }
#runView.page .sl-time { color: var(--page); font-weight: 400; }
#runView.page .sl-time.low { background: none; color: var(--red); }
#runView.page .sl-pomo { color: var(--red); }

/* the book's own text: a page to scroll, set like a reading run */
#textView.vim { display: flex; flex-direction: column; height: calc(100vh - 56px); min-height: 0; font-size-adjust: none; }
.rd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 34em; width: 100%; margin: 0 auto; padding: 4px 0 10px; border-bottom: 1px solid var(--line); font-size: 16px; }
.rd-bar select, .rd-bar input { background: var(--bg1); color: var(--page); border: 1px solid var(--line2); border-radius: 2px; padding: 3px 8px; font: inherit; font-size: 15px; min-width: 0; }
.rd-bar select { max-width: 15em; }
.rd-bar #rdGo { flex: 1 1 13em; }
.rd-find { display: flex; align-items: center; gap: 6px; flex: 1 1 15em; }
.rd-find input { flex: 1; min-width: 0; }
.rd-find .link { font-size: 20px; padding: 0 5px; color: var(--page-dim); }
.rd-find .link:hover { color: var(--yellow); }
#textView .rd-bar .link { color: var(--page-dim); font-style: italic; }
.rd-doc { flex: 1; min-height: 0; overflow-y: auto; position: relative; outline: none; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; scroll-behavior: auto;
  font: 400 21px/1.6 var(--serif); color: var(--page); font-feature-settings: 'kern', 'liga', 'onum'; hyphens: auto; padding: 22px 0 40px; }
.rd-doc > .rd-p { max-width: 34em; margin: .55em auto 0; padding: 0 40px; box-sizing: content-box; width: calc(100% - 80px); }
.rd-doc > .rd-p.gap { margin-top: 1.15em; }
.rd-p .it { font-style: italic; }
.rd-p .b { font-weight: 600; }
.rd-p .rn { color: var(--yellow); font-weight: 600; }
.rd-p .fnref { color: var(--yellow); font-size: .8em; vertical-align: super; line-height: 0; }
.rd-p .unsure { color: var(--yellow); text-decoration: underline dotted; }
.rd-p .hl { background: color-mix(in srgb, var(--yellow) 35%, transparent); color: var(--page); border-radius: 2px; }
.rd-p .hl-now { background: var(--yellow); color: var(--bg); }
.rd-h1, .rd-h2, .rd-h3 { font-style: italic; font-weight: 500; color: var(--page); line-height: 1.25; }
.rd-h1 { font-size: 1.55em; margin-top: 1.6em !important; text-align: center; }
.rd-h2 { font-size: 1.25em; margin-top: 1.3em !important; }
.rd-h3 { font-size: 1.1em; margin-top: 1.1em !important; color: #cfc4aa; }
.rd-page { text-align: center; font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--page-dim); margin-top: 1.4em !important; }
.rd-ex { padding-left: calc(40px + 1.4em) !important; width: calc(100% - 80px - 1.4em) !important; text-indent: -.0em; }
.rd-small, .rd-fn { font-size: .86em; line-height: 1.45; color: var(--muted); }
.rd-li, .rd-num { padding-left: calc(40px + .4em) !important; width: calc(100% - 80px - .4em) !important; }
#textView .vim-foot { font-family: var(--serif); font-size: 17px; font-feature-settings: 'kern', 'liga', 'onum'; max-width: 34em; width: 100%; margin: 0 auto; background: var(--bg); }
#textView .statusline { background: none; border-top: 1px solid var(--line); font-size: 15px; padding-top: 6px; justify-content: center; }
#textView .statusline > span { background: none; border: 0; color: var(--page-dim); padding: 0 .7em; }
#textView .sl-file { font-style: italic; }
#textView .sl-time { color: var(--page); font-weight: 400; }
#textView .sl-fill { flex: 0; }
#textView .cmdline { font-size: 15px; color: var(--page-dim); font-style: italic; justify-content: center; }
#textView .cmd-hint { font-size: 14px; }
@media (max-width: 700px) { .rd-doc { font-size: 19px; } .rd-doc > .rd-p { padding: 0 16px; width: calc(100% - 32px); } }

/* a phone: the menu is a strip across the top, so the side button has nothing to hide */
@media (max-width: 850px) {
  body.app .shell, body.app .shell.side-hidden { grid-template-columns: minmax(0, 1fr); }
  body.app .sidebar { position: static; height: auto; }
  body.app .shell.side-hidden .sidebar { display: none; }
  .side-collapse { display: none; }
  .side-group { margin: 0 4px 0 12px; }
}

/* the remaining "## " section marks of the terminal look */
body.app .stats-lang::before, body.app .credits-page #creditsBody h2::before, body.app .credits-page h4::before,
body.app .cp-group-label::before, body.app .md-h2::before, body.app .book-format h4::before, body.app .admin-h::before { content: none; }
body.app .stats-lang, body.app .credits-page #creditsBody h2, body.app .cp-group-label, body.app .md-h2 { font-size: 24px; font-weight: 500; font-style: italic; color: var(--page); }
body.app .credits-page h4, body.app .book-format h4, body.app .admin-h { font-size: 18px; font-weight: 500; font-style: italic; color: var(--page); }
body.app .small { font-size: 15px; }
body.app .char-level p, body.app .char-level .small { color: var(--muted); font-size: 15px; line-height: 1.5; }
#textView.page .rd-h1 .mk, #textView.page .rd-h2 .mk, #textView.page .rd-h3 .mk { color: transparent; }

/* the links under a run's footer */
.run-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 1.6em; padding: 6px 0 2px; font-size: 16px; }
body.app .run-tools .link { color: var(--page-dim); font-style: italic; }
body.app .run-tools .link:hover, body.app .run-tools .link:focus-visible { color: var(--yellow); }

/* the language bar: the same chips on every page that has one (books, literature, stats, vocab, character, talents) */
body.app .stats-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 18px; }
body.app .stats-langs > .muted { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--page-dim); margin-right: 4px; }
/* one chip, in the bar and on the book cards */
body.app .stats-langs label, body.app .lang-chip { position: relative; display: inline-block; margin: 0; padding: 3px 14px 4px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); font-size: 16px; line-height: 1.5; user-select: none; }
body.app .stats-langs label { cursor: pointer; }
body.app .book-top { justify-content: flex-start; gap: 8px; }
body.app .book-card .lang-chip { padding: 1px 12px 2px; font-size: 14px; color: var(--yellow); border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 9%, transparent); }
body.app .book-card .lang-chip.yours { color: var(--page); border-color: var(--dim); background: none; }
body.app .stats-langs label:hover { color: var(--page); border-color: var(--dim); }
body.app .stats-langs label:has(input:checked) { color: var(--yellow); border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 9%, transparent); }
body.app .stats-langs label:has(input:focus-visible) { outline: 1px solid var(--yellow); outline-offset: 2px; }
body.app .stats-langs input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

/* the profile: a round portrait at the bottom of the menu, opening a menu above it */
body.app .profile-nav { margin: auto 0 0; padding-top: 14px; position: relative; border-top: 1px solid var(--line); }
body.app .profile-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 5px 8px 5px 5px; border: 0; border-left: 0; border-radius: 999px; background: none; font-size: 17px; text-align: left; }
body.app .profile-btn:hover, body.app .profile-btn.active { background: var(--bg2); }
body.app .profile-btn.active #profileName { color: var(--yellow); }
body.app .profile-btn img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg); object-fit: cover; image-rendering: pixelated; flex: none; }
body.app .profile-btn.active img, body.app .profile-btn[aria-expanded="true"] img { border-color: var(--yellow); }
body.app .profile-menu { position: absolute; left: 0; right: 0; bottom: calc(100% - 6px); z-index: 8; margin: 0; padding: 6px 0; background: var(--bg1); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }
body.app .profile-menu .nav-item.sub { padding: 6px 16px; font-size: 17px; border-left: 0; }
body.app .profile-menu .nav-item.sub:hover { background: var(--bg2); color: var(--page); }
body.app .profile-menu .nav-item.sub.active { background: none; color: var(--yellow); }
body.app .profile-menu #logoutBtn { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; }
@media (max-width: 850px) {
  body.app .profile-nav { margin: 0 0 0 auto; padding: 0; border: 0; }
  body.app .profile-btn { width: auto; }
  body.app .profile-btn #profileName { display: none; }
  body.app .profile-menu { bottom: auto; top: calc(100% + 4px); left: auto; right: 0; min-width: 170px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
}

/* the menu's groups: study, mini-games, then credits in grey under everything */
.side-group.first { margin-top: 0; }
body.app .nav-credits { margin-top: 22px; color: var(--dim); font-size: 15px; }
body.app .nav-credits:hover { color: var(--muted); }
body.app .nav-credits.active { color: var(--muted); border-left-color: var(--dim); }