html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Prevent double-tap zoom on iOS tap zones */
* {
    touch-action: manipulation;
}

body {
    margin-bottom: 60px;
}

/* Login page */
.login-card {
    background: var(--bs-secondary-bg);
}

/* Clickable cards */
.card-hover {
    color: inherit;
    transition: background-color 0.15s;
}
.card-hover:hover {
    background-color: var(--sett-navy-hover);
}

/* Drop zone */
.drop-zone {
    border: 2px dashed var(--bs-border-color);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    user-select: none;
}
.drop-zone:hover,
.drop-zone:focus {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    outline: none;
}
.drop-zone--over {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.drop-zone--has-file {
    border-style: solid;
    border-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.07);
}
.drop-zone-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    opacity: 0.6;
}
.drop-zone--has-file .drop-zone-icon {
    color: var(--bs-success);
    opacity: 1;
}
.drop-zone-label {
    font-size: 1rem;
    font-weight: 500;
}
.drop-zone-sub {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: 4px;
}

/* Minimum tap targets */
.btn, .list-group-item-action, .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.list-group-item-action {
    display: flex;
}

/* Back button: high-contrast outline and a full touch target */
.btn-back {
    --bs-btn-color: #f1f5f9;
    --bs-btn-bg: var(--sett-navy-panel);
    --bs-btn-border-color: #8aa0bf;
    --bs-btn-hover-color: var(--sett-on-green);
    --bs-btn-hover-bg: var(--sett-green);
    --bs-btn-hover-border-color: var(--sett-green-light);
    --bs-btn-active-color: var(--sett-on-green);
    --bs-btn-active-bg: var(--sett-green-active);
    --bs-btn-active-border-color: var(--sett-green-light);
    font-weight: 600;
    min-height: 40px;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
}

/* ---- Theme: forest green + navy, after the Graham of Montrose tartan ----
   These are the default colours. On a group's pages the layout sets the same
   --sett-* and --bs-* colours inline on <html>, derived from that group's tartan
   (Services/TartanColors.PageStyle). Keep the two lists in step. */
:root {
    --sett-navy: #0e1a2b;
    --sett-navy-bar: #0b1524;
    --sett-navy-panel: #15243a;
    --sett-navy-hover: #1c3050;
    --sett-navy-active: #203656;
    --sett-navy-line: #2b3f5c;
    --sett-steel: #3a5173;
    --sett-muted: #9fb0c6;
    --sett-outline-text: #c3cfdf;
    --sett-outline-border: #4a6286;
    --sett-outline-hover-border: #5b759c;
    --sett-outline-active: #2e4260;
    --sett-green: #2f6b4a;
    --sett-green-hover: #275a3e;
    --sett-green-active: #214d35;
    --sett-green-light: #8fd1a8;
    --sett-green-border: #3f8a60;
    --sett-green-rgb: 47, 107, 74;
    --sett-on-green: #fff;
}

[data-bs-theme=dark] {
    --bs-body-bg: #0e1a2b;
    --bs-body-bg-rgb: 14, 26, 43;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-secondary-bg: #15243a;
    --bs-secondary-bg-rgb: 21, 36, 58;
    --bs-tertiary-bg: #122036;
    --bs-tertiary-bg-rgb: 18, 32, 54;
    --bs-border-color: #2b3f5c;
    --bs-primary: #2f6b4a;
    --bs-primary-rgb: 47, 107, 74;
    --bs-primary-text-emphasis: #8fd1a8;
    --bs-primary-bg-subtle: #13301f;
    --bs-primary-border-subtle: #2f6b4a;
    --bs-secondary-color: #9fb0c6;
    --bs-secondary-color-rgb: 159, 176, 198;
    --bs-link-color: #8fd1a8;
    --bs-link-color-rgb: 143, 209, 168;
    --bs-link-hover-color: #b5e3c6;
    --bs-link-hover-color-rgb: 181, 227, 198;
    --bs-focus-ring-color: rgba(47, 107, 74, 0.5);
}

