/* Tonegrid workspace. Root rules are scoped to .uwapp-root.uwapp-tonegrid (the body carries .uwapp-tonegrid too).
   Colours: own tokens for light and dark (follows html[data-theme] / prefers-color-scheme); the grid "stage" is dark in
   both themes so the lit squares glow. Animations only under prefers-reduced-motion: no-preference. */
.uwapp-root.uwapp-tonegrid {
  --tg-bg: #f4f3fb; --tg-surface: #ffffff; --tg-surface-2: #eceaf8; --tg-ink: #1c1b33; --tg-muted: #4f4d70;
  --tg-line: #d6d3ec; --tg-control: #6f6c99; --tg-accent: #5443c9; --tg-accent-ink: #4535b8; --tg-on-accent: #ffffff;
  --tg-teal: #0f766e; --tg-warn: #9a3412; --tg-focus: #b45309;
  --tg-stage: #17172e; --tg-stage-2: #22223f; --tg-cell: #2a2a4a; --tg-cell-line: #77739f; --tg-cell-on: #b9adff; --tg-drum-on: #45d6c8;
  --tg-now: #3a3a66; --tg-label: #d4d2f0; --tg-cell-focus: #ffd166;
  background: var(--tg-bg); color: var(--tg-ink); color-scheme: light;
}
:root[data-theme="dark"] .uwapp-root.uwapp-tonegrid {
  --tg-bg: #101020; --tg-surface: #1a1a2e; --tg-surface-2: #24243c; --tg-ink: #ecebfa; --tg-muted: #b9b7d9;
  --tg-line: #34345a; --tg-control: #8c89b8; --tg-accent: #ab9fff; --tg-accent-ink: #c4bbff; --tg-on-accent: #14122b;
  --tg-teal: #5eead4; --tg-warn: #fdba74; --tg-focus: #fbbf24; --tg-stage: #121226; --tg-stage-2: #1b1b34;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uwapp-root.uwapp-tonegrid {
    --tg-bg: #101020; --tg-surface: #1a1a2e; --tg-surface-2: #24243c; --tg-ink: #ecebfa; --tg-muted: #b9b7d9;
    --tg-line: #34345a; --tg-control: #8c89b8; --tg-accent: #ab9fff; --tg-accent-ink: #c4bbff; --tg-on-accent: #14122b;
    --tg-teal: #5eead4; --tg-warn: #fdba74; --tg-focus: #fbbf24; --tg-stage: #121226; --tg-stage-2: #1b1b34;
    color-scheme: dark;
  }
}

/* Platform element defaults (buttons, tables, code) leak into app workspaces: reset them at zero specificity. */
:where(.tg-app) button { font: inherit; font-size: .9rem; font-weight: 600; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; width: auto; min-height: 0; }
:where(.tg-app) button:hover { background: none; }
:where(.tg-app) :is(input, select, textarea) { font: inherit; color: var(--tg-ink); background: var(--tg-surface); border: 1px solid var(--tg-control); border-radius: 8px; }
:where(.tg-app) table { border-collapse: collapse; width: 100%; margin: 0; font-size: .92rem; }
:where(.tg-app) :is(th, td) { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--tg-line); }
:where(.tg-app) thead th { background: var(--tg-surface-2); color: var(--tg-ink); }
:where(.tg-app) kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: 1px 6px; border: 1px solid var(--tg-control); border-bottom-width: 2px; border-radius: 5px; background: var(--tg-surface-2); color: var(--tg-ink); white-space: nowrap; }
:where(.tg-app) a { color: var(--tg-accent-ink); }

.tg-app { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--tg-bg); color: var(--tg-ink); }
.tg-app :focus-visible { outline: 3px solid var(--tg-focus); outline-offset: 2px; }
.tg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tg-spacer { flex: 1; }
.tg-hint { color: var(--tg-muted); font-size: .85rem; margin: .2rem 0 .5rem; }
.tg-warn { color: var(--tg-warn); font-weight: 600; font-size: .9rem; }
.tg-note { font-size: .88rem; color: var(--tg-muted); background: var(--tg-surface-2); border-radius: 8px; padding: .55rem .75rem; }
.tg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.tg-wide { width: 100%; box-sizing: border-box; }

