/* Practice List Generator — "concert programme" design.
   Marcellus for titles, Literata for everything else. */

:root {
  --paper: #f4eddf;
  --sheet: #fbf7ee;
  --ink: #2b1d17;
  --ink-soft: #6b5a4f;
  --maroon: #7a1f2b;
  --maroon-deep: #5e1520;
  --gold: #a9843a;
  --green: #56703f;
  --rule: #dccdb2;
  --rule-soft: #e9dfcc;
  --btn-bg: #7a1f2b;
  --btn-bg-hover: #5e1520;
  --btn-ink: #fbf7ee;
  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --text: "Literata", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
/* Dark palette: applied when <html data-theme="dark"> (set from the switch, or the system setting). */
:root[data-theme="dark"] {
  --paper: #1d1613;
  --sheet: #261d19;
  --ink: #eee4d4;
  --ink-soft: #b3a493;
  --maroon: #d0707c;
  --maroon-deep: #e08c96;
  --gold: #c9a45c;
  --green: #9cbd7f;
  --rule: #4a3b33;
  --rule-soft: #362b25;
  --btn-bg: #8f2c3a;
  --btn-bg-hover: #a33a49;
  --btn-ink: #f3e9da;
  color-scheme: dark;
  }

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}
body.busy { cursor: progress; }
body.busy button { pointer-events: none; opacity: .6; }
a { color: var(--maroon); text-underline-offset: 3px; }
code { font-family: inherit; font-style: italic; color: var(--maroon); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.side {
  border-right: 1px solid var(--rule); padding: 34px 26px 28px;
  display: flex; flex-direction: column; gap: 30px; position: sticky; top: 0; height: 100vh;
}
.mark { font-family: var(--display); font-size: 1.55rem; line-height: 1.1; color: var(--maroon); }
.mark small { display: block; font-family: var(--text); font-style: italic; font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
.side nav { display: flex; flex-direction: column; gap: 18px; }
.side nav .group { display: flex; flex-direction: column; }
.side nav button {
  all: unset; cursor: pointer; padding: 4px 0 4px 14px; margin-left: -14px;
  border-left: 2px solid transparent; color: var(--ink-soft);
}
.side nav button:hover { color: var(--ink); }
.side nav button.active { color: var(--ink); border-left-color: var(--gold); font-weight: 600; }
.side nav button:focus-visible { outline: 2px solid var(--gold); }
.side-foot { margin-top: auto; font-size: .82rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; }
.theme-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-soft); }
.theme-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-switch .track { width: 34px; height: 20px; border-radius: 10px; background: var(--rule); position: relative; transition: background .2s; flex: none; }
.theme-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--sheet); transition: transform .2s; }
.theme-switch input:checked + .track { background: var(--gold); }
.theme-switch input:checked + .track::after { transform: translateX(14px); }
.theme-switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .theme-switch .track, .theme-switch .track::after { transition: none; } }
.side-foot .demo { font-style: italic; color: var(--maroon); }

.page { padding: 38px 48px 80px; max-width: 1440px; width: 100%; }

/* ---------- type ---------- */
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; margin: 0; }
h1 { font-size: 2.1rem; line-height: 1.15; }
h2 { font-size: 1.4rem; line-height: 1.2; }
h3 { font-size: 1.05rem; margin: 0 0 12px; }
.sub { font-style: italic; color: var(--ink-soft); }
.small { font-size: .85rem; }
.soft { color: var(--ink-soft); }
.raga { font-style: italic; }
p { margin: 0 0 12px; max-width: 70ch; }

.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 26px; }
.head .count { font-family: var(--text); font-style: italic; font-size: 1rem; color: var(--ink-soft); margin-left: 10px; }

/* ---------- controls ---------- */
button, input, select { font: inherit; color: inherit; }
.btn {
  border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  padding: 8px 18px; border-radius: 3px; cursor: pointer; font-weight: 600; font-size: .95rem;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--rule); font-weight: 400; }
