/* ============================================================
   ChordPro Formatter — style.css v1.3.0
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
.cpf-wrap {
	--cpf-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cpf-mono:        'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--cpf-bg:          #ffffff;
	--cpf-surface:     #f8f9fa;
	--cpf-border:      #dee2e6;
	--cpf-border-focus:#4a90d9;

	--cpf-text:        #212529;
	--cpf-text-muted:  #6c757d;
	--cpf-label:       #495057;

	--cpf-accent:      #2563eb;
	--cpf-accent-hover:#1d4ed8;

	--cpf-tab-active-bg:   #ffffff;
	--cpf-tab-inactive-bg: #f1f3f5;
	--cpf-tab-border:      #dee2e6;

	--cpf-success:     #16a34a;
	--cpf-error:       #dc2626;

	--cpf-radius:      8px;
	--cpf-radius-sm:   5px;
	--cpf-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
	--cpf-shadow-focus:0 0 0 3px rgba(37,99,235,.25);

	--cpf-textarea-min-height: 320px;
}

/* ---- Reset ------------------------------------------------- */
.cpf-wrap *,
.cpf-wrap *::before,
.cpf-wrap *::after { box-sizing: border-box; }

/* ---- Outer wrapper ----------------------------------------- */
.cpf-wrap {
	font-family: var(--cpf-font);
	color:       var(--cpf-text);
	background:  var(--cpf-bg);
	max-width:   1100px;
	margin:      0 auto;
	padding:     28px 24px 32px;
}

.cpf-wrap[data-context="admin"] { padding-top: 32px; }

/* ---- Page header (frontend only) -------------------------- */
.cpf-header { margin-bottom: 20px; }

.cpf-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; color: var(--cpf-text); }

.cpf-subtitle { margin: 0; color: var(--cpf-text-muted); font-size: 0.95rem; }

/* ---- Tab navigation --------------------------------------- */
.cpf-tabs {
	display:        flex;
	border-bottom:  2px solid var(--cpf-tab-border);
	margin-bottom:  20px;
	overflow-x:     auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cpf-tabs::-webkit-scrollbar { display: none; }

.cpf-tab {
	font-family:    var(--cpf-font);
	font-size:      0.88rem;
	font-weight:    600;
	color:          var(--cpf-text-muted);
	background:     var(--cpf-tab-inactive-bg);
	border:         1px solid var(--cpf-tab-border);
	border-bottom:  none;
	border-radius:  var(--cpf-radius-sm) var(--cpf-radius-sm) 0 0;
	padding:        9px 18px;
	cursor:         pointer;
	margin-bottom:  -2px;
	white-space:    nowrap;
	flex-shrink:    0;
	transition:     color .15s, background .15s;
}

.cpf-tab + .cpf-tab { margin-left: 3px; }
.cpf-tab:hover      { color: var(--cpf-text); background: #e9ecef; }

.cpf-tab--active {
	color:          var(--cpf-accent);
	background:     var(--cpf-tab-active-bg);
	border-color:   var(--cpf-tab-border);
	border-bottom:  2px solid var(--cpf-tab-active-bg);
	z-index:        1;
}

.cpf-tab-panel--hidden { display: none; }

/* ---- Song metadata row ------------------------------------ */
.cpf-meta-row {
	display:       flex;
	flex-wrap:     wrap;
	gap:           12px;
	margin-bottom: 16px;
}

.cpf-meta-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; }
.cpf-meta-field--narrow { flex: 0 1 120px; }

.cpf-meta-field label { font-size: .82rem; font-weight: 600; color: var(--cpf-label); line-height: 1; }

.cpf-optional { font-weight: 400; color: var(--cpf-text-muted); }

.cpf-meta-field input[type="text"] {
	font-family:   var(--cpf-font);
	font-size:     .9rem;
	color:         var(--cpf-text);
	background:    var(--cpf-surface);
	border:        1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-sm);
	padding:       8px 10px;
	width:         100%;
	outline:       none;
	transition:    border-color .15s, box-shadow .15s;
}

.cpf-meta-field input[type="text"]:focus {
	border-color: var(--cpf-border-focus);
	box-shadow:   var(--cpf-shadow-focus);
	background:   #fff;
}

/* ---- Two-panel editor ------------------------------------- */
.cpf-editor {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	border:                1px solid var(--cpf-border);
	border-radius:         var(--cpf-radius);
	overflow:              hidden;
	box-shadow:            var(--cpf-shadow);
}

/* ---- Panel ------------------------------------------------ */
.cpf-panel { display: flex; flex-direction: column; min-width: 0; }

.cpf-panel-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         8px 12px;
	background:      var(--cpf-surface);
	border-bottom:   1px solid var(--cpf-border);
	gap:             8px;
	flex-wrap:       wrap;
}

.cpf-panel--output .cpf-panel-header { border-left: 1px solid var(--cpf-border); }