/* ---------- buttons */
.tg-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .35rem .75rem; border: 1px solid var(--tg-control); border-radius: 8px; background: var(--tg-surface); color: var(--tg-ink); font-size: .88rem; }
.tg-btn:hover:not([disabled]) { background: var(--tg-surface-2); }
.tg-btn[disabled], .tg-icon-btn[disabled] { opacity: .5; cursor: not-allowed; }
.tg-btn-primary { background: var(--tg-accent); border-color: var(--tg-accent); color: var(--tg-on-accent); }
.tg-btn-primary:hover:not([disabled]) { background: var(--tg-accent-ink); border-color: var(--tg-accent-ink); color: var(--tg-on-accent); }
.tg-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; color: var(--tg-ink); }
.tg-icon-btn:hover:not([disabled]) { background: var(--tg-surface-2); border-color: var(--tg-line); }
.tg-mute[aria-pressed="true"] { background: var(--tg-surface-2); border-color: var(--tg-warn); color: var(--tg-warn); }

/* ---------- toolbar */
.tg-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem .9rem; background: var(--tg-surface); border-bottom: 1px solid var(--tg-line); }
.tg-tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.tg-menus { gap: .15rem; }
.tg-menu-wrap { position: relative; }
.tg-menu-btn { display: inline-flex; align-items: center; gap: .2rem; min-height: 34px; padding: .3rem .6rem; border-radius: 8px; color: var(--tg-ink); }
.tg-menu-btn:hover, .tg-menu-btn[aria-expanded="true"] { background: var(--tg-surface-2); }
.tg-menu { position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 4px); min-width: 15rem; max-width: min(22rem, 92vw); padding: .3rem; background: var(--tg-surface); border: 1px solid var(--tg-control); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.tg-menu[hidden] { display: none; }
.tg-menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 32px; padding: .35rem .6rem; border-radius: 6px; text-align: start; font-weight: 500; color: var(--tg-ink); }
.tg-menu-item:hover, .tg-menu-item:focus { background: var(--tg-surface-2); }
.tg-menu-item[aria-disabled="true"] { color: var(--tg-muted); cursor: not-allowed; }
.tg-menu-key { color: var(--tg-muted); font-size: .78rem; font-weight: 600; }
.tg-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--tg-line); }
.tg-play { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .4rem 1rem; border-radius: 999px; background: var(--tg-accent); color: var(--tg-on-accent); font-size: .95rem; }
.tg-play:hover { background: var(--tg-accent-ink); }
.tg-play.is-playing { background: var(--tg-ink); color: var(--tg-surface); }
.tg-segment { display: inline-flex; border: 1px solid var(--tg-control); border-radius: 999px; padding: 2px; }
.tg-segment button { min-height: 30px; padding: .2rem .75rem; border-radius: 999px; color: var(--tg-ink); font-size: .85rem; }
.tg-segment button[aria-pressed="true"] { background: var(--tg-ink); color: var(--tg-surface); }
.tg-namewrap { flex: 1 1 12rem; justify-content: flex-end; }
.tg-name { width: 100%; max-width: 20rem; min-height: 34px; padding: .25rem .6rem; font-weight: 700; }

/* ---------- body */
.tg-body { position: relative; flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 1rem; padding: 1rem; }
.tg-main { display: grid; gap: 1rem; min-width: 0; }
.tg-side { display: grid; gap: 1rem; min-width: 0; }
.tg-patternbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.tg-patternbar-label { font-weight: 700; font-size: .85rem; color: var(--tg-muted); text-transform: uppercase; letter-spacing: .06em; }
.tg-patterns { display: flex; flex-wrap: wrap; gap: .3rem; }
.tg-pattern { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--tg-control); border-radius: 9px; background: var(--tg-surface); color: var(--tg-ink); font-size: 1rem; font-weight: 800; }
.tg-pattern[aria-pressed="true"] { background: var(--tg-accent); border-color: var(--tg-accent); color: var(--tg-on-accent); }
.tg-pattern-dot { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.tg-pattern.is-playing .tg-pattern-dot { background: var(--tg-teal); box-shadow: 0 0 0 1.5px var(--tg-surface); }
.tg-pattern[aria-pressed="true"].is-playing .tg-pattern-dot { background: var(--tg-on-accent); box-shadow: none; }
.tg-pattern-tools { display: flex; flex-wrap: wrap; gap: .3rem; }

.tg-panel { background: var(--tg-surface); border: 1px solid var(--tg-line); border-radius: 14px; padding: .75rem; min-width: 0; }
.tg-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 0 0 .5rem; }
.tg-panel-head h2 { margin: 0; font-size: 1.05rem; }
.tg-count { color: var(--tg-muted); font-size: .85rem; }