.btn-primary {
    --bs-btn-color: var(--sett-on-green);
    --bs-btn-bg: var(--sett-green);
    --bs-btn-border-color: var(--sett-green);
    --bs-btn-hover-color: var(--sett-on-green);
    --bs-btn-hover-bg: var(--sett-green-hover);
    --bs-btn-hover-border-color: var(--sett-green-hover);
    --bs-btn-active-color: var(--sett-on-green);
    --bs-btn-active-bg: var(--sett-green-active);
    --bs-btn-active-border-color: var(--sett-green-active);
    --bs-btn-disabled-color: var(--sett-on-green);
    --bs-btn-disabled-bg: var(--sett-green);
    --bs-btn-disabled-border-color: var(--sett-green);
    --bs-btn-focus-shadow-rgb: var(--sett-green-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--sett-green-light);
    --bs-btn-border-color: var(--sett-green-border);
    --bs-btn-hover-color: var(--sett-on-green);
    --bs-btn-hover-bg: var(--sett-green);
    --bs-btn-hover-border-color: var(--sett-green);
    --bs-btn-active-color: var(--sett-on-green);
    --bs-btn-active-bg: var(--sett-green-active);
    --bs-btn-active-border-color: var(--sett-green-active);
    --bs-btn-focus-shadow-rgb: var(--sett-green-rgb);
}
.btn-outline-secondary {
    --bs-btn-color: var(--sett-outline-text);
    --bs-btn-border-color: var(--sett-outline-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sett-steel);
    --bs-btn-hover-border-color: var(--sett-outline-hover-border);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sett-outline-active);
    --bs-btn-active-border-color: var(--sett-outline-hover-border);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--sett-green-border);
    box-shadow: 0 0 0 0.25rem rgba(var(--sett-green-rgb), 0.35);
}
.form-check-input:checked {
    background-color: var(--sett-green);
    border-color: var(--sett-green);
}

.card {
    --bs-card-bg: var(--sett-navy-panel);
    --bs-card-cap-bg: rgba(0, 0, 0, 0.18);
    --bs-card-border-color: var(--sett-navy-line);
}
.list-group {
    --bs-list-group-bg: var(--sett-navy-panel);
    --bs-list-group-border-color: var(--sett-navy-line);
    --bs-list-group-action-hover-bg: var(--sett-navy-hover);
    --bs-list-group-action-active-bg: var(--sett-navy-active);
}

/* Muted text: readable on the themed background */
.text-secondary {
    --bs-text-opacity: 1;
    color: var(--sett-muted) !important;
}
.badge.bg-secondary, .text-bg-secondary {
    color: #fff !important;
    background-color: var(--sett-steel) !important;
}

/* Navbar woven as a tartan: navy, black guards, forest green with a fine white line
   (after Graham of Montrose). Warp and weft stripes overlap to form the checks; a fine
   diagonal adds the twill texture and a dark wash keeps the menu readable. */