.cpf-panel-label {
	font-size:      .78rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--cpf-text-muted);
	white-space:    nowrap;
}

/* ---- Output mode buttons ---------------------------------- */
.cpf-modes { display: flex; gap: 3px; flex-wrap: wrap; }

.cpf-mode-btn {
	font-family:   var(--cpf-font);
	font-size:     .75rem;
	font-weight:   600;
	padding:       3px 10px;
	border:        1px solid var(--cpf-border);
	border-radius: 20px;
	cursor:        pointer;
	background:    transparent;
	color:         var(--cpf-text-muted);
	white-space:   nowrap;
	transition:    background .12s, border-color .12s, color .12s;
}

.cpf-mode-btn:hover { background: #e9ecef; color: var(--cpf-text); border-color: #adb5bd; }

.cpf-mode-btn--active {
	background:   var(--cpf-accent);
	border-color: var(--cpf-accent);
	color:        #fff;
}

.cpf-mode-btn--active:hover { background: var(--cpf-accent-hover); border-color: var(--cpf-accent-hover); color: #fff; }

/* ---- Mode-specific control bars (Transpose / Nashville) --- */
.cpf-mode-bar {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           8px;
	padding:       8px 12px;
	background:    #f0f4ff;
	border-left:   1px solid var(--cpf-border);
	border-bottom: 1px solid var(--cpf-border);
}

.cpf-toolbar-label { font-size: .84rem; font-weight: 600; color: var(--cpf-label); white-space: nowrap; }

.cpf-toolbar-hint  { font-size: .78rem; color: var(--cpf-text-muted); font-style: italic; }

/* Semitone buttons */
.cpf-semitone-btn {
	font-family:     var(--cpf-font);
	font-size:       1.1rem;
	font-weight:     700;
	line-height:     1;
	width:           32px;
	height:          32px;
	border:          1px solid var(--cpf-border);
	border-radius:   var(--cpf-radius-sm);
	background:      white;
	color:           var(--cpf-text);
	cursor:          pointer;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	transition:      background .1s;
	flex-shrink:     0;
}

.cpf-semitone-btn:hover  { background: var(--cpf-border); }
.cpf-semitone-btn:active { transform: scale(.92); }

.cpf-semitone-display {
	font-size:     .88rem;
	font-weight:   700;
	min-width:     105px;
	text-align:    center;
	padding:       5px 10px;
	border:        1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-sm);
	background:    white;
}

.cpf-semitone-zero { color: var(--cpf-text-muted); }
.cpf-semitone-pos  { color: var(--cpf-success); }
.cpf-semitone-neg  { color: var(--cpf-error); }

.cpf-key-info {
	font-size:     .85rem;
	font-weight:   700;
	color:         var(--cpf-accent);
	padding:       4px 10px;
	background:    rgba(37,99,235,.1);
	border-radius: var(--cpf-radius-sm);
}

/* Nashville key selector */
.cpf-key-select {
	font-family:   var(--cpf-font);
	font-size:     .88rem;
	color:         var(--cpf-text);
	background:    white;
	border:        1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-sm);
	padding:       5px 10px;
	cursor:        pointer;
	outline:       none;
	transition:    border-color .15s, box-shadow .15s;
}

.cpf-key-select:focus { border-color: var(--cpf-border-focus); box-shadow: var(--cpf-shadow-focus); }

/* ---- Textarea --------------------------------------------- */
.cpf-textarea {
	font-family:  var(--cpf-mono);
	font-size:    .88rem;
	line-height:  1.65;
	color:        var(--cpf-text);
	background:   var(--cpf-bg);
	border:       none;
	outline:      none;
	resize:       vertical;
	width:        100%;
	min-height:   var(--cpf-textarea-min-height);
	padding:      14px 16px;
	flex:         1;
	tab-size:     4;
}

.cpf-panel--output .cpf-textarea {
	border-left: 1px solid var(--cpf-border);
	background:  #fafbfc;
	color:       #1e3a5f;
}

.cpf-textarea:focus           { outline: none; }
.cpf-textarea[readonly]:focus { box-shadow: none; }

/* WP admin overrides */
.cpf-wrap .cpf-textarea      { box-shadow: none !important; line-height: 1.65 !important; }
.cpf-wrap input[type="text"] { box-shadow: none !important; }

/* ---- Buttons ---------------------------------------------- */
.cpf-btn {
	font-family:   var(--cpf-font);
	font-size:     .82rem;
	font-weight:   500;
	padding:       5px 12px;
	border:        1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-sm);
	cursor:        pointer;
	background:    transparent;
	color:         var(--cpf-label);
	white-space:   nowrap;
	transition:    background .15s, border-color .15s, color .15s;
	display:       inline-block;
	text-align:    center;
}

