/* UPLOAD TO: public_html/assets/css/site.css */
/* Ink on bone. Hairline rules, zero radius, Archivo throughout.
   Structure carries the design; the red is used sparingly and always means
   "this is the live thing" — current page, active state, the one action. */

:root{
  --bone:#F2EFE6;
  --paper:#FFFFFF;
  --ink:#14130E;
  --red:#C8322A;
  --rule:#CFC9B8;
  --muted:#6E6A5C;
  --green:#3F6B4A;
  --shell:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 20px}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--red);border-bottom-color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--bone);padding:9px 14px;z-index:20}

/* ------------------------------------------------------------ masthead -- */
.masthead{border-bottom:2px solid var(--ink);background:var(--bone)}
.masthead .shell{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding-top:16px;padding-bottom:12px}
.wordmark{
  font-size:26px;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;
  border-bottom:none;
}
.wordmark:hover{color:var(--red)}
.masthead nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0}
.masthead nav li{margin:0}
.masthead nav a{
  display:block;padding:4px 13px;border-bottom:none;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--rule);
}
.masthead nav li:last-child a{border-right:1px solid var(--rule)}
.masthead nav a:hover{color:var(--red)}
.masthead nav a[aria-current="page"]{color:var(--ink)}
.masthead nav a[aria-current="page"]::after{
  content:"";display:block;height:2px;background:var(--red);margin-top:3px;
}

/* --------------------------------------------------------------- type -- */
h1{font-size:clamp(30px,5.5vw,50px);font-weight:800;letter-spacing:-.032em;line-height:1.03;margin:26px 0 8px}
main.shell > h1:first-child{margin-top:22px}
h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:34px 0 10px}
h3{font-size:17px;font-weight:600;margin:20px 0 6px}
p{margin:0 0 14px}
.lede{font-size:18px;color:var(--muted);max-width:62ch;margin-bottom:22px}
.eyebrow{
  font-family:'Archivo Narrow',Archivo,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule);padding-bottom:5px;margin:38px 0 16px;
}
.muted{color:var(--muted)}
.small{font-size:13px}
code{font-family:'Archivo Narrow',ui-monospace,monospace;background:var(--paper);border:1px solid var(--rule);padding:1px 5px;font-size:.92em}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-block;border:1px solid var(--ink);background:var(--ink);color:var(--bone);
  padding:12px 22px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;font-family:Archivo,sans-serif;
}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:#fff}
.btn.danger{background:transparent;color:var(--red);border-color:var(--red)}
.btn.danger:hover{background:var(--red);color:#fff}
.btn.small{padding:7px 13px;font-size:11px}

/* ---------------------------------------------------------------- hero -- */
.hero{border-bottom:1px solid var(--rule);padding-bottom:30px;margin-bottom:6px}
.hero .row{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:end}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.hero-strip{display:flex;gap:0;border:1px solid var(--rule);background:var(--paper)}
.hero-strip figure{flex:1;margin:0;padding:14px 6px 10px;text-align:center;border-right:1px solid var(--rule);color:var(--ink)}
.hero-strip figure:last-child{border-right:none}
.hero-strip figcaption{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
@media(max-width:760px){.hero .row{grid-template-columns:1fr}}

/* -------------------------------------------------------------- panels -- */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.panel{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 20px 24px;background:var(--paper)}
.panel h3{margin-top:0}
.panel p{font-size:14px;color:var(--muted);margin-bottom:10px}
.panel .more{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;border-bottom:none}
.panel .more::after{content:" →"}
.panel.soon{background:transparent}
.tag{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);padding:2px 7px;margin-bottom:8px;
}
.tag.live{color:var(--red);border-color:var(--red)}

/* --------------------------------------------------------------- forms -- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:6px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.f{display:flex;flex-direction:column;gap:5px}
.f label{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* Style by exclusion rather than by listing types. The old rule named text,
   password and number, so an email or search field silently fell back to the
   browser's own styling — which is how a sign-in form ended up with two boxes
   of different heights sitting on top of each other. Anything text-like should
   look identical; checkboxes, radios, ranges and file pickers are excluded
   because they are not boxes. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
select,
textarea{
  font-family:Archivo,sans-serif;font-size:15px;line-height:1.4;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:0;
  padding:10px 12px;height:auto;
  /* Safari otherwise applies its own control chrome and ignores the rest. */
  -webkit-appearance:none;appearance:none;
}
select{
  /* Re-add an indicator, since appearance:none removes the native arrow. */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px;
}
input::placeholder{color:var(--muted);opacity:.7}
/* Chrome's autofill repaints the background; keep the box looking the same. */
input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 40px var(--paper) inset;
}
textarea{min-height:110px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.field{margin-bottom:16px;max-width:520px}
.field label{display:block;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%}
.field small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px}