.sett-navbar,
.sett-tartan-preview {
    --sett-tartan: rgba(27, 47, 82, 0.62) 0 12px, rgba(5, 8, 13, 0.62) 12px 14px, rgba(27, 47, 82, 0.62) 14px 16px, rgba(5, 8, 13, 0.62) 16px 18px, rgba(27, 47, 82, 0.62) 18px 30px, rgba(5, 8, 13, 0.62) 30px 38px, rgba(47, 107, 74, 0.62) 38px 54px, rgba(245, 247, 250, 0.62) 54px 56px, rgba(47, 107, 74, 0.62) 56px 72px, rgba(5, 8, 13, 0.62) 72px 80px;
    background-color: var(--sett-navy-bar);
    background-image:
        linear-gradient(rgba(8, 14, 24, 0.38), rgba(8, 14, 24, 0.38)),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, var(--sett-tartan)),
        repeating-linear-gradient(0deg, var(--sett-tartan));
}
.sett-navbar {
    border-bottom: 3px solid #05080d;
    min-height: 80px;
}
.sett-tartan-preview {
    height: 72px;
    border: 1px solid var(--sett-navy-line);
}
.sett-navbar .navbar-brand,
.sett-navbar .nav-link,
.sett-navbar .text-secondary {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.sett-navbar .nav-link {
    color: #f1f5f9;
    font-weight: 500;
}
.sett-navbar .text-secondary {
    color: #dbe4ef !important;
}
.sett-navbar .btn-outline-secondary,
.sett-navbar .navbar-toggler {
    background-color: rgba(11, 21, 36, 0.8);
}

/* Hide the validation summary box until there is something in it */
.validation-summary-valid {
    display: none;
}

/* Logos */
.sett-brand {
    padding-block: 0;
}
.sett-brand img {
    display: block;
    max-width: none;   /* size comes from the brand's width/height attributes */
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
/* Transparent corner logos sit straight on the tartan with a shadow instead of a tile */
.sett-brand img.sett-brand-transparent {
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}
.sett-splash {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Home page hero: brand logo and tagline */
.sett-hero-logo {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
}
.sett-tagline {
    font-size: 1.15rem;
    color: var(--bs-body-color);
}
.sett-tagline small {
    display: block;
    font-size: 1rem;
    color: var(--sett-muted);
}

/* Drag a file anywhere into a section (piece page: charts, music files) */
.drop-area {
    border-radius: 12px;
    transition: box-shadow 0.12s ease, background-color 0.12s ease;
}
.drop-area--over {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    box-shadow: 0 0 0 2px var(--bs-primary);
}
.drop-area--over .drop-zone {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.drop-area--busy {
    opacity: 0.6;
    pointer-events: none;
}
.drop-zone--slim {
    padding: 14px 16px;
}
.drop-zone--slim .drop-zone-label {
    font-size: 0.95rem;
}

/* The note sounding right now, while the player runs (class set by sheet-music.js) */
.settscribe-playing,
.settscribe-playing * {
    fill: #e8000b;
}
/* abcjs draws its own transport bar; keep it on our card, not its default white strip */
#tune-player .abcjs-inline-audio {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}
/* Range tracks: Bootstrap's default is nearly invisible against a tartan-dark page */
.form-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.25);
}
.form-range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.25);
}

/* Tempo and volume on the player: big enough to hit on a phone, the number never hidden */
.player-stepper .btn {
    min-width: 48px;
    font-size: 1.25rem;
    font-weight: 600;
    justify-content: center;
}
.player-stepper {
    /* - box + stay on one line: on a phone the + used to wrap under the box (2026-10-05) */
    flex-wrap: nowrap;
}
.player-stepper .form-control {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 3.2em;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    -moz-appearance: textfield;
    appearance: textfield;
}
/* The browser's own tiny spinner arrows: the big - and + are the steppers, and the arrows took the value's room. */
.player-stepper .form-control::-webkit-inner-spin-button,
.player-stepper .form-control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Rename in place (setlists, tunes): the name itself is tappable, and the pencil is a full touch target */
.inline-rename-text {
    cursor: text;
    border-bottom: 1px dashed transparent;
}
.inline-rename-text:hover,
.inline-rename-text:focus-visible {
    border-bottom-color: var(--bs-secondary-color);
}
.rename-pencil {
    min-width: 44px;
    justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
}

/* Member directory: a round photo, or the first letter of the name when there is none */
.member-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.member-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}
.min-w-0 {
    min-width: 0;
}

/* A row whose name link is stretched over it: links inside the row stay on top and keep working */
.above-row-link {
    position: relative;
    z-index: 2;
}
.member-row {
    cursor: pointer;
}

/* Section toggles on the member form: big enough to tap */
.section-toggle {
    min-width: 5.5rem;
    justify-content: center;
}

