/* Shared style for muzikisto.com/tools/. Its base is copied from /pages/assets/pages.css (Caslon, colors, links);
   keep the two in step when the site's look changes. publish.py stamps ?v=<hash> on references to this file. */

/* Font: Adobe Caslon Pro from the Adobe Fonts project "muzikisto" (kit tlq5duc), linked by each tool before this file. */

:root {
  --ink: #1a1a1a; --muted: #5a5a5a; --rule: #d8d8d8; --bg: #fff;
  --link: #0070c3; --link-hover: #bb1122; --link-visited: #884488;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6e1; --muted: #a8a5a0; --rule: #3a3a3a; --bg: #161616;
    --link: #6cb4ff; --link-hover: #ff7b88; --link-visited: #c9a0dc;
  }
}

/* Page */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 21px/1.6 "adobe-caslon-pro", Georgia, serif; }
main { max-width: 680px; margin: 0 auto; padding: 72px 20px 96px; }

/* Headings */
h1 { font-size: 2.4em; line-height: 1.1; margin: 0 0 .6em; font-weight: 600; }
h2 { font-size: 1.35em; margin: 2em 0 .4em; font-weight: 600; }
h3 { font-size: 1.05em; margin: 1.4em 0 .2em; font-weight: 600; }

/* Links */
a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover, a:focus-visible { color: var(--link-hover); }

/* Lists */
ol { padding-left: 1.4em; }
li { margin: .45em 0; }
code { font-size: .85em; }

/* Small muted lines: back links, website links */
.more { font-size: .85em; color: var(--muted); }

footer { margin-top: 4em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: .8em; color: var(--muted); }


/* Brass Position Trainer */
.quiz-bar { display: flex; flex-wrap: wrap; gap: .4em 1.4em; font-size: .85em; color: var(--muted); }
.quiz-bar select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: .1em .3em; }
.quiz-staff { display: flex; justify-content: center; margin: 1.2em 0 0; }
.quiz-name { text-align: center; font-size: 1.4em; min-height: 1.6em; margin: 0; }
.quiz-positions { display: flex; flex-direction: column; gap: .4em; width: 9em; margin: 1em auto; }
.quiz-positions button { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: .35em .5em; cursor: pointer; text-align: center; }
.quiz-positions button:hover, .quiz-positions button:focus-visible { border-color: var(--ink); outline: none; }
.quiz-positions .valves { letter-spacing: .12em; font-family: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.quiz-positions button.right { border-color: #2e7d32; background: rgba(46, 125, 50, .12); }
.quiz-positions button.wrong { border-color: var(--link-hover); background: rgba(187, 17, 34, .1); }
.quiz-feedback { min-height: 1.6em; text-align: center; }
.quiz-feedback.right { color: #2e7d32; }
.quiz-feedback.wrong { color: var(--link-hover); }
.quiz-score { text-align: center; font-size: .85em; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .quiz-positions button.right { border-color: #81c784; background: rgba(129, 199, 132, .15); }
  .quiz-feedback.right { color: #81c784; }
}
.quiz-bar label, .quiz-setup label { white-space: nowrap; }
.quiz-setup { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.4em; margin: 1.6em 0; font-size: .85em; color: var(--muted); }
.quiz-setup select, .quiz-results button, .quiz-setup button { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: .1em .5em; }
.quiz-setup button, .quiz-results button { cursor: pointer; border-color: var(--ink); padding: .25em .9em; }
.quiz-progress { text-align: center; font-size: .85em; color: var(--muted); margin: 1.2em 0 0; }
.quiz-timer { height: 4px; max-width: 272px; margin: .4em auto 0; background: var(--rule); border-radius: 2px; overflow: hidden; }
.quiz-timer > div { height: 100%; width: 100%; background: var(--ink); }
.quiz-results ul { padding-left: 1.4em; }
[hidden] { display: none !important; }
.quiz-about { font-size: .85em; color: var(--muted); margin: .6em 0 0; }

/* Phones: tighten the quiz so the staff and all seven positions fit on one screen. */
@media (max-width: 600px) {
  .quiz-progress { margin-top: .4em; }
  .quiz-staff { margin-top: .2em; }
  .quiz-name { font-size: 1.2em; min-height: 1.4em; }
  .quiz-positions { gap: .3em; margin: .5em auto; }
  .quiz-positions button { padding: .15em .5em; }
  .quiz-feedback { margin: .4em 0; }
}