.cpf-btn:hover { background: var(--cpf-surface); border-color: #adb5bd; color: var(--cpf-text); }

.cpf-btn--ghost       { border-color: transparent; }
.cpf-btn--ghost:hover { border-color: var(--cpf-border); }

.cpf-btn--success { background: var(--cpf-success) !important; border-color: var(--cpf-success) !important; color: #fff !important; }
.cpf-btn--error   { background: var(--cpf-error)   !important; border-color: var(--cpf-error)   !important; color: #fff !important; }

.cpf-output-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- File upload label-button ----------------------------- */
.cpf-upload-label { cursor: pointer; line-height: 1.4; }

.cpf-upload-label:focus-within { outline: 2px solid var(--cpf-accent); outline-offset: 2px; }

.cpf-file-input {
	position: absolute; width: 1px; height: 1px;
	opacity: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---- Help section ----------------------------------------- */
.cpf-help { margin-top: 16px; border: 1px solid var(--cpf-border); border-radius: var(--cpf-radius); overflow: hidden; }

.cpf-help-toggle {
	display:      flex;
	align-items:  center;
	gap:          6px;
	padding:      10px 16px;
	background:   var(--cpf-surface);
	font-size:    .85rem;
	font-weight:  600;
	color:        var(--cpf-label);
	cursor:       pointer;
	user-select:  none;
	list-style:   none;
}

.cpf-help-toggle::-webkit-details-marker { display: none; }

.cpf-help-toggle::before { content: '›'; font-size: 1.1rem; transition: transform .2s; display: inline-block; }

.cpf-help[open] .cpf-help-toggle::before { transform: rotate(90deg); }

.cpf-help-body { padding: 16px 20px; border-top: 1px solid var(--cpf-border); }

.cpf-help-body p { font-size: .88rem; color: var(--cpf-text-muted); margin: 0 0 12px; line-height: 1.6; }
.cpf-help-body p:last-child { margin-bottom: 0; }

.cpf-help-list {
	font-size:   .88rem;
	color:       var(--cpf-text-muted);
	margin:      0 0 14px;
	padding-left: 20px;
	line-height: 1.7;
}

.cpf-help-list li { margin-bottom: 2px; }

.cpf-help-example { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

.cpf-help-col { flex: 1 1 200px; }

.cpf-help-col strong {
	display:        block;
	font-size:      .78rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--cpf-text-muted);
	margin-bottom:  6px;
}

.cpf-help-col pre {
	font-family:   var(--cpf-mono);
	font-size:     .83rem;
	background:    var(--cpf-surface);
	border:        1px solid var(--cpf-border);
	border-radius: var(--cpf-radius-sm);
	padding:       10px 12px;
	margin:        0;
	white-space:   pre;
	overflow-x:    auto;
	line-height:   1.65;
	color:         var(--cpf-text);
}

.cpf-help-arrow { font-size: 1.4rem; color: var(--cpf-text-muted); align-self: center; flex-shrink: 0; }

.cpf-help-section-heading {
	font-size:     .82rem;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color:         var(--cpf-label);
	margin:        18px 0 8px !important;
}

.cpf-help-features {
	display:        grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:            10px;
	margin-bottom:  16px;
}

.cpf-help-feature {
	background:    var(--cpf-surface);
	border:        1px solid var(--cpf-border);
	border-radius: var(--cpf-radius);
	padding:       12px 14px;
}

.cpf-help-feature-title {
	font-size:    .85rem;
	font-weight:  700;
	color:        var(--cpf-text);
	margin-bottom: 6px;
}

.cpf-help-feature p {
	margin: 0 0 8px !important;
}

.cpf-help-feature p:last-child { margin-bottom: 0 !important; }

.cpf-help-feature .cpf-help-list { margin: 0; }

.cpf-help-tags {
	display:     flex;
	flex-wrap:   wrap;
	gap:         4px;
	margin:      4px 0 8px !important;
}

.cpf-help-tags span {
	display:       inline-block;
	font-size:     .77rem;
	font-weight:   600;
	color:         var(--cpf-accent);
	background:    color-mix(in srgb, var(--cpf-accent) 10%, transparent);
	border:        1px solid color-mix(in srgb, var(--cpf-accent) 25%, transparent);
	border-radius: 4px;
	padding:       1px 7px;
	line-height:   1.8;
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 700px) {
	.cpf-wrap   { padding: 16px 14px 24px; }
	.cpf-editor { grid-template-columns: 1fr; }

	.cpf-panel--output .cpf-panel-header { border-left: none; border-top: 1px solid var(--cpf-border); }
	.cpf-panel--output .cpf-textarea     { border-left: none; border-top: 1px solid var(--cpf-border); }
	.cpf-mode-bar                        { border-left: none; }

	.cpf-meta-field--narrow { flex: 1 1 100px; }
	.cpf-help-arrow         { transform: rotate(90deg); }
	.cpf-semitone-display   { min-width: 90px; }
}