/*
 * The global CSS the components are written against. They were built inside a site that reset
 * every element and set a few page-wide defaults, and they rely on both without saying so: a
 * button here has no border or background of its own, a heading no margin, and text is weight 300.
 *
 * Two parts, and the split matters. The reset sits in a cascade layer, so any component rule
 * beats it whatever its specificity. The page defaults after it are unlayered, so they compete
 * with component rules on specificity as usual.
 */

/*
 * The reset is Tailwind CSS v4.1.11's preflight, with its theme lookups written out.
 *
 * MIT License
 *
 * Copyright (c) Tailwind Labs, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
@layer base {
  /*
    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
    2. Remove default margins and padding
    3. Reset all borders.
  */

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 2 */
    border: 0 solid; /* 3 */
  }

  /*
    1. Use a consistent sensible line-height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.
    3. Use a more readable tab size.
    4. The page's font.
    5. Disable tap highlights on iOS.
  */

  html,
  :host {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    tab-size: 4; /* 3 */
    font-family: system-ui, -apple-system, sans-serif; /* 4 */
    font-feature-settings: normal; /* 4 */
    font-variation-settings: normal; /* 4 */
    -webkit-tap-highlight-color: transparent; /* 5 */
  }

  /*
    1. Add the correct height in Firefox.
    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
    3. Reset the default border style to a 1px solid border.
  */

  hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
  }

  /*
    Add the correct text decoration in Chrome, Edge, and Safari.
  */

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  /*
    Remove the default font size and weight for headings.
  */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  /*
    Reset links to optimize for opt-in styling instead of opt-out.
  */

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  /*
    Add the correct font weight in Edge and Safari.
  */

  b,
  strong {
    font-weight: bolder;
  }

  /*
    1. A monospace font.
    2. Correct the odd `em` font sizing in all browsers.
  */

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
    font-feature-settings: normal; /* 1 */
    font-variation-settings: normal; /* 1 */
    font-size: 1em; /* 2 */
  }

  /*
    Add the correct font size in all browsers.
  */

  small {
    font-size: 80%;
  }

  /*
    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
  */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
    3. Remove gaps between table borders by default.
  */

  table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
  }

  /*
    Use the modern Firefox focus style for all focusable elements.
  */

  :-moz-focusring {
    outline: auto;
  }

  /*
    Add the correct vertical alignment in Chrome and Firefox.
  */

  progress {
    vertical-align: baseline;
  }

  /*
    Add the correct display in Chrome and Safari.
  */

  summary {
    display: list-item;
  }

  /*
    Make lists unstyled by default.
  */

  ol,
  ul,
  menu {
    list-style: none;
  }

  /*
    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
        This can trigger a poorly considered lint error in some tools but is included by design.
  */

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
  }

  /*
    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
  */

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /*
    1. Inherit font styles in all browsers.
    2. Remove border radius in all browsers.
    3. Remove background color in all browsers.
    4. Ensure consistent opacity for disabled states in all browsers.
  */

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    border-radius: 0; /* 2 */
    background-color: transparent; /* 3 */
    opacity: 1; /* 4 */
  }

  /*
    Restore default font weight.
  */

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  /*
    Restore indentation.
  */

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  /*
    Restore space after button.
  */

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  /*
    Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
  */

  ::placeholder {
    opacity: 1;
  }

  /*
    Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
    crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
  */

  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }

  /*
    Prevent resizing textareas horizontally by default.
  */

  textarea {
    resize: vertical;
  }

  /*
    Remove the inner padding in Chrome and Safari on macOS.
  */

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /*
    1. Ensure date/time inputs have the same height when empty in iOS Safari.
    2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
  */

  ::-webkit-date-and-time-value {
    min-height: 1lh; /* 1 */
    text-align: inherit; /* 2 */
  }

  /*
    Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
  */

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  /*
    Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
  */

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  /*
    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
  */

  :-moz-ui-invalid {
    box-shadow: none;
  }

  /*
    Correct the inability to style the border radius in iOS Safari.
  */

  button,
  input:where([type='button'], [type='reset'], [type='submit']),
  ::file-selector-button {
    appearance: button;
  }

  /*
    Correct the cursor style of increment and decrement buttons in Safari.
  */

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /*
    Make elements with the HTML hidden attribute stay hidden by default.
  */

  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }

  /* Not preflight. The page is dark (below) but everything in it is drawn light: form controls,
     pickers and the scrollbars of anything that scrolls inside the app. */
  body {
    color-scheme: light;
  }
}

/* ---------- the page's own defaults ---------- */

