/* Theory tools: /tools/kvinta, /tools/intervallar, /tools/olcu, /tools/luget (owner 2026-11-11, task 6). Builds on proto.css + home.css. */
.thy { max-width: 920px; padding-top: 12px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.thy .crumb { display: block; width: fit-content; margin-bottom: 10px; font-size: 0.85rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.thy h1 { font-size: 1.6rem; margin-top: 4px; }
.thy .lead { margin-top: 4px; color: var(--ink-2); }
.thy-grid { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 820px) { .thy-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.thy-card { padding: 12px 14px; }
.thy-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.thy-kv b { font-size: 1.15rem; }
.thy-kv span { font-size: 0.8rem; font-weight: 800; color: var(--muted); }
.thy-small { margin: 4px 0 0; font-size: 0.84rem; font-weight: 700; color: var(--muted); }
.thy-paper { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; overflow: hidden; }
.thy-paper svg { display: block; }
.thy-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.thy-btns button { flex: 1; min-width: 96px; min-height: 42px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 900; font-size: 0.86rem; cursor: pointer; }
.thy-btns button.p { background: var(--accent); border-color: var(--accent); color: #fff; }
.thy-hint { margin: 10px 0 0; padding: 9px 11px; border-radius: 12px; background: #fdf3d8; color: #6b4a00; font-size: 0.84rem; font-weight: 800; line-height: 1.4; }
.thy-more { margin-top: 16px; font-size: 0.86rem; font-weight: 700; color: var(--muted); line-height: 1.6; }
.thy-more a { color: var(--accent-ink); font-weight: 800; }
.thy-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.thy-chips .chip { min-height: 38px; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-weight: 800; font-size: 0.86rem; cursor: pointer; }
.thy-chips .chip.on { background: var(--ink-bg); border-color: var(--ink-bg); color: #fff; }
.thy-tabs { display: flex; margin-top: 12px; padding: 3px; border-radius: 12px; background: var(--paper-2); }
.thy-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-weight: 900; font-size: 0.9rem; cursor: pointer; }
.thy-tabs button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

/* circle of fifths */
.kv-wrap { padding: 6px; text-align: center; }
.kv-circle { display: block; width: 100%; max-width: 460px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.kv-seg { cursor: pointer; outline: none; }
.kv-seg path { stroke: #e4ddd0; stroke-width: 1; transition: fill 0.15s; }
.kv-maj path { fill: #fff; } .kv-min path { fill: #f3eee5; }
.kv-seg .kv-n { text-anchor: middle; font-weight: 900; font-size: 12.5px; fill: #1f2440; pointer-events: none; }
.kv-min .kv-n { font-size: 10px; font-weight: 800; fill: #4a4f6a; }
.kv-seg .kv-s { text-anchor: middle; font-weight: 800; font-size: 8px; fill: #8b8fa3; pointer-events: none; }
.kv-seg:hover path, .kv-seg:focus-visible path { fill: #fdf0e7; }
.kv-maj.nb path { fill: #fbe9df; } .kv-min.nb path { fill: #e3f0f0; }
.kv-maj.on path { fill: #e2763a; } .kv-min.on path { fill: #2f6f73; }
.kv-seg.on .kv-n, .kv-seg.on .kv-s { fill: #fff; }
.kv-seg.pair path { stroke: #1f2440; stroke-width: 2; }
.kv-seg.good path { fill: #1f9d5b !important; } .kv-seg.bad path { fill: #d0392b !important; }
.kv-seg.good .kv-n, .kv-seg.bad .kv-n, .kv-seg.good .kv-s, .kv-seg.bad .kv-s { fill: #fff; }
.kv-mid { fill: #1f2440; }
.kv-c1 { text-anchor: middle; fill: #fff; font-weight: 900; font-size: 15px; }
.kv-c2 { text-anchor: middle; fill: #f3b25b; font-weight: 800; font-size: 9.5px; }
.kq-prompt { margin: 6px 4px 2px; padding: 9px 11px; border-radius: 12px; background: var(--ink-bg); color: #fff; font-weight: 900; font-size: 0.95rem; }
.kq-end { margin: 8px 4px 2px; padding: 9px 11px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); font-weight: 900; }
.kv-chords { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.kv-chords button { display: grid; gap: 1px; padding: 7px 2px; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink); font: inherit; cursor: pointer; }
.kv-chords b { font-size: 0.9rem; } .kv-chords small { font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.kv-chords button:hover { background: var(--accent-soft); }

/* intervals */
.iv-name { margin: 8px 0 0; text-align: center; font-size: 1.5rem; font-weight: 900; }
.iv-sub { margin: 2px 0 0; text-align: center; font-size: 0.86rem; font-weight: 800; color: var(--muted); }
.iv-kbd { margin-top: 10px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.iv-kbd .kbd { display: block; width: 100%; height: auto; max-height: 150px; }
.iv-kbd .kbd g { cursor: pointer; }
.iv-kbd .kbd .kw rect { fill: #fff; stroke: #c9c2b5; }
.iv-kbd .kbd .kb rect { fill: #1f2440; }
.iv-kbd .kbd .on.iv-lo rect { fill: #f7c6a7; } .iv-kbd .kbd .on.iv-hi rect { fill: #a9d6d8; }
.iv-kbd .kbd .kb.on.iv-lo rect { fill: #e2763a; } .iv-kbd .kbd .kb.on.iv-hi rect { fill: #2f6f73; }
.iv-kbd .kbd .kl { font-size: 8px; font-weight: 900; text-anchor: middle; fill: #1f2440; }
.iv-kbd .kbd .kl-b { fill: #fff; }
.iv-kbd .kbd .ko { font-size: 8px; fill: #8b8fa3; text-anchor: middle; font-weight: 700; }
.iv-kbd .kbd .hit rect { filter: brightness(0.85); }
.iv-tap { text-align: center; }
.iv-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.iv-chips button { display: grid; gap: 1px; padding: 8px 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.iv-chips b { font-size: 0.9rem; } .iv-chips small { font-size: 0.66rem; font-weight: 800; color: var(--muted); }
.iv-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; } .iv-chips button.on small { color: #fde5d6; }
.iv-legend { text-align: center; }

/* time signatures */
.ms-dots, .ms-words, .ms-marks { display: flex; justify-content: space-around; margin-top: 8px; }
.ms-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper-2); transition: transform 0.08s; }
.ms-dots i.s2 { width: 20px; height: 20px; background: #f7c6a7; border-color: var(--accent); }
.ms-dots i.s1 { width: 17px; height: 17px; background: #fbe0cf; border-color: #eba27a; }
.ms-dots { align-items: center; min-height: 24px; }
.ms-dots i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.ms-words span { flex: 1; text-align: center; font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.ms-words span.s2, .ms-words span.s1 { color: var(--accent-ink); font-weight: 900; }
.ms-marks { position: relative; height: 16px; display: block; }
.ms-marks .mk { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.ms-marks .mk.ok { background: #1f9d5b; } .ms-marks .mk.off { background: #d9951a; } .ms-marks .mk.miss { border: 2px solid #d0392b; }
.ms-res { text-align: center; min-height: 1.2em; }
.ms-pad { display: block; width: 100%; height: 110px; margin-top: 8px; border-radius: 18px; border: 2px dashed var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-weight: 900; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ms-pad.hit { animation: mshit 0.18s; }
@keyframes mshit { from { background: var(--accent-soft); border-color: var(--accent); } }
.ks-staff { max-width: 280px; margin: 10px auto 0; }
.ks-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ks-opts button { min-height: 48px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 900; font-size: 0.95rem; cursor: pointer; }
.ks-opts button.good { background: #1f9d5b; border-color: #1f9d5b; color: #fff; }
.ks-opts button.bad { background: #d0392b; border-color: #d0392b; color: #fff; }
#ks-next { margin-top: 10px; }

/* dictionary */
.lg-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 6px 0 12px; min-height: 48px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.lg-search:focus-within { border-color: var(--ink); }
.lg-search span { color: var(--muted); font-size: 1.1rem; }
.lg-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 700; outline: none; }
.lg-search button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.lg-list { list-style: none; margin: 8px 0 0; padding: 2px 14px; }
.lg-term { padding: 11px 0; border-top: 1px solid var(--line); }
.lg-term:first-child { border-top: 0; }
.lg-th { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.lg-th b { font-size: 1.05rem; }
.lg-th mark { background: #fde9a8; color: inherit; border-radius: 3px; padding: 0; }
.lg-th em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; color: var(--accent-ink); }
.lg-cat { margin-left: auto; padding: 2px 8px; border-radius: 7px; background: var(--teal-soft); color: var(--teal); font-size: 0.68rem; font-weight: 900; }
.lg-tr { display: grid; grid-template-columns: 28px 1fr; gap: 2px 6px; margin: 5px 0 0; font-size: 0.86rem; font-weight: 700; }
.lg-tr dt { padding-top: 2px; font-size: 0.64rem; font-weight: 900; color: var(--muted); }
.lg-tr dd { margin: 0; }
.lg-say { margin: 4px 0 0; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.lg-say a, .lg-link { color: var(--accent-ink); font-weight: 800; }
.lg-link { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.lg-search input::-webkit-search-cancel-button { display: none; }
.lg-list:empty { display: none; }