/* Save / Cancel on long forms: pinned to the bottom of the screen while the form scrolls, so Save is always in
   reach, and back in its place once the end of the form is in view. On a card it takes the card's colour. */
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 1.5rem;
    margin-left: calc(-1 * var(--bs-card-spacer-x, 0px));
    margin-right: calc(-1 * var(--bs-card-spacer-x, 0px));
    padding: 0.75rem var(--bs-card-spacer-x, 0px) calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--bs-card-bg, var(--bs-body-bg));
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Player volume: a slim slider, lighter than tempo and pitch, with a thumb still big enough for a finger */
.player-volume {
    max-width: 22rem;
}
.player-volume .form-range {
    height: 2rem;
}
.player-volume .form-range::-webkit-slider-thumb {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.45rem;
}
.player-volume .form-range::-moz-range-thumb {
    width: 1.4rem;
    height: 1.4rem;
}

/* Show spaces and tabs in the BWW text box (js/show-whitespace.js): a layer behind the text draws the marks */
.ws-wrap {
    position: relative;
}
.ws-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: transparent;
    display: none;
}
.ws-wrap.ws-on .ws-layer {
    display: block;
}
.ws-wrap.ws-on textarea {
    position: relative;
    background-color: transparent !important;
}
.ws-layer span {
    position: relative;
}
.ws-layer .ws-tab::before,
.ws-layer .ws-space::before,
.ws-layer .ws-nbsp::before,
.ws-layer .ws-eol::before {
    position: absolute;
    left: 0;
    top: 0;
    color: #6ea8fe;
    opacity: 0.85;
}
.ws-layer .ws-tab::before { content: "\2192"; }
.ws-layer .ws-space::before { content: "\00b7"; width: 100%; text-align: center; }
.ws-layer .ws-eol::before { content: "\00b6"; opacity: 0.5; }
.ws-layer .ws-nbsp { background: rgba(255, 193, 7, 0.35); border-radius: 2px; }
.ws-layer .ws-nbsp::before { content: "\00b0"; width: 100%; text-align: center; color: #ffc107; }

/* The editor's Messages card only when the parser has something to say */
.messages-card:has(#messages-body[data-empty]) {
    display: none;
}

/* A band's logo beside its name: small in lists and headers, larger on its details page */
.band-logo {
    height: 40px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    border-radius: 6px;
}
.band-logo-lg {
    height: 72px;
    max-width: 160px;
}

/* The editor's note builder: a row of dropdowns, a large drawing of what Insert will put in, and a footer for bars
   and the rarer extras. It sits in the editor's narrow column, so everything wraps. */
.note-builder .nb-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.note-builder .nb-picks .form-select {
    width: auto;
    flex: 1 1 7rem;
}
.note-builder .nb-picks #nb-emb {
    flex-basis: 11rem;
}
.note-builder .nb-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.note-builder .nb-draw {
    background: #fff;
    color: #000;
    border-radius: 6px;
    width: 230px;
    min-height: 100px;
}
.note-builder .nb-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.note-builder #nb-text {
    font-size: 1.1rem;
}
.note-builder .nb-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}
.note-builder .nb-bar-pick {
    display: flex;
    gap: 0.4rem;
}
.note-builder .nb-bar-pick .form-select {
    width: auto;
}
.note-builder .nb-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.note-builder .nb-more[hidden] {
    display: none;
}
#note-builder > summary {
    cursor: pointer;
    list-style: none;
}

/* A .bww holding several tunes draws each one on its own, with a clear break between them (Andy, 2026-09-30). */
.sheet-tune + .sheet-tune {
    border-top: 2px solid #c8c8c8;
    margin-top: 1rem;
    padding-top: 1rem;
}

/* Tune types page: a hidden type is dimmed but still editable. */
.tune-type-hidden input[name="name"] {
    opacity: 0.6;
}