:root {
  /* The canvas and the window's scrollbar, for the dark page round the app. */
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background-color: #0f172a;
}

/* What is drawn outside .choir-app inherits these: the top bar, and a seat's menu, which is
   teleported to <body>. */
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 300;
  background-color: #0f172a;
  color: #e2e8f0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

a {
  color: #60a5fa;
  transition: color 0.2s ease;
}

a:hover {
  color: #93c5fd;
}

::selection {
  background-color: #1e40af;
  color: #f1f5f9;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* The manual's own styles. tools/vite-manual.mjs serves them after src/base.css, in one file. */

/* ---------- the page shell, as the app's (src/App.vue) ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #1e293b;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  transition: color 0.15s, background 0.15s;
}
.back-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.back-arrow {
  font-size: 1.1em;
  line-height: 1;
}
.manual-page {
  min-height: 100vh;
  padding-top: 4rem;
  background-color: oklch(20.8% 0.042 265.755);
}
/* ---------- the contents ---------- */
.manual-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.toc {
  position: sticky;
  top: 5rem;
}
.toctitle {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.toclist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toclist li {
  counter-increment: toc;
}
.toclist a {
  display: block;
  padding: 0.35rem 0.75rem;
  border-left: 2px solid #334155;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
}
.toclist a::before {
  content: counter(toc) '. ';
  color: #64748b;
}
.toclist a:hover {
  color: #f1f5f9;
  border-left-color: #64748b;
}
.toclist a.on {
  color: #93c5fd;
  border-left-color: #60a5fa;
  font-weight: 500;
}
.tocpick {
  display: none;
}
.openapp {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---------- a page ----------
   The page itself is light, like the app: the screenshots are of a light interface and sit in
   it without a hard frame. */
.doc {
  background: #fff;
  color: #1e293b;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  font-weight: 400;
  min-width: 0;
}
.doc h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 600;
  color: #0f172a;
}
.doc h2 {
  margin: 2.25rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #0f172a;
}
.doc h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}
.doc h2 a,
.doc h3 a {
  color: inherit;
  text-decoration: none;
}
.doc p,
.doc li {
  line-height: 1.65;
}
.doc p {
  margin: 0 0 1rem;
}
.doc ul,
.doc ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
.doc ul {
  list-style: disc;
}
.doc ol {
  list-style: decimal;
}
.doc li {
  margin: 0 0 0.35rem;
}
.doc strong {
  font-weight: 600;
  color: #0f172a;
}
.doc a {
  color: #2563eb;
}
.doc code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #f1f5f9;
  font-size: 0.9em;
}
.doc img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
/* A wide shot, `![…](x.png){.wide}` in the Markdown: shown at its real size in a horizontal
   scroller, not shrunk to fit. The shots are taken at 2x, so it is zoomed to half its pixels, and
   its border, corners, shadow and margins are doubled to come out as the other images'. */
.doc p:has(> img.wide) {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.doc img.wide {
  max-width: none;
  zoom: 0.5;
  margin: 1rem 0 1.5rem;
  border-width: 2px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
/* The app's drag tools, [⊘ Block]{.tool .block} in the Markdown: drawn like the buttons, in the app's font. */
.doc .tool {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
.doc .tool.block {
  border: 2px solid #b9aeae;
  background: repeating-linear-gradient(45deg, #e7e3e3 0 7px, #d8d2d2 7px 14px);
  color: #6f6464;
}
.doc .tool.space {
  border: 2px dashed #c9d0da;
  background: #fff;
  color: #6b7688;
}
.doc blockquote {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #60a5fa;
  background: #eff6ff;
  border-radius: 0 6px 6px 0;
  color: #1e3a8a;
}
.doc blockquote p:last-child {
  margin: 0;
}
.doc table {
  border-collapse: collapse;
  margin: 0 0 1rem;
}
.doc th,
.doc td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}
.pager a {
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
}
.pager .next {
  margin-left: auto;
}

@media (max-width: 800px) {
  .manual-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-top: 1rem;
  }
  .toc {
    position: static;
  }
  .toclist {
    display: none;
  }
  .tocpick {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #f1f5f9;
  }
  .openapp {
    margin-top: 0.75rem;
  }
  .doc {
    padding: 1.25rem 1rem;
  }
}

/* In a window of its own (public/app-window.js) the manual is part of the app, not a page of
   the website: no bar back to it. */
:root.app-window .topbar {
  display: none;
}
:root.app-window .manual-page {
  padding-top: 0;
}
:root.app-window .toc {
  top: 2rem;
}