/* ---------------------------------------------------------- chord grid -- */
.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.chord-card{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:16px 12px 14px;text-align:center;background:var(--paper);
  border-bottom-color:var(--rule);display:block;
}
.chord-card:hover{background:var(--bone);color:var(--red)}
.chord-card .cname{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.chord-card .cmeta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.chord-diagram{display:block;margin:0 auto}

.chord-detail{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;border-top:1px solid var(--rule);padding-top:24px}
@media(max-width:640px){.chord-detail{grid-template-columns:1fr}}
.spec{width:100%;border-collapse:collapse;font-size:14px;max-width:460px}
.spec td{border-bottom:1px solid var(--rule);padding:9px 6px;vertical-align:top}
.spec td:first-child{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:38%}

/* --------------------------------------------------------------- table -- */
.table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.table th{
  text-align:left;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--ink);padding:8px 8px;
}
.table td{border-bottom:1px solid var(--rule);padding:9px 8px;vertical-align:middle}
.table tr:hover td{background:var(--paper)}
.table .actions{text-align:right;white-space:nowrap}

/* ------------------------------------------------------------- notices -- */
.notice{border-left:3px solid var(--green);background:var(--paper);padding:12px 15px;margin:0 0 20px;font-size:14px}
.notice.warn{border-left-color:var(--red)}
.notice ul{margin:6px 0 0;padding-left:18px}
.empty{border:1px solid var(--rule);background:var(--paper);padding:34px 20px;text-align:center;color:var(--muted)}