/* The player's count-in and blow-in, shown large as well as heard: a piper may not hear the clicks over the pipes. */
.settscribe-countdown {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    min-width: 12rem;
    padding: 1rem 2rem 1.25rem;
    border-radius: 1rem;
    background: rgba(10, 15, 30, 0.88);
    color: #fff;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
}
.settscribe-countdown[hidden] {
    display: none;
}
.settscribe-countdown-big {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.settscribe-countdown-big.accent {
    color: #ffc107;
}
.settscribe-countdown-caption {
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}
.settscribe-countdown-track {
    display: none;
    height: 6px;
    margin-top: 0.75rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.settscribe-countdown.blowing .settscribe-countdown-track {
    display: block;
}
.settscribe-countdown-fill {
    height: 100%;
    background: #3fb950;
}

/* Sett Up hub: three tiles, each opening its own page. */
.setup-tile {
    transition: border-color 0.15s;
}
.setup-tile:hover {
    border-color: var(--bs-primary);
}

/* ---- Band calendar (2026-10-05) ---------------------------------------------------------------------------- */
.event-date {
    width: 3.5rem;
    padding: 0.25rem 0;
    border-radius: 0.375rem;
    background: var(--sett-navy-panel);
    border: 1px solid var(--sett-navy-line);
}
.event-date-today {
    border-color: var(--sett-green-border);
    box-shadow: 0 0 0 2px rgba(var(--sett-green-rgb), 0.5);
}
.event-facts dt { font-weight: 600; color: var(--sett-muted); }
.event-setlists { max-height: 14rem; overflow-y: auto; }

/* Month: seven equal columns that shrink to fit a phone; titles wrap rather than widen the page. */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.month-head {
    text-align: center;
    font-size: 0.75rem;
    color: var(--sett-muted);
    padding-bottom: 0.25rem;
}
.month-day {
    min-height: 5.5rem;
    padding: 0.2rem;
    background: var(--sett-navy-panel);
    border: 1px solid var(--sett-navy-line);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.month-day-other { opacity: 0.45; }
.month-day-today { border-color: var(--sett-green-border); box-shadow: inset 0 0 0 1px var(--sett-green-border); }
.month-day-number { font-size: 0.8rem; color: var(--sett-muted); }
.month-event {
    display: block;
    font-size: 0.7rem;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    .month-day { min-height: 4rem; }
    .month-event { font-size: 0.6rem; padding: 0.15rem 0.2rem; }
}

/* SettScribe by TheSett.app (public): the tune's name is edited in place at the top of the editor */
.scribe-name { flex: 1 1 14rem; max-width: 30rem; }
.landing-section { max-width: 52rem; }

/* The editor side by side (Andy, 2026-10-08): the music scrolls in its own pane, so following a note in it never
   moves the page, and the text box beside it stays where it is while typing. Stacked on a narrower screen, the page
   scrolls as before. */
@media (min-width: 992px) {
    #sheet[data-editor] {
        max-height: max(360px, calc(100vh - 240px));
        overflow-y: auto;
    }
}

/* The Play page's music width (Andy, 2026-10-08): set by dragging the grip between the music and the controls. */
@media (min-width: 992px) {
    .play-layout { flex-wrap: nowrap; }
    .play-layout .play-music { flex: 0 0 auto; width: var(--music-width, 58.333%); }
    .play-layout .play-panel { flex: 1 1 0; min-width: 0; width: auto; }
}
.play-layout > .play-splitter {
    flex: 0 0 auto;
    width: 14px;
    padding: 0;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    justify-content: center;
    cursor: col-resize;
    touch-action: none;
    /* It sits in the gutter, over the columns' padding: above them, so a press lands on it. */
    position: relative;
    z-index: 2;
    border-radius: 6px;
}
.play-layout > .play-splitter:hover,
.play-layout > .play-splitter:focus-visible,
.play-layout > .play-splitter.dragging { background: rgba(255, 255, 255, 0.06); outline: none; }
/* The grip stays in sight however long the music is. */
.play-splitter-grip {
    position: sticky;
    top: 45vh;
    width: 4px;
    height: 56px;
    border-radius: 2px;
    background: var(--bs-secondary-color);
}
.play-splitter:hover .play-splitter-grip,
.play-splitter.dragging .play-splitter-grip { background: var(--bs-primary); }