/* Tool pages: one app shell and one set of components, after the giscopetracker.com layout.
   Sidebar on wide screens, a tab bar on phones, white cards with a hairline border,
   sans-serif headings inside the tools (the serif stays for page titles).
   Colours come from assets/theme.css. */

/* ---------- shell ---------- */
.ms-side, .ms-tabbar { display: none; }
@media (min-width: 1180px) {
  body.ms-tool { padding-left: 236px; }
  body.ms-tool .ms-bar { margin-left: -236px; padding-left: 236px; }
  .ms-side { display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: 236px; overflow-y: auto;
    background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px 20px; }
  .ms-side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
  .ms-side-brand img { width: 30px; height: 30px; }
  .ms-side-label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 14px 10px 5px; }
  .ms-side a.ms-side-link { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--ink-2); font-weight: 550; font-size: .9rem; text-decoration: none; }
  .ms-side a.ms-side-link:hover { background: var(--surface-2); color: var(--ink); }
  .ms-side a.ms-side-link.on { background: var(--accent-soft); color: var(--accent); }
  .ms-side svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ms-side-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); }
  .ms-side-foot a { color: var(--ink-2); }
  .ms-side { z-index: 950; }
  /* beside the sidebar the top bar keeps the site pages and the account controls */
  body.ms-tool .ms-bar .ms-brand { visibility: hidden; width: 0; overflow: hidden; margin: 0; padding: 0; }
  body.ms-tool #ms-bar .ms-tools { display: none !important; }
  body.ms-tool #ms-bar #ms-navigation { order: 0; flex: 1 1 auto; justify-content: flex-start; padding: 0; }
}
@media (max-width: 760px) {
  body.ms-tool { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .ms-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(0,0,0,.05); }
  .ms-tabbar a, .ms-tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; font: 600 .66rem/1 var(--font-ui); color: var(--ink-3); background: none; border: 0; text-decoration: none; cursor: pointer; }
  .ms-tabbar .on { color: var(--accent); }
  .ms-tabbar svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.ms-tool ms-metronome { --mt-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.ms-tool .flow-sessionbar { bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.ms-tool .toast, body.ms-tool .ms-toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 1180px) {
  body.ms-tool.ms-noside { padding-left: 0; }
  body.ms-tool.ms-noside .ms-bar { margin-left: 0; padding-left: 0; }
  body.ms-noside .ms-side { display: none; }
  body.ms-tool.ms-noside .ms-bar .ms-brand { visibility: visible; width: auto; overflow: visible; }
}
@media print { .ms-side, .ms-tabbar { display: none !important; } body.ms-tool { padding: 0 !important; } }

/* ---------- type: serif for the page title only ---------- */
body.ms-tool main h2, body.ms-tool main h3, body.ms-tool .wrap h2, body.ms-tool .wrap h3,
body.ms-tool .session-head h2, body.ms-tool .dailies-head h2, body.ms-tool .statpanel h3,
body.ms-tool .workflow-heading h2, body.ms-tool .flow-h, body.ms-tool .fn-title {
  font-family: var(--font-ui); font-weight: 650; letter-spacing: -.01em;
}
body.ms-tool .workflow-heading h2 { font-size: 1.1rem; }

/* ---------- cards: white, hairline border, soft shadow ---------- */
body.ms-tool .workflow-card, body.ms-tool .dailies, body.ms-tool .session-head, body.ms-tool .exrow,
body.ms-tool .statpanel, body.ms-tool .composition-progress, body.ms-tool .logsec {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
body.ms-tool #board .card { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
body.ms-tool #board .card.flagged { background: var(--warn-bg, var(--gold-soft)); border-color: var(--warn-line, var(--gold)); }
body.ms-tool .daily { background: var(--surface); }
body.ms-tool .daily.on { background: var(--green-soft); }

/* ---------- segmented pills for view switches ---------- */
body.ms-tool .randomizer-tabs { display: flex; gap: 6px; flex-wrap: wrap; border: 0; margin-bottom: 14px; }
body.ms-tool .randomizer-tabs button { font: 600 .87rem/1.2 var(--font-ui); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2) !important; border-radius: 999px; padding: 8px 16px; min-height: 38px; box-shadow: none; }
body.ms-tool .randomizer-tabs button[aria-selected="true"] { background: var(--accent-fill); border-color: var(--accent-fill) !important; color: var(--on-accent); }
body.ms-tool .wrap > nav button { font-weight: 600; min-height: 38px; }

/* ---------- number tiles: small label, large tabular figure ---------- */
body.ms-tool .exrow .stat .lbl, body.ms-tool .cp-stats span { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
body.ms-tool .exrow .stat .val, body.ms-tool .cp-stats strong { font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
body.ms-tool .cp-stats > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }

/* ---------- buttons: one height and radius ---------- */
body.ms-tool main button.primary, body.ms-tool .wrap button.primary, body.ms-tool .controls button, body.ms-tool button.ghost, body.ms-tool button.small, body.ms-tool button.mini {
  border-radius: 9px; font-family: var(--font-ui); font-weight: 600;
}
body.ms-tool main button.primary, body.ms-tool .wrap button.primary { min-height: 40px; }

/* ---------- phone fixes ---------- */
@media (max-width: 760px) {
  body.ms-tool .rail .project-block { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
  body.ms-tool .rail .project-block > .eyebrow { grid-column: 1 / -1; }
  body.ms-tool .rail .project-block .project-name { width: auto; min-width: 0; grid-column: 1; }
  body.ms-tool .msd-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.ms-tool .msd-panel { bottom: calc(140px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   2026-11 design pass, applied to every tool page:
   1. sentence-case labels, no letter-spaced capitals
   2. one accent colour, used for the main action and for progress
   3. lists with dividers instead of a card for every item
   4. fewer controls per item (secondary actions under More)
   5. short copy (see the HTML)
   6. one page header pattern
   ============================================================ */

/* 1. labels */
body.ms-tool :is(.ms-side-label, .wk-label, .exrow .stat .lbl, .cp-stats span, .controls .qlabel, .sumcard .lbl, .mstat .lbl,
  h2.sec, .stat .l, .wkl, .eyebrow, .cp-eyebrow, .flow-eyebrow, .fg-label, .fs-title, .fr-title, .quick-setup .sl,
  .group h2, .card .pname, .timerbar .tlabel, .realise b, table.declared thead th, table.rescore thead th, .opensrow > b,
  .axhead, .lvl .bkno, .mlab, .step .sl, .stats dt, .tm-text h4, .tm-concept h4, .tm-concept-tag, .tx-root h4, .beat-table th, .micro) {
  text-transform: none !important; letter-spacing: 0 !important;
}
body.ms-tool .ms-side-label { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
body.ms-tool .wk-label, body.ms-tool .wkl, body.ms-tool .stat .l, body.ms-tool .cp-eyebrow { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
body.ms-tool h2.sec { font-size: .95rem; color: var(--ink); font-weight: 650; }

/* 6. one page header: serif title, one plain line under it, actions on the right */
body.ms-tool header.hero, body.ms-tool header.page { background: transparent; border-bottom: 0; padding: 32px 0 6px; }
body.ms-tool header.hero h1, body.ms-tool header.page h1, body.ms-tool .wrap > header h1, body.ms-tool .bookshelf-page header h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.85rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 6px;
}
body.ms-tool header.hero p, body.ms-tool header.page .sub, body.ms-tool .bookshelf-page header .lede {
  font-size: .98rem; color: var(--ink-2); max-width: 62ch; margin: 0;
}
body.ms-tool header.hero + main, body.ms-tool header.page + main { padding-top: 18px; }
body.ms-tool .wrap > header { padding-top: 8px; }

/* 2. one accent */
body.ms-tool .streak, body.ms-tool .examcount { color: var(--ink-2); font-weight: 500; }
body.ms-tool .exrow .stat .val.target { color: var(--ink); }
body.ms-tool .exrow .progress-mini > div, body.ms-tool .sessbar > div { background: var(--accent-fill); }
body.ms-tool .daily.on { background: var(--accent-soft); border-color: var(--accent); }
body.ms-tool .daily.on .tick { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
body.ms-tool .daily.on .dmeta { color: var(--ink-2); }
body.ms-tool .result.pr { color: var(--ink); }
body.ms-tool .wks span.extra.on { background: var(--accent-fill); }
body.ms-tool a.tool { border-top: 1px solid var(--line); }

/* 3 + 4. Piano Trainer: exercises as one list, three grading buttons and a More menu */
body.ms-tool #sessionArea .exrow { border: 1px solid var(--line) !important; border-top-width: 0 !important; border-radius: 0; box-shadow: none; margin: 0; padding: 16px 18px; background: var(--surface); }
body.ms-tool #sessionArea :not(.exrow) + .exrow, body.ms-tool #sessionArea .exrow:first-child { border-top-width: 1px !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
body.ms-tool #sessionArea .exrow:has(+ :not(.exrow)), body.ms-tool #sessionArea .exrow:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-bottom: 14px; }
body.ms-tool #sessionArea :not(.exrow) + .exrow:has(+ :not(.exrow)), body.ms-tool #sessionArea :not(.exrow) + .exrow:last-child { border-radius: var(--radius-sm); }
body.ms-tool #sessionArea .exrow.done, body.ms-tool #sessionArea .exrow.failed { opacity: .6; }
body.ms-tool .exrow h3 { font-size: 1rem; font-weight: 650; margin: 0 0 3px; }
body.ms-tool .exrow .meta { font-size: .82rem; color: var(--ink-2); margin: 0 0 2px; }
body.ms-tool .exrow .meta .m + .m::before { content: " · "; color: var(--ink-3); }
body.ms-tool .exrow .meta .m-exam { font-weight: 600; color: var(--ink); }
body.ms-tool .exrow .meta .m-state { font-weight: 600; color: var(--accent); }
body.ms-tool .exrow .mods { font-size: .8rem; color: var(--ink-3); }
body.ms-tool .exrow .nums { gap: 4px 22px; margin: 10px 0 0; }
body.ms-tool .exrow .stat { display: flex; align-items: baseline; gap: 6px; }
body.ms-tool .exrow .stat .lbl { font-size: .8rem; font-weight: 500; color: var(--ink-3); }
body.ms-tool .exrow .stat .val { font-size: .95rem; font-weight: 650; letter-spacing: 0; }
body.ms-tool .exrow .stat .val.target { font-size: 1.15rem; }
body.ms-tool .exrow .progress-mini { height: 3px; margin-top: 10px; }
body.ms-tool .exrow .controls { gap: 8px; margin-top: 12px; }
body.ms-tool .controls .qlabel { font-size: .8rem; color: var(--ink-3); font-weight: 500; }
body.ms-tool .controls button.go, body.ms-tool .controls button.slips, body.ms-tool .controls button.fail {
  min-height: 38px; padding: 0 16px; border-radius: 9px; font: 600 .875rem/1 var(--font-ui); filter: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
}
body.ms-tool .controls button.go { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
body.ms-tool .controls button.slips:hover, body.ms-tool .controls button.fail:hover { border-color: var(--ink-3); }
body.ms-tool details.more { position: relative; }
body.ms-tool details.more > summary { list-style: none; cursor: pointer; min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; color: var(--ink-2); font: 600 .875rem/1 var(--font-ui); }
body.ms-tool details.more > summary::-webkit-details-marker { display: none; }
body.ms-tool details.more > summary:hover, body.ms-tool details.more[open] > summary { border-color: var(--line-2); color: var(--ink); }
body.ms-tool .more-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); min-width: 230px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
body.ms-tool .more-menu button { all: unset; cursor: pointer; padding: 9px 10px; border-radius: 7px; font: 500 .9rem/1.25 var(--font-ui); color: var(--ink); }
body.ms-tool .more-menu button:hover, body.ms-tool .more-menu button:focus-visible { background: var(--surface-2); }
@media (max-width: 640px) { body.ms-tool .more-menu { left: auto; right: 0; } }
body.ms-tool .session-head { box-shadow: none; }
body.ms-tool .evenline { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }
body.ms-tool .restbox, body.ms-tool .donebox { text-align: left; }

/* 3. Music tools page: one list of tools */
body.ms-tool .tools { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
body.ms-tool a.tool { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: baseline;
  padding: 14px 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; transform: none !important; }
body.ms-tool a.tool:first-child { border-top: 0; }
body.ms-tool a.tool:hover { background: var(--surface-2); }
body.ms-tool a.tool .row-index { grid-row: 1 / 3; color: var(--ink-3); font: 500 .85rem/1.6 var(--font-ui); font-variant-numeric: tabular-nums; }
body.ms-tool a.tool h3 { grid-column: 2; margin: 0; font: 650 1rem/1.3 var(--font-ui); }
body.ms-tool a.tool p { grid-column: 2; margin: 0; font-size: .88rem; color: var(--ink-2); }
body.ms-tool a.tool .go { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 0; color: var(--ink-3); }
body.ms-tool a.tool .go::after { content: "→"; font-size: 1.1rem; }
body.ms-tool a.tool:hover .go { color: var(--accent); }