.pager{display:flex;gap:8px;align-items:center;margin:22px 0;font-size:13px}
.pager a,.pager span{padding:7px 12px;border:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pager .on{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ------------------------------------------------------------ colophon -- */
.colophon{border-top:2px solid var(--ink);margin-top:56px;padding:24px 0 46px}
.colophon .mark{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:17px;margin:0 0 4px}
.colophon .note{color:var(--muted);font-size:13px;max-width:56ch}
.footlinks{list-style:none;display:flex;flex-wrap:wrap;gap:0 18px;padding:0;margin:12px 0 0}
.footlinks a{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);border-bottom:none}
.footlinks a:hover{color:var(--red)}

/* --------------------------------------------------------------- admin -- */
.adminbar{background:var(--ink);color:var(--bone);border-bottom:2px solid var(--red)}
.adminbar .shell{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding-top:11px;padding-bottom:11px}
.adminbar a{color:var(--bone);border-bottom:none;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.adminbar a:hover{color:var(--red)}
.adminbar .who{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
/* The h1 inside carries its own top margin, so 60px here stacked with it and
   left a band of dead space under the masthead. */
.login-wrap{max-width:390px;margin:34px auto 60px}
.login-wrap h1{margin-top:0}
.login-wrap p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ------------------------------------------------------------- player -- */
.player{border-top:1px solid var(--rule);margin-top:8px}
.ptop{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.pfile{display:flex;gap:8px;flex-wrap:wrap}
.pmeta{font-family:'Archivo Narrow',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:auto}

.pdrop{border:1px dashed var(--rule);background:var(--paper);padding:44px 20px;text-align:center;margin:18px 0}
.pdrop.over{border-color:var(--red);border-style:solid}
.pdrop p{margin:0 0 6px}

.pstage{margin:18px 0 0;border:1px solid var(--rule);background:var(--paper)}
.ptrackbar{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}
.ptrackbar:empty{display:none}
.trk{background:transparent;border:none;border-right:1px solid var(--rule);border-radius:0;
  padding:9px 15px;font-family:Archivo,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.trk:hover{color:var(--red)}
.trk.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}

/* Fixed height with its own scroll: AlphaTab scrolls the cursor into view
   inside this element, which it cannot do if the page itself is the scroller. */
/* Leave room for the sticky transport so the last system is never hidden
   behind it. */
.pviewport{height:min(58vh,560px);overflow-y:auto;overflow-x:hidden;padding:6px 10px}
@media(max-width:700px){
  .pviewport{height:52vh}
  .ptransport{gap:10px 16px;padding:10px 12px}
  .tgroup.slider{min-width:130px}
  .tgroup.toggles{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .tgroup.toggles label{font-size:12px}
}
.psurface{min-height:100px}

/* The transport stays reachable while reading. Sticky rather than fixed so it
   sits inside the player's own column and releases once you scroll past the
   player entirely, instead of hovering over unrelated page content. */
.ptransport{position:sticky;bottom:0;z-index:6;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  border:1px solid var(--rule);border-top:2px solid var(--ink);
  background:var(--paper);padding:12px 16px}
.player.playing .ptransport{box-shadow:0 -6px 18px rgba(20,19,14,.10)}
.ppos{font-family:'Archivo Narrow',sans-serif;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.tgroup{display:flex;align-items:center;gap:10px}
.tgroup.slider{flex-direction:column;align-items:flex-start;gap:4px;min-width:170px}
.tgroup.slider label{font-family:'Archivo Narrow',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tgroup.slider label b{font-family:Archivo,sans-serif;font-size:13px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.tgroup.slider input[type=range]{width:100%;accent-color:var(--red)}
.tgroup.toggles{flex-direction:column;align-items:flex-start;gap:5px}
.tgroup.toggles label{font-size:13px;display:flex;align-items:center;gap:7px;cursor:pointer}
.tgroup.toggles input{accent-color:var(--red)}

.pstatus{font-family:'Archivo Narrow',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--muted);margin:12px 0 0}
.pstatus.err{color:var(--red)}
pre.cmd{background:var(--ink);color:var(--bone);padding:12px 14px;overflow-x:auto;
  font-family:'Archivo Narrow',ui-monospace,monospace;font-size:12px;margin:8px 0;border-radius:0}


/* ------------------------------------------------- playback cursors -- */
/* AlphaTab creates these elements but ships no styling for them, so without
   this block the cursor is drawn and is completely invisible — which reads as
   "there is no cursor" rather than "the cursor has no colour".

   .at-cursor-bar    block behind the bar currently sounding
   .at-cursor-beat   vertical line at the exact beat position
   .at-highlight     the notes being played right now
   .at-selection div the range picked out for looping                        */

.psurface{position:relative}

.at-cursor-bar{
  background:rgba(200,50,42,.09);
  /* Sits under the notation: a tint over the staff would fight the engraving
     it is meant to help you read. */
  z-index:0;
}

.at-cursor-beat{
  background:var(--red);
  width:2px;
  opacity:.9;
  z-index:1;
}

.at-highlight *{
  fill:var(--red);
  stroke:var(--red);
}

/* The loop range, so a selection is visible before playback starts. */
.at-selection div{
  background:rgba(20,19,14,.10);
}

/* AlphaTab positions the cursors absolutely inside the surface. */
.psurface .at-cursor-bar,
.psurface .at-cursor-beat{position:absolute}


/* ------------------------------------------------ accounts and library -- */
.masthead .account{margin-left:auto}
.masthead .account ul{list-style:none;display:flex;gap:0;margin:0;padding:0}
.masthead .account a{display:block;padding:4px 13px;border-bottom:none;border-left:1px solid var(--rule);
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.masthead .account li:last-child a{border-right:1px solid var(--rule)}
.masthead .account a:hover{color:var(--red)}
.masthead .account a[aria-current="page"]{color:var(--ink)}

.uploadbox{border:1px solid var(--rule);background:var(--paper);padding:16px;margin:18px 0 8px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.uploadbox label{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);width:100%}
.uploadbox input[type=file]{font-family:Archivo,sans-serif;font-size:14px;flex:1 1 260px}
.uploadbox p{width:100%}

/* Practice calendar: five discrete levels rather than a continuous scale,
   because the useful question is whether you practised, not the exact minute. */
.calendar{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.calendar i{width:20px;height:20px;display:block;border:1px solid var(--rule);background:transparent}
.calendar i.lv1{background:rgba(200,50,42,.22);border-color:transparent}
.calendar i.lv2{background:rgba(200,50,42,.42);border-color:transparent}
.calendar i.lv3{background:rgba(200,50,42,.66);border-color:transparent}
.calendar i.lv4{background:var(--red);border-color:var(--red)}

.pfile select{max-width:260px}

/* Full screen: the player fills the display, the notation takes the space the
   site chrome was using, and the transport stays pinned to the bottom edge. */
.player.fs{background:var(--bone);padding:0 18px;display:flex;flex-direction:column;height:100%}
.player.fs .pstage{flex:1;margin-top:12px;display:flex;flex-direction:column;min-height:0}
.player.fs .pviewport{flex:1;height:auto;min-height:0}
.player.fs .ptransport{position:sticky;bottom:0}
.player.fs .pdrop{display:none}
.player:fullscreen{overflow:hidden}