/* notei.co free tools and transposition guides (/staff-paper, /transposer,
   /circle-of-fifths, /transpose/*). Built on the legal-page reading column and the
   pricing compare table from style.css; only the site's own tokens, no new colours. */
.tool-page .legal-wrap{max-width:820px}
.tool-page .crumbs{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.tool-page .crumbs a{color:var(--ink2)}
.tool-page .tool-lede{font-size:clamp(1.02rem,1.25vw,1.15rem);color:var(--ink2);line-height:1.6;margin:14px 0 6px;max-width:62ch}
.tool-page .legal-body a{color:var(--ink)}
.tool-page .legal-body ol{margin:11px 0;padding-left:22px}
.tool-page .legal-body li{margin:4px 0}
.tool-page .compare-scroll{margin-top:18px;margin-bottom:8px}
.tool-page .compare-table{min-width:0}
.tool-page .compare-table th,.tool-page .compare-table td{text-align:left}
.tool-page .compare-table tbody th{white-space:normal}
.tool-page .table-note{font-size:.9rem;color:var(--muted)}

.tool-box{margin:28px 0 8px;padding:clamp(18px,3vw,28px);background:var(--paper);border:1px solid var(--border);border-radius:var(--radius)}
.tool-box h2{margin-top:0!important}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 18px;margin:16px 0}
.tool-field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink2)}
.tool-field.wide{grid-column:1/-1}
.tool-field.check{flex-direction:row;align-items:center;gap:10px}
.tool-box select,.tool-box input[type=number],.tool-box input[type=text],.tool-box textarea{font:inherit;font-weight:500;color:var(--ink);background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:10px 12px;width:100%}
.tool-box textarea{min-height:110px;resize:vertical;font-size:1rem;line-height:1.5}
.tool-box output,.tool-box .tool-out{display:block;min-height:110px;white-space:pre-wrap;font-size:1rem;line-height:1.5;background:var(--cream2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--ink)}
.tool-box select:focus,.tool-box input:focus,.tool-box textarea:focus{outline:2px solid var(--honey);outline-offset:1px}
.tool-box input[type=checkbox]{width:18px;height:18px;accent-color:var(--honey-deep)}
.tool-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:6px}
.tool-actions .cta[disabled]{opacity:.5;cursor:not-allowed}
.tool-status{font-size:.9rem;color:var(--muted);margin-top:10px}
.tool-preview{margin-top:18px;max-width:340px;border:1px solid var(--border);border-radius:8px;overflow:hidden;color:var(--engrave);box-shadow:0 6px 18px rgba(26,26,26,.06)}
.tool-preview svg{display:block;width:100%;height:auto}
.tool-cta{margin:34px 0 6px;padding:22px clamp(18px,3vw,26px);border-radius:var(--radius);background:var(--cream2);border:1px solid var(--border)}
.tool-cta p{margin:0 0 14px!important}
.tool-links{display:flex;flex-wrap:wrap;gap:8px 18px;padding-left:0!important;list-style:none}

/* circle of fifths */
.cof-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:10px}
@media(min-width:760px){.cof-wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.cof{width:100%;max-width:440px;height:auto;display:block;margin:0 auto;font-family:var(--font)}
.cof .cof-maj{fill:var(--paper);stroke:var(--border);stroke-width:1.2}
.cof .cof-min{fill:var(--cream2);stroke:var(--border);stroke-width:1.2}
.cof .cof-hub{fill:var(--cream);stroke:var(--border);stroke-width:1.2}
.cof text{text-anchor:middle;dominant-baseline:middle;fill:var(--ink)}
.cof .cof-t{font-size:15px;font-weight:800}
.cof .cof-tm{font-size:13px;font-weight:600;fill:var(--ink2)}
.cof .cof-sig{font-size:13px;font-weight:700;fill:var(--muted)}
.cof .cof-hub-t{font-size:13px;font-weight:600;fill:var(--muted)}
.cof .cof-one{display:none}
/* phones: the circle scales to about 0.75, so one enharmonic name per inner wedge,
   set larger, keeps the minor keys and signature counts readable */
@media(max-width:479.98px){
  .cof .cof-both{display:none}
  .cof .cof-one{display:inline}
  .cof .cof-tm{font-size:16px}
  .cof .cof-sig{font-size:16px}
  .cof .cof-hub-t{font-size:15px}
}
.cof.is-live .cof-seg{cursor:pointer}
.cof .cof-seg:focus{outline:none}
.cof .cof-seg:focus-visible .cof-maj{stroke:var(--ink);stroke-width:2}
.cof .cof-seg.near .cof-maj,.cof .cof-seg.near .cof-min{fill:rgba(244,162,59,.16)}
.cof .cof-seg.on .cof-maj{fill:var(--honey)}
.cof .cof-seg.on .cof-min{fill:var(--honey-soft)}
.cof-info{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.cof-info h3{margin-top:0!important}
.cof-info p{margin:8px 0;color:var(--ink2);line-height:1.55}
.cof-sigstaff{width:100%;max-width:260px;height:auto;margin-top:8px;stroke:var(--ink);stroke-width:1}
.cof-sigstaff text{stroke:none;fill:var(--ink);font-size:17px;font-family:system-ui,sans-serif}
.cof-sigstaff .cof-clef{font-family:'Bravura';font-size:40px}