:root { --bg: #0f111a; --panel: #181b24; --text: #e0e4f0; --accent: #6b9cff; --muted: #8a94b8; --gap: 12px; /* PM_CHORD_ATOM_POC_BASELINE: variables required for POC chord atom layout */ --chord-gap-outside: 0.33em; --chord-gap-inside: 0.08em; --chord-nudge-y: 0px; /* --- SKY OVERLAY (tune ONLY these two) --- */ /* Keep these tiny. If you “notice it instantly”, they’re too high. */ --sky-haze-a: 0.018; /* light pollution strength */ --sky-star-a: 0.032; /* star strength */ } * { box-sizing: border-box; } /* Base color stays authoritative. Overlays never replace this. */ body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; position: relative; /* stacking context for overlays */ } /* Ensure app content always sits above background overlays. */ .app { max-width: 980px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; } /* ========================================================= SUBTLE NIGHT SKY (Disabled by default) Enable by adding: ========================================================= */ /* Light pollution haze (very faint, slow drift + micro “breathing”) */ body.bg-sky-enabled::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; /* Keep the base color intact: this layer only *adds* ultra-faint light. */ opacity: var(--sky-haze-a); background: radial-gradient(900px 420px at 70% 88%, rgba(140, 170, 255, 0.12), rgba(0,0,0,0) 62%), radial-gradient(780px 360px at 28% 92%, rgba(255, 180, 140, 0.10), rgba(0,0,0,0) 60%), radial-gradient(1200px 520px at 50% 110%, rgba(180, 190, 255, 0.06), rgba(0,0,0,0) 70%); transform: translate3d(0,0,0); animation: sky-drift-haze 540s linear infinite, sky-breathe 260s ease-in-out infinite; } /* Stars (tiny points; slow drift at a different speed for subconscious parallax) */ body.bg-sky-enabled::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--sky-star-a); background-image: radial-gradient(circle at 12px 18px, rgba(255,255,255,0.95) 0.7px, rgba(0,0,0,0) 0.9px), radial-gradient(circle at 44px 62px, rgba(255,255,255,0.70) 0.6px, rgba(0,0,0,0) 0.9px), radial-gradient(circle at 88px 24px, rgba(255,255,255,0.55) 0.6px, rgba(0,0,0,0) 0.9px), radial-gradient(circle at 120px 92px, rgba(255,255,255,0.85) 0.7px, rgba(0,0,0,0) 1.0px); background-size: 160px 140px, 220px 190px, 300px 260px, 420px 360px; background-repeat: repeat; transform: translate3d(0,0,0); animation: sky-drift-stars 760s linear infinite; } @keyframes sky-drift-haze { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -140px, 0); } } @keyframes sky-drift-stars { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -220px, 0); } } /* “Breathing” without new knobs: tiny additive lift to haze opacity. */ @keyframes sky-breathe { 0%, 100% { opacity: var(--sky-haze-a); } 50% { opacity: calc(var(--sky-haze-a) + 0.004); } } /* Respect reduced motion: keep the same look, stop the motion. */ @media (prefers-reduced-motion: reduce) { body.bg-sky-enabled::before, body.bg-sky-enabled::after { animation: none !important; } } /* ===== SKY DEBUG (verification only) ===== Add class: Makes the existing haze + stars obvious for quick inspection. */ body.bg-sky-enabled.bg-sky-debug::before { opacity: 0.20 !important; } body.bg-sky-enabled.bg-sky-debug::after { opacity: 0.35 !important; } body.bg-sky-enabled.bg-sky-debug::before, body.bg-sky-enabled.bg-sky-debug::after { animation-duration: 40s !important; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .topbar h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.2px; } .slogan { color: var(--muted); font-weight: 500; } .brand{ display: flex; align-items: center; min-width: 0; } .brand-logo{ display: block; height: 34px; width: auto; max-width: 260px; object-fit: contain; } /* Accessible-only: keeps a real title in the DOM without visual cost */ .sr-only{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .btn-subtle{ background: transparent; } /* SHELF_TRANSPLANT_V3 */ .topbar{ flex-wrap: wrap; gap: 10px; } .shelf{ display:flex; align-items:center; gap:8px; width: 100%; min-width:0; padding-top: 2px; user-select:none; } .shelf-item{ white-space:nowrap; } .shelf-sep{ opacity:.6; } .key-shelf{ margin: 0 0 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(12,18,28,.62); } .key-shelf-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(214,226,247,.92); } .ext-toggle{ border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(214,226,247,.9); border-radius: 999px; padding: 2px 9px; font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor:pointer; } .ext-toggle[aria-pressed="true"]{ border-color: rgba(120,160,255,.7); background: rgba(120,160,255,.14); color: rgba(230,238,255,.96); } .key-shelf-rows{ display:grid; gap:5px; } .key-row{ display:flex; align-items:flex-start; gap:8px; } .key-row-label{ flex: 0 0 auto; min-width: 80px; opacity: .78; padding-top: 3px; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(180,198,225,.9); } .key-row-buttons{ display:flex; flex-wrap:wrap; gap:4px; min-width:0; } .key-row-btn{ border: 0; background: transparent; color: rgba(255,212,138,.96); border-radius: 2px; padding: 0 2px; min-height: 0; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor:pointer; white-space: nowrap; box-shadow: none; appearance: none; } .key-row-btn::before{ content: "["; opacity: .78; } .key-row-btn::after{ content: "]"; opacity: .78; } .key-row-btn:hover{ color: rgba(255,223,160,.98); background: rgba(120,160,255,.08); } .key-row-btn:active{ background: rgba(120,160,255,.14); } .key-row-btn:focus-visible{ outline: 1px solid rgba(120,160,255,.45); outline-offset: 1px; } /* MOBILE_SHELF_DISCRETE_TOGGLE */ #harmonicsToggleBtn{ display:none; } @media (max-width: 720px){ #harmonicsToggleBtn{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border:1px solid rgba(255,255,255,0.16); border-radius:8px; background:transparent; color:var(--muted); font-weight:600; font-size:12px; line-height:1.2; } #harmonicsToggleBtn[aria-pressed="true"]{ color:var(--text); border-color:rgba(93,166,255,.6); } #shelf, #keyShelf, #masterShelf{ display:none !important; } body.show-harmonics #shelf, body.show-harmonics #keyShelf, body.show-harmonics #masterShelf{ display:block !important; } body.show-harmonics #keyShelf, body.show-harmonics #masterShelf{ margin-top:6px; } /* Mobile key shelf contract: keep each row as one grouped unit (label above buttons). */ .key-row{ flex-direction: column; align-items: stretch; gap: 4px; } .key-row-label{ min-width: 0; padding-top: 0; font-size: 10px; line-height: 1.15; opacity: .75; } .key-row-buttons{ width: 100%; gap: 4px; } } /* MS_POC_BEGIN */ #masterShelf.ms-root{ margin: 0 0 10px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(12,18,28,.62); } #masterShelf .ms-head{ display:flex; align-items: baseline; justify-content: space-between; gap:10px; margin-bottom:8px; } #masterShelf .ms-title{ font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(214,226,247,.95); } #masterShelf .ms-sub{ font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(180,198,225,.86); } #masterShelf .ms-grid{ display:grid; gap:8px; grid-template-columns: 1fr; } #masterShelf .ms-card{ border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.03); padding: 7px 8px; } #masterShelf .ms-k{ font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(180,198,225,.9); } #masterShelf .ms-v{ margin-top: 3px; font: 600 12px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(235,243,255,.95); } #masterShelf .ms-block{ border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.03); padding: 8px; } #masterShelf .ms-block-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 7px; } #masterShelf .ms-block-title{ font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(214,226,247,.95); } #masterShelf .ms-kv{ display:grid; grid-template-columns: auto 1fr; gap: 4px 8px; } #masterShelf .ms-chiprow{ display:flex; flex-wrap:wrap; gap:6px; } #masterShelf .ms-chip{ display:inline-flex; align-items:center; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 2px 8px; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(235,243,255,.92); background: rgba(255,255,255,.04); } #masterShelf .ms-chip.ms-muted{ opacity: .62; } #masterShelf .ms-chip.ms-warn{ border-color: rgba(241,196,15,.7); background: rgba(241,196,15,.12); } #masterShelf .ms-chords{ display:grid; gap: 6px; } #masterShelf .ms-chord{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 7px; background: rgba(0,0,0,.14); } #masterShelf .ms-chord-label{ font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255,212,138,.95); white-space: nowrap; } #masterShelf .ms-chord-seeds{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; } #masterShelf .ms-seed{ border: 1px solid rgba(120,160,255,.5); border-radius: 999px; padding: 1px 7px; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(220,234,255,.95); background: rgba(120,160,255,.12); } /* MS_POC_END */ #chordSymbolInput, #chordNotesInput { width: 140px; max-width: 140px; background: var(--panel); color: var(--text); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; font-size: 13px; } button { background: var(--panel); color: var(--text); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer; } button:hover { border-color: rgba(107,156,255,0.55); } /* POC_TRASH_CSS_IMPORTED */ @keyframes trashWiggle { 0% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-6deg) translateY(-1px); } 40% { transform: rotate(6deg) translateY(0); } 60% { transform: rotate(-4deg) translateY(-1px); } 80% { transform: rotate(4deg) translateY(0); } 100% { transform: rotate(0deg) translateY(0); } } button.trash-armed{ border-color: rgba(241,196,15,.85); box-shadow: 0 0 0 2px rgba(241,196,15,.18) inset; } button.primary{ position:relative; display:grid; place-items:center; } button.primary .btnLabel, button.primary .trashIcon{ grid-area: 1 / 1; } button.primary .trashIcon{ opacity:0; pointer-events:none; } button.primary.trash-armed .btnLabel{ opacity:0; } button.primary.trash-armed .trashIcon{ opacity:1; animation: trashWiggle .42s ease-in-out infinite; } button.trash-hover{ border-color: rgba(241,196,15,1); box-shadow: 0 0 0 3px rgba(241,196,15,.25) inset; } /* Columns leg-window pager: hidden by default, enabled by JS only when needed */ #prevLegWindowBtn, #nextLegWindowBtn { display: none; padding: 8px 9px; min-width: 34px; text-align: center; } body.columns-preview .topbar-actions.pager-on #prevLegWindowBtn, body.columns-preview .topbar-actions.pager-on #nextLegWindowBtn { display: inline-block; } #canvas { display: flex; flex-direction: column; gap: 10px; } .section { padding: 0; } .section-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; } .grip { color: var(--muted); cursor: grab; user-select: none; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px; } .grip:hover { background: rgba(255,255,255,0.06); } .section-label { background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; outline: none; padding: 2px 4px; width: 220px; } .section-content { display: grid; grid-template-columns: 42px 1fr; gap: 10px; position: relative; overflow: hidden; } /* PM_MOUNT_UX_ADAPT: make pmMount inherit the spatial contract of .section-content (grid gutter, no inner scroll). */ .section-content.has-pm > .pmMount{ grid-column: 2; width: 100% !important; min-width: 0; min-height: 1lh; display: block; position: relative !important; overflow: hidden; } .section-content.has-pm > textarea.editor{ display: none !important; } /* PM_NO_LINENUMS: pmMount must not inherit the 42px gutter from the legacy line-numbers grid. */ .section-content.has-pm{ grid-template-columns: 1fr; gap: 0; } .section-content.has-pm > .line-numbers{ display: none !important; } .section-content.has-pm > .pmMount{ grid-column: 1 / -1; } .line-numbers { color: rgba(138,148,184,0.8); font: 14px/22px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding-top: 10px; text-align: right; white-space: pre; user-select: none; opacity: 0.9; } .editor { width: 100%; min-height: 120px; resize: vertical; background: transparent; border: 0; outline: none; color: var(--text); font: 16px/22px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding: 10px 10px 10px 0; white-space: pre; } /* PM_MOUNT_EDITOR_TYPOGRAPHY: pmMount adopts the same text-density/wrap policies as .editor. */ .section-content.has-pm .pmMount .ProseMirror{ width: 100%; min-height: max(1lh, 120px); background: transparent; border: 0; outline: none; color: var(--text); font: 16px/22px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding: 10px 10px 10px 0; /* Match POC baseline: stable typing + natural wrapping */ white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* PM_P_MARGIN_RESET: kill browser-default paragraph margins that read like “double spacing”. */ .section-content.has-pm .pmMount .ProseMirror-selectednode{ outline: 2px solid rgba(93,166,255,.55); border-radius: 8px; } /* PM_POC_DROPcursor_CSS */ .section-content.has-pm .pmMount .ProseMirror-dropcursor{ border-left: 2px solid var(--accent); margin-left: -1px; pointer-events:none; } .section-content.has-pm .pmMount .ProseMirror p{ margin: 0 0 6px 0; } .section-content.has-pm .pmMount .ProseMirror p:last-child{ margin-bottom: 0; } /* DESKTOP_EDITOR_EDGE_INSET */ @media (min-width: 721px){ .section-content > .editor{ padding-left: 6px; padding-right: 6px; } .section-content.has-pm > .pmMount{ padding-left: 6px; padding-right: 6px; } .section-content.has-pm .pmMount .ProseMirror{ padding-left: 6px; padding-right: 6px; } } .section-footer { margin-top: 6px; } .section-footer button { background: transparent; border: 0; color: rgba(138,148,184,0.85); padding: 4px 0; font-size: 12px; text-align: left; } .section-footer button:hover { color: var(--text); } #status { margin-top: 14px; color: rgba(138,148,184,0.9); font-size: 12px; } #status.status-receipt { cursor: pointer; } #status.status-receipt:hover { text-decoration: underline; text-underline-offset: 2px; } /* --- Drag feedback (add at bottom) --- */ .section.dragging { opacity: 1; transform: none; } .grip:active { cursor: grabbing; } /* ===== Sections: NO SPACING SEPARATORS ===== */ .section { position: relative; padding: 0 0 10px 0; } /* IMPORTANT: do not add air between sections */ .section + .section { padding-top: 0; } /* remove any seam pseudo-element you added */ .section:not(:first-child)::before, .section + .section::before { content: none; } /* ===== Pane lips: VS Code-style separation without space ===== */ .section .section-content, .section .section-body, .section .editor-pane { border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; background: rgba(0,0,0,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.35); } /* Micro differentiation on every lip (tiny, consistent) */ .section .section-content:hover, .section .section-body:hover, .section .editor-pane:hover { border-color: rgba(93,166,255,0.22); } /* Drag feedback: brighten pane lip, not section spacing */ .section.dragging .section-content, .section.dragging .section-body, .section.dragging .editor-pane { border-color: rgba(93,166,255,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.55), 0 0 0 1px rgba(93,166,255,0.18); } /* ===== Legs (incidental) ===== */ .leg-label{ margin: 6px 0 6px; padding-left: 4px; color: rgba(138,148,184,0.85); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; user-select: none; } .leg-next-row{ margin: 6px 0 10px; padding-left: 42px; } .next-leg{ background: transparent; border: 0; padding: 4px 0; font-size: 12px; color: rgba(138,148,184,0.85); cursor: pointer; } .next-leg:hover{ color: var(--text); } /* optional: highlight lip during drag for the whole leg */ .leg.dragging-leg .section-content{ border-color: rgba(93,166,255,0.40); } /* target leg clarity during drag (column-level, low-alpha, no layout cost) */ .leg { position: relative; border-radius: 10px; } .leg.dragging-leg { background: linear-gradient( to bottom, rgba(93,166,255,0.06), rgba(93,166,255,0.03) ); } .leg.dragging-leg::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient( to bottom, rgba(93,166,255,0.0), rgba(93,166,255,0.36), rgba(93,166,255,0.0) ); pointer-events: none; } /* ===== Global drag insertion marker ===== */ .drag-marker { position: relative; height: 1px; margin: 0 42px; background: rgba(93,166,255,0.72); pointer-events: none; opacity: 0.72; transform-origin: left center; } .drag-marker::before { content: ""; position: absolute; left: -6px; top: -2px; width: 4px; height: 5px; border-radius: 2px; background: rgba(93,166,255,0.85); } /* Append-slot visual: tiny right cap only during snap-pop */ .drag-marker.append.snap::after{ content: ''; position: absolute; right: 0; top: -3px; width: 2px; height: 7px; background: rgba(93,166,255,0.85); border-radius: 1px; opacity: 0.85; } @keyframes markerSnapPop { 0% { opacity: 0.68; transform: scaleY(1); box-shadow: 0 0 0 rgba(93,166,255,0); } 45% { opacity: 1; transform: scaleY(1.6); box-shadow: 0 0 8px rgba(93,166,255,0.22); } 100% { opacity: 0.72; transform: scaleY(1); box-shadow: 0 0 0 rgba(93,166,255,0); } } .drag-marker.snap { animation: markerSnapPop 100ms ease-out 1; } /* ===== Intro / Outro (special collapsed panes) ===== */ .special { opacity: 0.72; } .special.stub{ /* Minimal vertical budget: no header row, no extra air */ padding: 0 !important; padding-bottom: 0 !important; margin: 0 !important; } /* Stub is also a .section, so kill any inherited section spacing explicitly */ .special.section.stub{ padding: 0 !important; margin: 0 !important; padding-bottom: 0 !important; } /* If there is still a seam/gap below the stub, remove it deterministically */ .special.section.stub + *{ margin-top: 0 !important; } .special .special-header{ margin: 4px 0 6px; padding-left: 4px; color: rgba(138,148,184,0.9); font-size: 12px; font-weight: 600; user-select: none; cursor: pointer; } .special.collapsed { opacity: 0.55; } .special.collapsed .section-content { overflow: hidden; } /* one-line collapsed stub */ .special.collapsed .editor { min-height: 22px; height: 22px; line-height: 22px; overflow: hidden; resize: none; } /* PM special-only collapsed contract: visible editor substrate is .pmMount/.ProseMirror. */ .special.collapsed .section-content.has-pm > .pmMount{ min-height: 22px; max-height: 22px; overflow: hidden; } .special.collapsed .section-content.has-pm .pmMount .ProseMirror{ min-height: 22px; height: 22px; line-height: 22px; padding-top: 0; padding-bottom: 0; overflow: hidden; white-space: pre; } .special.collapsed .section-content.has-pm .pmMount .ProseMirror p{ margin: 0; } .special.collapsed .line-numbers { padding-top: 0; } /* subtle "ready" cue on hover without grabbing focus */ .special:hover { opacity: 0.82; } /* ===== Special Clear button (explicit revert) ===== */ .special .special-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; } .special-clear{ background: transparent; border: 0; padding: 2px 0; font-size: 12px; color: rgba(138,148,184,0.85); cursor: pointer; } .special-clear:hover{ color: var(--text); } .special-stub{ width: 100%; min-height: 24px; padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.14); color: rgba(198,205,226,0.92); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.55); } .special-stub:hover{ border-color: rgba(93,166,255,0.22); } .special-stub:active{ transform: translateY(0.5px); } /* ===== Differentiator: one-shot lip pulse when configured ===== */ @keyframes lipPulse { 0% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.55), 0 0 0 0 rgba(93,166,255,0.0); } 35% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.55), 0 0 0 2px rgba(93,166,255,0.22); } 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.55), 0 0 0 0 rgba(93,166,255,0.0); } } .special.pulse .section-content{ animation: lipPulse 220ms ease-out 1; } /* ================= Columns Preview (CSS-only projection) ================= */ body.columns-preview { /* Hard gate: Columns preview must never mint page-level horizontal scroll. */ overflow-x: hidden; } /* In Columns preview we use the full viewport width (not the 980px app cap). */ body.columns-preview .app { max-width: none; width: 100%; } body.columns-preview .legs-strip { display: flex; gap: 12px; align-items: stretch; /* No inner horizontal scrolling; legs must compress to fit. */ overflow: hidden; padding-bottom: 10px; } body.columns-preview .leg { /* Compressible columns: allow shrink to avoid scrollbars at 3+ legs. */ flex: 1 1 0; min-width: 0; max-width: none; min-height: 100%; } body.columns-preview .leg-label { margin-top: 0; } /* Tiered density: deterministic by leg count (set by JS). */ body.columns-preview.columns-tier-2 .editor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } body.columns-preview.columns-tier-2 .section-content.has-pm .pmMount .ProseMirror{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } body.columns-preview.columns-tier-3 .editor { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } body.columns-preview.columns-tier-3 .section-content.has-pm .pmMount .ProseMirror{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } body.columns-preview.columns-tier-4plus .editor { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; letter-spacing: -0.1px; } body.columns-preview.columns-tier-4plus .section-content.has-pm .pmMount .ProseMirror{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; letter-spacing: -0.1px; } /* Columns mode: wrap ON, no inner scrollbars */ body.columns-preview .editor { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; resize: none; } body.columns-preview .section-content.has-pm .pmMount .ProseMirror{ white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; } /* Placeholder sections (empty bands for missing section positions) */ body.columns-preview .section.placeholder .section-header { visibility: hidden; height: 0; margin: 0; } body.columns-preview .section.placeholder .section-footer { display: none; } body.columns-preview .section.placeholder .section-label, body.columns-preview .section.placeholder .grip { display: none; } body.columns-preview .section.placeholder .editor { color: transparent; caret-color: transparent; } body.columns-preview .section.placeholder .line-numbers { opacity: 0.35; } /* ================= Overflow fade (only when overflow exists) ================= */ .section-content { position: relative; } .section-content.overflow-x::after { content: ''; position: absolute; top: 0; right: 0; width: 26px; height: 100%; pointer-events: none; background: linear-gradient(to left, rgba(15,17,26,0.90), rgba(15,17,26,0)); opacity: 0.75; } /* ================= Repository (fixed) ================= */ #repoBtn { position: fixed; right: 14px; bottom: 14px; z-index: 4000; } /* ================= Mobile Fullscreen Editor ================= */ .fs-edit-overlay { position: fixed; inset: 0; z-index: 5200; background: rgba(0,0,0,0.70); /* animate in/out (keep mounted so transitions work) */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease-out, visibility 0ms linear 180ms; } body.mobile-fullscreen-edit .fs-edit-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease-out; } .fs-edit-card { position: absolute; inset: 10px; border-radius: 14px; background: rgba(12, 14, 22, 0.98); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 60px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden; /* "land" animation baseline */ transform: translateY(8px) scale(0.985); opacity: 0.98; transition: transform 200ms ease-out, opacity 200ms ease-out; } body.mobile-fullscreen-edit .fs-edit-card { transform: translateY(0) scale(1); opacity: 1; } .fs-edit-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } /* POC_PMFSBAR_STYLES */ .pmFsBar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,0.10); border-radius:12px; background: rgba(21,26,38,0.98); } .pmFsBar .fs-crumb, .pmFsBar .pmFsTitle{ font-size:12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-crumb { font-size: 12px; color: rgba(230,235,255,0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .fs-edit-actions { display: flex; gap: 8px; } .fs-edit-actions #fsDoneBtn { /* slightly more "primary" without new states */ border-color: rgba(255,255,255,0.18); } /* One-shot Done-pill glow on open (sensory payoff) */ @keyframes donePulseOnce { 0% { box-shadow: 0 0 0 0 rgba(93,166,255,0.0); border-color: rgba(255,255,255,0.18); } 45% { box-shadow: 0 0 0 3px rgba(93,166,255,0.22); border-color: rgba(93,166,255,0.45); } 100% { box-shadow: 0 0 0 0 rgba(93,166,255,0.0); border-color: rgba(255,255,255,0.18); } } body.fs-open-pulse #fsDoneBtn { animation: donePulseOnce 240ms ease-out 1; } .fs-editor { flex: 1; width: 100%; border: 0; outline: none; resize: none; background: transparent; color: rgba(230,235,255,0.92); padding: 14px 12px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 16px; /* important for iOS: prevents focus zoom */ line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; } /* While fullscreen edit is active, underlying canvas should not steal taps */ body.mobile-fullscreen-edit #canvas, body.mobile-fullscreen-edit .topbar, body.mobile-fullscreen-edit #repoBtn, body.mobile-fullscreen-edit #repoPanel { pointer-events: none; } body.mobile-fullscreen-edit .fs-edit-overlay { pointer-events: auto; } /* Mobile: ensure regular editors are >=16px too (prevents Safari zoom when not fullscreen) */ @media (max-width: 720px) { .editor { font-size: 16px; line-height: 22px; } } .repo-panel { position: fixed; right: 14px; bottom: 58px; width: min(560px, calc(100vw - 28px)); max-height: min(45vh, 420px); background: rgba(18, 20, 30, 0.98); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); z-index: 4000; display: none; overflow: hidden; } .repo-panel.open { display: flex; flex-direction: column; } .repo-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .repo-title { font-size: 13px; color: rgba(230,235,255,0.92); } .repo-body { padding: 10px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.4; white-space: pre-wrap; } .repo-entry { padding: 6px 6px; border-radius: 8px; } .repo-entry + .repo-entry { margin-top: 6px; } .repo-entry .meta { font-size: 11px; color: rgba(180,190,220,0.7); margin-bottom: 4px; } .repo-entry.in-song { outline: 1px solid rgba(107,156,255,0.25); background: rgba(107,156,255,0.06); } .repo-entry .text { color: rgba(230,235,255,0.9); } /* Batch grouping (view-only): header + subtle left rail */ .repo-batch { border-left: 2px solid rgba(93,166,255,0.16); padding-left: 8px; margin-left: 2px; } .repo-batch-head { font-size: 11px; color: rgba(180,190,220,0.78); margin: 8px 0 6px; user-select: none; } .repo-batch-head .strong { color: rgba(230,235,255,0.86); } /* ================= Confirm overlay (repo-confirm) ================= */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 3800; display: none; } body.confirming-delete .confirm-overlay { display: block; } .confirm-toast { position: fixed; right: 14px; bottom: 66px; z-index: 4100; display: none; padding: 10px 12px; border-radius: 12px; background: rgba(18, 20, 30, 0.98); border: 1px solid rgba(255,255,255,0.12); color: rgba(230,235,255,0.92); max-width: min(520px, calc(100vw - 28px)); font-size: 12px; line-height: 1.35; } body.confirming-delete .confirm-toast { display: block; } body.confirming-delete #repoBtn { border-color: rgba(255, 120, 120, 0.55); box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.25) inset; animation: repoPulse 0.95s ease-in-out infinite; } @keyframes repoPulse { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } 100% { transform: translateY(0); } } /* One-shot repo glow pulse (non-immersive, brief) */ @keyframes repoGlowOnce { 0% { box-shadow: 0 0 0 0 rgba(93,166,255,0.0); } 45% { box-shadow: 0 0 0 3px rgba(93,166,255,0.22); } 100% { box-shadow: 0 0 0 0 rgba(93,166,255,0.0); } } body.repo-pulse-once #repoBtn { animation: repoGlowOnce 240ms ease-out 1; } /* Newest repository entries (batch) pulse once */ @keyframes repoEntryPop { 0% { outline-color: rgba(93,166,255,0.0); } 45% { outline-color: rgba(93,166,255,0.40); } 100% { outline-color: rgba(93,166,255,0.0); } } .repo-entry.newest-batch { outline: 1px solid rgba(93,166,255,0.0); animation: repoEntryPop 260ms ease-out 1; } /* Delete affordances (headers) */ .btn-del-section, .btn-del-leg { background: transparent; border: 1px solid rgba(255,255,255,0.14); color: rgba(230,235,255,0.75); border-radius: 10px; padding: 2px 8px; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(-1px); transition: opacity 120ms ease, transform 120ms ease; } .btn-del-section:hover, .btn-del-leg:hover { border-color: rgba(255, 120, 120, 0.55); color: rgba(255, 170, 170, 0.9); } .leg-label:hover .btn-del-leg, .leg-label:focus-within .btn-del-leg { opacity: 1; pointer-events: auto; transform: translateY(0); } .section-header:hover .btn-del-section, .section-header:focus-within .btn-del-section { opacity: 1; pointer-events: auto; transform: translateY(0); } .leg-label { display: flex; align-items: center; justify-content: space-between; } .leg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================= Mobile hardening ================= Goals: - no pinch-zoom to operate topbar - tappable controls - deterministic font policy (vars) - keep "no horizontal scroll" invariant */ /* Font policy: explicit */ :root{ --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Keep body UI consistent */ body { font-family: var(--font-ui); } /* Default editor is mono (Top-down = notation/editor mode) */ .editor { font-family: var(--font-mono); } /* Columns tiers: keep intent, reference explicit vars */ body.columns-preview.columns-tier-3 .editor, body.columns-preview.columns-tier-4plus .editor { font-family: var(--font-ui); } /* Safe-area padding for notched phones */ @supports (padding: max(0px)) { .app { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } } /* Mobile tightening */ @media (max-width: 520px) { .app { padding: 12px; } .topbar{ align-items: flex-start; gap: 10px; flex-wrap: wrap; } .topbar h1{ font-size: 16px; line-height: 1.1; margin-bottom: 4px; } .topbar-actions{ width: 100%; flex-wrap: wrap; gap: 8px; } button{ padding: 10px 10px; font-size: 13px; min-height: 44px; border-radius: 10px; } #harmonicsToggleBtn{ border-radius: 10px; } .section-content{ grid-template-columns: 34px 1fr; gap: 8px; } .editor{ font-size: 16px; line-height: 22px; padding: 10px 8px 10px 0; } .line-numbers{ font-size: clamp(12px, 3.2vw, 14px); line-height: 1.45; padding-top: 10px; } .section-header { margin: 8px 0 4px; } .leg-next-row { margin: 4px 0 8px; } .repo-panel{ width: calc(100vw - 20px); right: 10px; bottom: 56px; max-height: 50vh; } #repoBtn{ right: 10px; bottom: 10px; } } /* ===== Mobile Columns: viewport-first hard rules ===== */ @media (max-width: 720px) { /* 1) Mobile Columns should never be monospace (override tier-2 rule). */ body.columns-preview .editor { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; } /* 2) Hard horizontal budget: reduce inter-leg gap + inner padding + gutter tax. */ body.columns-preview .legs-strip { gap: 8px; padding-bottom: 8px; } body.columns-preview .section-content { grid-template-columns: 26px 1fr; gap: 6px; } body.columns-preview .editor { padding: 8px 6px 8px 0; font-size: 16px; line-height: 22px; } body.columns-preview .line-numbers { font-size: 12px; line-height: 1.35; padding-top: 8px; } } /* ===== Touch delete gating: NO persistent X's ===== */ /* On touch/coarse pointers, hide delete buttons unless explicitly armed. */ @media (pointer: coarse) { body.columns-preview .btn-del-section, body.columns-preview .btn-del-leg { opacity: 0 !important; pointer-events: none !important; } body.columns-preview.touch-armed .leg.armed .btn-del-leg, body.columns-preview.touch-armed .section.armed .btn-del-section { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0); } } /* ===== Song title row (above Intro) ===== */ .song-title { margin: 0 0 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; background: rgba(0,0,0,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.55); display: flex; align-items: center; gap: 8px; } .song-title .title-label { color: rgba(138,148,184,0.85); font-size: 12px; font-weight: 600; user-select: none; } .song-title input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: rgba(230,235,255,0.92); font-size: 14px; font-weight: 600; } /* ===== Mobile top-down: NO horizontal scrollbars ===== */ @media (max-width: 720px) { /* Page-level clamp (defensive) */ body { overflow-x: hidden; } /* In top-down (not columns-preview), wrap long lines instead of pre overflow. */ body:not(.columns-preview) .editor { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; /* kill inner scrollbars (JS will autosize height) */ resize: none; } body:not(.columns-preview) .section-content.has-pm .pmMount .ProseMirror{ white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; } /* Defensive clamp for any residual content overflow */ body:not(.columns-preview) .section-content { overflow-x: hidden; } /* Mobile: remove line-number gutter (horizontal budget is scarce) */ body .section-content { grid-template-columns: 0 1fr !important; gap: 0 !important; } body .line-numbers { display: none !important; } /* Critical: if line-numbers is display:none, editor becomes 1st grid item and would land in col 1 (0px). Force editor into the 2nd column (the real text column). */ body .section-content > .editor { grid-column: 2 / 3 !important; padding-left: 10px; /* reclaim comfort; keep right padding rules */ } body .section-content.has-pm { grid-template-columns: 1fr !important; gap: 0 !important; } body .section-content.has-pm > .pmMount { grid-column: 1 / -1 !important; padding-left: 10px; } } /* Mobile Columns preview: also remove gutter (highest wrap pressure) */ @media (max-width: 720px) { body.columns-preview .section-content { grid-template-columns: 0 1fr !important; gap: 0 !important; } body.columns-preview .line-numbers { display: none !important; } body.columns-preview .section-content > .editor { grid-column: 2 / 3 !important; } } /* ================================================= FINAL AUTHORITY: Mode toggle = fixed-size + inline LED dot (kills all earlier ::after variants by force) ================================================= */ /* Button stays same size in both modes */ #viewModeBtn{ position: relative; border-width: 1px; min-width: 158px !important; min-height: 44px !important; padding: 10px 16px !important; text-align: center; white-space: nowrap; } /* Editor mode (default): BLUE LED "on-light" vibe */ body:not(.columns-preview) #viewModeBtn{ border-color: rgba(80, 150, 255, 0.45); background: rgba(12, 22, 40, 0.35); box-shadow: 0 0 0 1px rgba(80, 150, 255, 0.12) inset, 0 0 10px rgba(80, 150, 255, 0.10); } /* Arranger mode: GREEN LED "on-light" vibe */ body.columns-preview #viewModeBtn{ border-color: rgba(90, 235, 150, 0.42); background: rgba(10, 28, 18, 0.35); box-shadow: 0 0 0 1px rgba(90, 235, 150, 0.12) inset, 0 0 10px rgba(90, 235, 150, 0.10); } /* Inline LED dot ALWAYS renders (box model forced) */ #viewModeBtn::after{ content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; margin-left: 8px !important; vertical-align: middle !important; border-radius: 999px !important; } /* Editor mode = blue LED */ body:not(.columns-preview) #viewModeBtn::after{ background: rgba(135, 205, 255, 0.70) !important; box-shadow: 0 0 8px rgba(135, 205, 255, 0.30), 0 0 0 1px rgba(135, 205, 255, 0.20) inset !important; opacity: 0.92 !important; } /* Arranger mode = green LED */ body.columns-preview #viewModeBtn::after{ background: rgba(150, 255, 200, 0.65) !important; box-shadow: 0 0 8px rgba(150, 255, 200, 0.26), 0 0 0 1px rgba(150, 255, 200, 0.18) inset !important; opacity: 0.92 !important; } @media (prefers-reduced-motion: reduce){ body:not(.columns-preview) #viewModeBtn, body.columns-preview #viewModeBtn{ transition: none !important; } } /* PM_POC_GRID_CARET_CSS */ .section-content.has-pm > .pmMount .pm-grid-caret{ position:absolute; top:0; left:0; width:2px; height:22px; background: var(--accent); pointer-events:none; opacity:0; transform: translate3d(0,0,0); z-index: 7; } .section-content.has-pm > .pmMount .pm-grid-caret.on{ opacity:1; } .editor-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 6; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .editor-overlay .line-habitat { position: absolute; white-space: nowrap; left: 0; right: 0; pointer-events: none; } .editor-overlay .interval-lane, .editor-overlay .body-lane { position: relative; line-height: 22px; white-space: pre; } .editor-overlay .interval-lane { color: rgba(159,192,255,0.75); border-bottom: 1px dashed rgba(255,255,255,0.06); pointer-events: none; } .editor-overlay .body-lane { border-bottom: 1px solid rgba(255,255,255,0.08); overflow: hidden; pointer-events: none; } .editor-overlay .render-lane { position: absolute; inset: 0; pointer-events: none; } .editor-overlay .artifact, .editor-overlay .interval, .editor-overlay .snap-ghost { position: absolute; top: 0; } .editor-overlay .interval { white-space: pre; pointer-events: none; font-size: 11px; line-height: 22px; } .editor-overlay .artifact { user-select: none; cursor: grab; pointer-events: auto; touch-action: none; white-space: pre; color: transparent; height: 22px; line-height: 22px; display: block; border-radius: 3px; } .editor-overlay .artifact.dragging { opacity: 0.35; cursor: grabbing; } .editor-overlay .artifact:hover { outline: 1px solid rgba(120,160,255,0.35); } .editor-overlay .artifact::before { content: attr(data-label); color: rgba(255,212,138,0.95); } .editor-overlay .snap-ghost { height: 100%; background: rgba(93,166,255,0.18); border: 1px solid rgba(93,166,255,0.35); border-radius: 2px; z-index: 1; } #addChordBtn.trash-valid { border-color: rgba(93,166,255,0.75); box-shadow: 0 0 0 2px rgba(93,166,255,0.22); } /* PM_CHORD_PICKER_UI: chord atoms + chord picker overlay (ported from POC, minimal) */ .chord-atom{ position: relative; display: inline-block; vertical-align: baseline; font: inherit; color: var(--chord-color, goldenrod); user-select: none; margin: 0 var(--chord-gap-outside); padding: 0; line-height: inherit; transform: translateY(var(--chord-nudge-y)); } .chord-atom.inside-word{ margin: 0 var(--chord-gap-inside); } /* PM_CHORDATOM_BASELINE_LOCK */ /* TOPROW_LETTERS_CONTRACT */ .chord-atom .top{ position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 1px; display: inline-block; width: max-content; text-align: center; font-size: 0.65em; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; /* TOPROW_SINGLELINE_CONTRACT */ opacity: 0.95; pointer-events: none; } .chord-atom .bot{ display: inline-block; width: max-content; text-align: center; white-space: nowrap; line-height: inherit; vertical-align: baseline; } .ProseMirror .chord-atom{ vertical-align: baseline; } /* POC_PICKER_CSS_IMPORTED */ .chordPickerOverlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 14px; z-index: 9999; } .chordPicker{ width: min(860px, 100%); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: rgba(21,26,38,0.98); box-shadow: 0 12px 40px rgba(0,0,0,0.55); overflow: hidden; } .chordPickerTop{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); } .chordPickerTitle{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: var(--muted); } .chordPickerBody{ display:grid; grid-template-columns: 160px 1fr; gap:12px; padding:12px; } .cpCol{ border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:10px; background: rgba(0,0,0,0.12); } .cpColTitle{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:11px; color:var(--muted); margin-bottom:8px; } .cpGrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; } .cpBtn{ border:1px solid rgba(255,255,255,0.10); background: transparent; color: var(--text); border-radius:10px; padding:8px 10px; font-weight:700; cursor:pointer; user-select:none; } .cpBtn:hover{ border-color: rgba(255,255,255,0.22); } .cpBtn.sel{ border-color: rgba(241,196,15,.85); box-shadow: 0 0 0 2px rgba(241,196,15,.18) inset; } .cpQuals{ display:flex; flex-wrap:wrap; gap:8px; } .cpQuals .cpBtn{ padding:7px 9px; font-weight:700; } .cpRow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; } .cpField{ flex:1 1 220px; background: rgba(0,0,0,.18); color: var(--text); border:1px solid rgba(255,255,255,0.10); border-radius:10px; padding:8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; outline:none; } .cpField.bad{ border-color: rgba(255,93,122,.85); box-shadow: 0 0 0 2px rgba(255,93,122,.18) inset; } .cpNoteHint{ margin-top: 4px; font-size: 11px; line-height: 1.25; color: #ffffff; opacity: .9; } .cpField.wobble{ animation: cpFieldWobble 180ms ease; } @keyframes cpFieldWobble{ 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .cpPreview{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: var(--chord-color, goldenrod); font-size: 14px; padding:8px 10px; border:1px dashed rgba(241,196,15,.5); border-radius:10px; background: rgba(0,0,0,.18); margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cpActions{ display:flex; gap:8px; justify-content:flex-end; } .cpActions button{ padding:8px 12px; } .cpAdvToggleRow{ display:flex; justify-content:flex-end; margin-top:8px; } .hint{ font-size: 12px; color: var(--muted); } .kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; padding: 1px 6px; border: 1px solid rgba(255,255,255,0.10); border-radius: 7px; background: rgba(0,0,0,0.18); } @media (max-width: 720px){ /* CP_MOBILE_SHEET: deterministic mobile height cap */ .chordPickerOverlay{ align-items: flex-end; justify-content: center; padding: 8px; } .chordPicker.cp--mobile{ width: 100%; border-radius: 14px 14px 0 0; max-height: var(--cpMaxH, 55vh); display:flex; flex-direction:column; } .chordPicker.cp--mobile .chordPickerTop{ flex:0 0 auto; } .chordPicker.cp--mobile .chordPickerBody{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:10px; padding:10px; overflow:hidden; } .chordPicker.cp--mobile .cpGrid{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .chordPicker.cp--mobile .cpBtn{ flex:0 0 auto; } .chordPicker.cp--mobile .cpQuals{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .chordPicker.cp--mobile .cpAdvanced{ display:none; } .chordPicker.cp--mobile.cp--adv .cpAdvanced{ display:block; } .chordPicker.cp--mobile.cp--adv .chordPickerBody{ overflow-y:auto; -webkit-overflow-scrolling:touch; } .chordPicker.cp--mobile .cpActions{ position:sticky; bottom:0; background: rgba(21,26,38,0.98); padding-top:8px; margin-top:2px; } .chordPickerBody{ grid-template-columns:1fr; } }