.btn.quiet:hover { border-color: var(--ink-soft); }
.btn:disabled { opacity: .45; cursor: default; }
.link { all: unset; cursor: pointer; color: var(--maroon); font-size: .88rem; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.soft { color: var(--ink-soft); }
.link:focus-visible { outline: 2px solid var(--gold); }

input[type=text], input[type=search], input[type=number], input:not([type]), select {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 7px 10px; min-width: 0;
}
input[type=file] { font-size: .88rem; }
input:focus, select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }

input[type=checkbox] {
  appearance: none; width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer;
  border: 1.5px solid var(--gold); border-radius: 50%; background: var(--sheet); display: inline-grid; place-content: center;
}
input[type=checkbox]::after {
  content: ""; width: 10px; height: 6px; border: solid var(--sheet); border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg); opacity: 0;
}
input[type=checkbox]:checked { background: var(--green); border-color: var(--green); }
input[type=checkbox]:checked::after { opacity: 1; }
input[type=checkbox]:disabled { opacity: .4; cursor: default; }
input.square { border-radius: 3px; }
input.square:checked { background: var(--maroon); border-color: var(--maroon); }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 14px; color: var(--ink-soft); }
.seg input:checked + span { background: var(--ink); color: var(--sheet); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 3px; background: var(--sheet); }
.stepper button { all: unset; cursor: pointer; width: 34px; text-align: center; color: var(--ink-soft); font-size: 1.1rem; }
.stepper button:hover:not(:disabled) { color: var(--ink); background: var(--rule-soft); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.stepper input { width: 3ch; box-sizing: content-box; padding: 6px 4px; text-align: center; border: none; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-radius: 0; background: transparent; font-variant-numeric: lining-nums; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { box-shadow: none; background: var(--rule-soft); }

.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }

/* ---------- messages ---------- */
.note { border-left: 2px solid var(--gold); padding: 6px 14px; margin: 0 0 20px; background: var(--sheet); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.note.error { border-left-color: var(--maroon); }
.note.ok { border-left-color: var(--green); }
.note ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- programme (Today) ---------- */
.programme { background: var(--sheet); max-width: 960px; padding: 0 40px; position: relative; }
.band { height: 22px; margin: 0 -40px; position: relative; }
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 10px; background: var(--maroon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M0 10 L7 1 L14 10Z'/%3E%3C/svg%3E") repeat-x left bottom / 14px 10px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M0 10 L7 1 L14 10Z'/%3E%3C/svg%3E") repeat-x left bottom / 14px 10px;
}
.band::after { content: ""; position: absolute; left: 0; right: 0; top: 18px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); height: 3px; }
.band.bottom { transform: scaleY(-1); }
.programme .top { padding: 30px 0 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; border-bottom: 1px solid var(--rule); }
.programme .top .sub { margin-bottom: 4px; }
.programme .controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.programme .empty { padding: 40px 0 46px; color: var(--ink-soft); font-style: italic; }

table.prog { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
table.prog th { text-align: left; font-weight: 400; font-style: italic; color: var(--ink-soft); font-size: .85rem; padding: 14px 10px 6px; }
table.prog td { padding: 15px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
table.prog tr:last-child td { border-bottom: none; }
table.prog td.tick { width: 34px; padding-left: 0; vertical-align: top; padding-top: 19px; }
table.prog td.c-tala { white-space: nowrap; }
table.prog td.c-meta { display: none; }
table.prog td.num { width: 28px; color: var(--gold); font-family: var(--display); font-size: 1.1rem; }
table.prog .title { font-size: 1.08rem; }
table.prog tr.main .title { font-weight: 600; }
table.prog .role { display: block; font-style: italic; font-size: .82rem; color: var(--maroon); }
table.prog tr.sung td:not(.tick) { color: var(--ink-soft); }
table.prog tr.sung .title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--green) 70%, transparent); text-decoration-thickness: 1px; }
.prog-foot { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0 26px; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--ink-soft); }
.footnotes { margin: 0; padding: 0; list-style: none; font-style: italic; }
.footnotes li::before { content: "† "; color: var(--maroon); font-style: normal; }

