/* Stage / print view for public setlist pages (/setlists/view/:token)
   Standalone styles - this page does not load main.css */

/* ── Fonts ──
   The app's own self-hosted files (see main.css). Only the latin subsets: a
   setlist is one page, and accented names fall back to the system face. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-v20-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Crimson Pro";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/crimson-pro-v28-latin.woff2") format("woff2");
}

/* ── Variables ──
   The app's tokens (main.css :root and [data-theme="dark"]), restated because
   this page does not load main.css. The page follows the system theme only:
   it is read by people without an account, who have no saved preference. */
:root {
    color-scheme: light dark;
    --bg:             #ffffff;  /* --surface-color */
    --fg:             #2d3748;  /* --text-color */
    --fg-dim:         #4a5568;  /* --secondary-color */
    --title:          #5c4033;  /* --color-bark */
    --border:         #d0d0d0;
    --border-subtle:  #e5e6e4;  /* --color-stone */
    --set-bg:         #f5f6f4;  /* --color-fog */
    --tag-bg:         #e5e6e4;  /* --color-stone */
    --accent:         #4a5d4a;  /* --color-moss */
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:             #1a1b19;  /* --color-fog */
        --fg:             #e2e8f0;  /* --text-color */
        --fg-dim:         #a0aec0;
        --title:          #d4c4a8;  /* --color-bark */
        --border:         #4a5568;
        --border-subtle:  #4a5568;
        --set-bg:         #2d3748;  /* --surface-color */
        --tag-bg:         #232a36;  /* darker than the card: --color-moss-light left tag text at 4.49:1 */
        --accent:         #8faf84;  /* --color-fern */
    }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
    padding: 1.5rem 1.25rem 3rem;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Header ── */
.sl-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }
.sl-title   { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--title); }
.sl-meta    { margin-top: 0.35rem; font-size: 0.9rem; color: var(--fg-dim); }

/* ── Set block ── */
.set-block {
    margin-bottom: 1.75rem;
    background: var(--set-bg);
    border-radius: 6px;
    overflow: hidden;
}
.set-header {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.set-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.set-name   { font-size: 1.1rem; font-weight: 700; color: var(--fg); }
.slot-notes { font-size: 0.85rem; color: var(--accent); font-style: italic; }
/* A set's own notes, on a line of their own under its name. */
.set-notes  { flex-basis: 100%; font-size: 0.85rem; color: var(--fg-dim); white-space: pre-line; overflow-wrap: anywhere; }

/* ── Tune list ── */
.tune-list  { list-style: none; padding: 0.4rem 1rem 0.6rem; }
.tune-item  { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0; }
.tune-name  { font-size: 1rem; font-weight: 500; flex: 1; }
.tune-tags  { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tune-tag {
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: var(--tag-bg);
    color: var(--fg-dim);
    white-space: nowrap;
}
/* A tuning is outlined where key and type are filled, so "D" the key and
   "DADGAD" the tuning are not read as the same kind of thing. */
.tune-tuning { background: none; box-shadow: inset 0 0 0 1px var(--border); }
.empty-set { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--fg-dim); font-style: italic; }
.sl-empty  { color: var(--fg-dim); font-style: italic; }

/* Phones: tags go under the name. Beside it, a wide pair like "A Mixolydian"
   and "Hornpipe" left the name a third of the row, and a three-word title
   broke onto three lines. 480px clears every phone held upright; print is
   wider, so paper keeps the single line. */
@media (max-width: 480px) {
    .tune-item { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .tune-name { flex: none; }
    .set-header .tune-tags { flex-basis: 100%; }
}

/* ── Footer ── */
.sl-footer {
    margin-top: 2.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* The one place a bandmate without an account meets the brand: the header's
   logo and wordmark at a quieter size. */
.sl-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg-dim);
    text-decoration: none;
    font-size: 0.8rem;
}
.sl-brand img { width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0; }
.sl-brand-name {
    font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--title);
    letter-spacing: 0.01em;
}
@media (hover: hover) and (pointer: fine) {
    .sl-brand:hover .sl-brand-name { text-decoration: underline; }
}
/* This page is standalone (no main.css), so the app's secondary button is
   restated here in the stage view's own tokens rather than imported. */
.print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    min-height: 2.25rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--fg-dim);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 0.15s ease;
}
.print-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .print-btn:hover { border-color: var(--accent); }
}
@media (pointer: coarse) {
    .print-btn { min-height: 2.75rem; }
}

/* ── Print ── */
@media print {
    body      { padding: 0; font-size: 14px; }
    .sl-footer .print-btn { display: none; }
    .set-block { break-inside: avoid; page-break-inside: avoid; margin-bottom: 1.25rem; }
}