/* ---------- matrix */
.tg-scroller { overflow-x: auto; border-radius: 10px; background: var(--tg-stage); padding: .5rem .6rem .7rem; scrollbar-color: var(--tg-cell-line) var(--tg-stage); }
.tg-matrix { --tg-label-w: 3.4rem; --tg-min: 26px; --tg-max: 32px; display: grid; margin-inline: auto; gap: 3px; color: var(--tg-label);
  width: 100%; min-width: calc(var(--tg-label-w) + var(--tg-steps) * (var(--tg-min) + 3px)); max-width: calc(var(--tg-label-w) + var(--tg-steps) * (var(--tg-max) + 3px)); }
.tg-matrix-drum { --tg-label-w: 6.5rem; }
.tg-row { display: grid; grid-template-columns: var(--tg-label-w) repeat(var(--tg-steps), minmax(0, 1fr)); gap: 3px; align-items: center; }
.tg-rowlabel { font-size: .75rem; font-weight: 700; color: var(--tg-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: .35rem; text-align: end; }
.tg-cell { width: 100%; aspect-ratio: 1; min-width: 24px; min-height: 24px; border: 1.5px solid var(--tg-cell-line); border-radius: 6px; background: var(--tg-cell); padding: 0; }
.tg-cell.is-beat { border-color: #9a96c4; }
.tg-cell:hover { background: var(--tg-stage-2); border-color: #c9c5f2; }
.tg-cell.is-on { background: var(--tg-cell-on); border-color: #ece8ff; }
.tg-matrix-drum .tg-cell.is-on { background: var(--tg-drum-on); border-color: #d7fff9; }
.tg-cell:focus-visible { outline: 3px solid var(--tg-cell-focus); outline-offset: 1px; position: relative; z-index: 1; }
.tg-ruler { height: 18px; }
.tg-tick { font-size: .7rem; font-weight: 700; text-align: center; color: #a9a6cf; position: relative; height: 18px; line-height: 14px; }
.tg-tick.is-now::after { content: ""; position: absolute; inset-inline: 30%; bottom: 0; height: 4px; border-radius: 2px; background: var(--tg-cell-focus); }
[data-playhead="column"] .tg-cell.is-now { background: var(--tg-now); border-color: #e8e5ff; }
[data-playhead="column"] .tg-cell.is-now.is-on { background: #ffffff; border-color: #ffffff; }
[data-playhead="off"] .tg-tick.is-now::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-playhead="column"] .tg-cell.is-on.is-now { box-shadow: 0 0 10px 2px rgb(185 173 255 / .65); }
  .tg-cell { transition: background-color .08s linear; }
}
@media (forced-colors: active) {
  .tg-cell { border: 1px solid ButtonText; background: Canvas; }
  .tg-cell.is-on { background: Highlight; }
  .tg-tick.is-now::after { background: Highlight; }
}

/* ---------- sidebar */
.tg-side-section { background: var(--tg-surface); border: 1px solid var(--tg-line); border-radius: 14px; padding: .8rem .9rem; min-width: 0; }
.tg-side-section h2 { margin: 0 0 .5rem; font-size: 1rem; }
.tg-field { display: grid; gap: .2rem; margin: 0 0 .6rem; min-width: 0; }
.tg-field label, .tg-slider-head label { font-weight: 600; font-size: .85rem; }
.tg-field :is(select, input[type=number], input[type=text]) { min-height: 34px; padding: .2rem .5rem; min-width: 0; width: 100%; box-sizing: border-box; }
.tg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .6rem; }
.tg-keyscale { grid-template-columns: minmax(5.5rem, 2fr) minmax(0, 3fr); }
.tg-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.tg-out { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tg-accent-ink); font-size: .88rem; }
.tg-slider input[type=range] { width: 100%; min-height: 24px; accent-color: var(--tg-accent); border: 0; background: none; }
.tg-tempo-row { display: flex; align-items: end; gap: .5rem; }
.tg-tempo-row .tg-field { flex: 1; margin: 0; }
.tg-tempo { margin-bottom: .6rem; }
.tg-check { display: flex; align-items: flex-start; gap: .5rem; margin: .2rem 0 .7rem; font-size: .9rem; }
.tg-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tg-accent); }
.tg-song { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.tg-part { display: grid; grid-template-columns: 1.4rem minmax(3.6rem, 1fr) auto minmax(3.4rem, 1fr) repeat(3, 34px); align-items: center; gap: .25rem; padding: .25rem; border-radius: 9px; border: 1px solid transparent; }
.tg-part.is-playing { border-color: var(--tg-teal); background: var(--tg-surface-2); }
.tg-part-n { font-weight: 800; color: var(--tg-muted); text-align: center; font-size: .85rem; }
.tg-part select, .tg-part input { min-height: 32px; padding: .1rem .35rem; min-width: 0; width: 100%; box-sizing: border-box; }
.tg-times { color: var(--tg-muted); }

/* ---------- status bar */
.tg-statusbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .35rem .9rem; border-top: 1px solid var(--tg-line); background: var(--tg-surface); font-size: .82rem; color: var(--tg-muted); }
.tg-live { color: var(--tg-ink); font-weight: 600; }
.tg-info { font-variant-numeric: tabular-nums; }

/* ---------- dialogs */
.tg-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--tg-control); border-radius: 14px; background: var(--tg-surface); color: var(--tg-ink); box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.tg-dialog-wide { width: min(46rem, calc(100vw - 2rem)); }
.tg-dialog::backdrop { background: rgb(12 10 30 / .55); }
.tg-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem .4rem; }
.tg-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.tg-dialog-lede { margin: 0; padding: 0 1rem; color: var(--tg-muted); font-size: .9rem; }
.tg-dialog-body { padding: .6rem 1rem 1rem; }
.tg-dialog-body > label { display: block; font-weight: 600; font-size: .85rem; margin: .3rem 0 .2rem; }
.tg-dialog-body :is(input[type=text], textarea) { padding: .4rem .55rem; }
.tg-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.tg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.tg-card { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .8rem; border: 1px solid var(--tg-line); border-radius: 12px; background: var(--tg-surface); }
.tg-card h3 { margin: 0; font-size: .98rem; }
.tg-card p { margin: 0 0 .3rem; font-size: .87rem; color: var(--tg-muted); flex: 1; }
.tg-card .tg-btn { align-self: flex-start; }
.tg-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tg-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--tg-line); border-radius: 10px; }
.tg-recent-text { flex: 1 1 14rem; display: grid; gap: .1rem; min-width: 0; }
.tg-recent-text .tg-hint { margin: 0; }
.tg-badge { justify-self: start; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--tg-surface-2); color: var(--tg-accent-ink); }
.tg-tablewrap { max-height: 50vh; overflow: auto; border: 1px solid var(--tg-line); border-radius: 8px; margin-bottom: .6rem; }
.tg-result { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- responsive */
@media (max-width: 1000px) {
  .tg-body { grid-template-columns: minmax(0, 1fr); }
  .tg-side { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
}
@media (max-width: 640px) {
  .tg-toolbar { gap: .4rem .5rem; padding: .4rem .5rem; }
  .tg-namewrap { flex-basis: 100%; }
  .tg-name { max-width: none; }
  .tg-body { padding: .6rem; gap: .7rem; }
  .tg-panel { padding: .55rem; }
  .tg-side { grid-template-columns: minmax(0, 1fr); }
  .tg-matrix { --tg-label-w: 2.8rem; --tg-min: 24px; }
  .tg-matrix-drum { --tg-label-w: 5.2rem; }
  .tg-statusbar { padding: .3rem .6rem; }
}
.tg-grid { position: relative; }