@media (prefers-reduced-motion: no-preference) {
  .fresh table.prog tbody tr { animation: ink .5s ease-out both; }
  .fresh table.prog tbody tr:nth-child(2) { animation-delay: .07s; }
  .fresh table.prog tbody tr:nth-child(3) { animation-delay: .14s; }
  .fresh table.prog tbody tr:nth-child(4) { animation-delay: .21s; }
  .fresh table.prog tbody tr:nth-child(5) { animation-delay: .28s; }
  .fresh table.prog tbody tr:nth-child(6) { animation-delay: .35s; }
  @keyframes ink { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- ledgers (other pages) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filters input[type=search] { flex: 1 1 220px; }
.filters select { flex: 0 1 170px; }
.meta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; font-size: .88rem; color: var(--ink-soft); }

table.ledger { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.ledger th { text-align: left; font-weight: 400; font-style: italic; color: var(--ink-soft); font-size: .85rem; padding: 8px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
table.ledger td { padding: 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
table.ledger tr:hover td { background: color-mix(in srgb, var(--sheet) 70%, transparent); }
table.ledger td.actions { text-align: right; white-space: nowrap; }
table.ledger td.actions .link + .link { margin-left: 14px; }
table.ledger td.empty { text-align: center; font-style: italic; color: var(--ink-soft); padding: 30px; }
.star { color: var(--gold); }
.star.sub { color: var(--ink-soft); }
.meta-row .checks { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.group-note { display: block; font-style: italic; font-size: .82rem; color: var(--gold); }
.opt { font-size: .8rem; opacity: .8; }
table.ledger.compositions td, table.ledger.compositions th { padding-left: 14px; padding-right: 14px; }
table.ledger.compositions .c-title { min-width: 13rem; }
.table-scroll { overflow-x: auto; }
table.ledger.compositions .c-tala { white-space: nowrap; }
table.ledger.compositions .c-main { text-align: center; min-width: 4rem; }
table.ledger.compositions .c-last { white-space: nowrap; min-width: 7rem; }
.flag { font-style: italic; color: var(--maroon); font-size: .85rem; margin-left: 6px; }
.tag { font-style: italic; color: var(--ink-soft); font-size: .85rem; }

/* ---------- editor panels ---------- */
.panel { background: var(--sheet); border-top: 2px solid var(--gold); padding: 22px 26px 24px; margin-bottom: 28px; }
.panel h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 18px; }
.fields label { display: flex; flex-direction: column; gap: 5px; font-style: italic; font-size: .88rem; color: var(--ink-soft); grid-column: span 2; }
.fields label > input, .fields label > select { font-style: normal; color: var(--ink); }
.fields .w6 { grid-column: span 6; }
.fields .w3 { grid-column: span 3; }
.fields .w1 { grid-column: span 1; }
.fields .check { grid-column: span 2; font-style: normal; color: var(--ink); align-self: end; padding-bottom: 8px; flex-direction: row; }
.hint { font-size: .85rem; font-style: italic; color: var(--ink-soft); margin: 14px 0 0; }
.panel-actions { display: flex; gap: 10px; margin-top: 18px; }

/* ---------- history ---------- */
.day { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.day:first-of-type { padding-top: 4px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.day-head h2 { font-size: 1.2rem; }
.day ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.day li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.day li .mark-sung { color: var(--green); }
.day li.unsung { color: var(--ink-soft); }
.day li .detail { color: var(--ink-soft); font-size: .88rem; }

/* ---------- import ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.two section { border-top: 1px solid var(--ink); padding-top: 16px; }
.two h2 { font-size: 1.25rem; margin-bottom: 10px; }
.two ul { padding-left: 18px; margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft); }
.two .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

/* ---------- sign-in ---------- */
.gate { min-height: 100vh; display: grid; place-content: center; padding: 24px; }
.gate .programme { width: min(520px, 92vw); text-align: center; }
.gate .inner { padding: 40px 0 44px; }
.gate h1 { color: var(--maroon); margin-bottom: 14px; }
.gate p { margin: 0 auto 22px; }

.footnotes li.plain::before { content: none; }
.note.dup { display: block; }
.note.dup p { margin: 0 0 6px; }
.note.dup .panel-actions { margin-top: 6px; }
.note.dup .btn { padding: 5px 12px; font-size: .88rem; }

/* ---------- tablets and phones ---------- */
@media (max-width: 900px) {
  html { font-size: 16px; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { position: sticky; top: 0; z-index: 5; height: auto; background: var(--paper); border-right: none; border-bottom: 1px solid var(--rule);
    padding: 12px 20px 0; gap: 8px; min-width: 0; }
  .mark { font-size: 1.3rem; display: flex; align-items: baseline; gap: 10px; }
  .mark small { margin: 0; }
  .side nav { flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; margin: 0 -20px; padding: 0 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav .group { flex-direction: row; gap: 18px; padding-right: 18px; }
  .side nav button { margin: 0; padding: 8px 0 10px; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .side nav button.active { border-bottom-color: var(--gold); }
  .side-foot { position: absolute; top: 14px; right: 20px; flex-direction: row; align-items: center; gap: 14px; margin: 0; }
  .side-foot .who, .side-foot .demo { display: none; }
  .page { padding: 24px 20px 64px; }
  .programme { padding: 0 24px; }
  .band { margin: 0 -24px; }
  .two { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mark small { display: none; }
  .theme-switch .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page { padding: 20px 14px 56px; }
  h1 { font-size: 1.75rem; }
  .head { margin-bottom: 18px; }
  .head .btn { width: 100%; }
  .programme { padding: 0 16px; }
  .band { margin: 0 -16px; }
  .programme .top { padding: 22px 0 16px; }
  .programme .controls { width: 100%; }
  .programme .controls .btn { flex: 1 1 100%; }
  table.prog thead { display: none; }
  table.prog, table.prog tbody { display: block; }
  table.prog tr { display: grid; grid-template-columns: 30px 22px minmax(0, 1fr); }
  table.prog td { border: none; padding: 2px 0; }
  table.prog tbody tr { border-bottom: 1px solid var(--rule-soft); padding: 12px 0; }
  table.prog td.tick { grid-row: span 2; padding-top: 3px; }
  table.prog td.num { grid-row: span 2; }
  table.prog td.c-raga, table.prog td.c-tala, table.prog td.c-comp { display: none; }
  table.prog td.c-meta { display: block; grid-column: 3; font-size: .9rem; color: var(--ink-soft); }
  .prog-foot { flex-direction: column; gap: 6px; }
  .filters select, .filters input[type=search] { flex: 1 1 100%; }
  .meta-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .panel { padding: 18px 16px 20px; margin-left: -14px; margin-right: -14px; }
  .fields { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fields label, .fields .w3, .fields .w6, .fields .check { grid-column: span 2; }
  .fields .w1 { grid-column: span 1; }
  .panel-actions .btn { flex: 1; }
  .table-scroll { overflow: visible; }
  table.ledger, table.ledger tbody { display: block; }
  table.ledger thead { display: none; }
  table.ledger tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
  table.ledger tr:hover td { background: none; }
  table.ledger td { display: inline; border: none; padding: 0; font-size: .92rem; }
  table.ledger td[data-label]:not(.actions)::before { content: attr(data-label) " "; font-style: italic; font-size: .82rem; color: var(--ink-soft); opacity: .85; }
  table.ledger td:not(:first-child):not(.actions) { display: inline-block; margin: 2px 16px 0 0; color: var(--ink); }
  table.ledger td:first-child { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
  table.ledger td:empty, table.ledger td.c-last { display: none !important; }
  table.ledger td.actions { display: block; text-align: left; margin-top: 6px; }
  table.ledger td.actions .link { font-size: .92rem; padding: 4px 0; }
  table.ledger td.actions .link + .link { margin-left: 18px; }
  table.ledger.compositions td, table.ledger.compositions th { padding: 0; }
  table.ledger.compositions .c-title { min-width: 0; }
  .day-head { flex-direction: column; gap: 4px; }
  .note { flex-direction: column; }
}