/*
 * Pitch Name Converter (/tools/pitch-names/). Loaded after site.css and scales.css (scales.css only for the keyboard
 * picture's .pk-* styles). Uses the site's tokens and components only; no new decoration, no animation.
 * Mobile first, in source order: pick a key, the result (names, Play, Use as my Sa), type a name, the table.
 * From 960 px: pick and type on the left, the result on the right, the table across both.
 * The picked key is shown by colour AND a dot (keyboard picture), "your key" text (table) and aria-pressed.
 */

/* ------------------------------------------------------------------ layout */
.pn { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "pick" "result" "type" "table"; align-items: start; }
.pn-pick { grid-area: pick; }
.pn-result { grid-area: result; }
.pn-type { grid-area: type; }
.pn-table-panel { grid-area: table; }
@media (min-width: 960px) {
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pick result" "type result" "table table"; grid-template-rows: auto 1fr auto; gap: var(--s-5) var(--s-6); }
}
@media (min-width: 1800px) {
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "pick result table" "type result table"; grid-template-rows: auto 1fr; }
}
.pn-h { margin: 0 0 var(--s-3); font-size: var(--step-1); }

/* ------------------------------------------------------------------ pick a key */
.pn-piano { margin: 0; }
.pn-piano .piano-scroll { max-width: 100%; }
/* piano-ui's toggle mode marks the picked key "is-selected"; drawn like scales.css's root key (saffron) plus a dot. */
.pn-piano .pk-white.is-selected .pk-body { fill: var(--pk-root); stroke: var(--pk-root-edge); stroke-width: 2.5; }
.pn-piano .pk-black.is-selected .pk-body { fill: var(--pk-root); stroke: var(--pk-root-edge); stroke-width: 2; }
.pn-piano .pk-black.is-selected .pk-badge { stroke: var(--pk-root-edge); }
.pn-piano .pk:focus-visible .pk-body { stroke: var(--focus); stroke-width: 4; }
.pn-legend { margin: var(--s-2) 0 var(--s-4); }
.pn-pick-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: flex-end; }
.pn-select-field { flex: 1 1 16rem; min-width: 0; }
.pn-select-field select { width: 100%; }
.pn-spell-field { flex: 0 1 auto; min-width: 0; }
.pn-spell-field legend { margin-bottom: 6px; }
.pn-spell, .pn-order { margin: 0; }

/* ------------------------------------------------------------------ result */
.pn-result .eyebrow { margin-bottom: var(--s-1); }
.pn-title { margin: 0; font-size: var(--step-3); line-height: 1.1; overflow-wrap: anywhere; }
.pn-sub { margin: var(--s-1) 0 var(--s-4); color: var(--muted); font-weight: 600; }
.pn-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-1) var(--s-4); margin: 0; }
@media (min-width: 560px) { .pn-names { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: var(--s-2) var(--s-4); } }
.pn-name { padding: var(--s-2) 0; border-top: 1px solid var(--line); min-width: 0; }
.pn-name dt { font-size: var(--step--1); font-weight: 650; color: var(--muted); }
.pn-name dt span { font-weight: 500; }
.pn-name dt span::before { content: "("; }
.pn-name dt span::after { content: ")"; }
.pn-name dd { margin: 2px 0 0; font-size: 1.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pn-nowrap { white-space: nowrap; }
@media (max-width: 420px) { .pn-name dd { font-size: 1.0625rem; } }
.pn-name dd small { font-size: var(--step--1); font-weight: 500; color: var(--muted); white-space: nowrap; }
.pn-deva { font-family: var(--font-deva), var(--font-body); font-weight: 600; }
.pn-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.pn-actions > button { flex: 1 1 auto; margin-bottom: 4px; }
.pn-play { min-width: 7rem; }
@media (min-width: 560px) { .pn-actions > button { flex: 0 0 auto; } .pn-play { min-width: 8.5rem; } }
@media (max-width: 420px) { .pn-actions .lg { padding-left: 16px; padding-right: 16px; } }
.pn-play-note { margin: var(--s-2) 0 0; }
.pn-sa-line { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--r-sm); border-left: 3px solid var(--indigo); }
.pn-sa-line.is-warn { border-left-color: var(--rose); }
.pn-sa-line:empty { display: none; }

/* ------------------------------------------------------------------ type a name */
.pn-type-field input { width: 100%; }
.pn-type-field input[aria-invalid="true"] { border-color: var(--rose); border-style: dashed; }
.pn-type-field .hint { margin: 0; }
.pn-msg { margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-3); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); border-left: 3px solid var(--teal); line-height: 1.45; }
.pn-msg.is-error { border-left-color: var(--rose); color: var(--rose); font-weight: 600; }
.pn-msg.is-variant { border-left-color: var(--saffron-edge); }
.pn-try-label { margin: var(--s-4) 0 var(--s-2); }
.pn-try { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pn-try-btn { min-height: 44px; padding: 6px 14px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }
.pn-forms { margin-top: var(--s-3); }
.pn-forms > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; cursor: pointer; color: var(--indigo); }
.pn-forms > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.pn-forms ul { margin: var(--s-1) 0 0; padding-left: 1.2em; max-width: 46em; }
.pn-forms li + li { margin-top: var(--s-1); }

/* ------------------------------------------------------------------ table */
.pn-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.pn-table-head .pn-h { margin: 0; }
.pn-table-cap { margin: var(--s-3) 0 var(--s-2); max-width: 46em; }
.pn-table-box { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pn-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; line-height: 1.3; }
.pn-table th, .pn-table td { padding: 7px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.pn-table thead th { border-top: 0; font-size: .8125rem; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.pn-table thead small { display: block; font-weight: 600; }
.pn-table th[scope="row"] { font-weight: 650; }
.pn-table small { display: block; font-size: .78rem; color: var(--muted); font-weight: 500; }
.pn-table .pn-cell-main { display: block; white-space: nowrap; }
.pn-table .pn-num { font-weight: 650; }
.pn-table tr.is-pick th, .pn-table tr.is-pick td { background: var(--indigo-soft); }
.pn-table tr.is-pick th { box-shadow: inset 4px 0 0 var(--indigo); }
.pn-table .pn-tag { color: var(--indigo); font-weight: 700; }
.pn-table tr.is-sa td:nth-child(4) .pn-cell-main { font-weight: 750; }
.pn-table .pn-swara-cell .pn-cell-main { white-space: normal; }
/* Carnatic swarasthana names: their own column from 700 px; on narrower screens a labelled line in the swara cell. */
.pn-table .pn-col-carn { display: none; }
.pn-table .pn-carn-inline { color: var(--saffron-text); font-weight: 650; }
@media (min-width: 700px) {
  .pn-table.is-indian .pn-col-carn { display: table-cell; }
  .pn-table .pn-carn-inline { display: none; }
}
@media (max-width: 420px) {
  .pn-table { font-size: .875rem; }
  .pn-table th, .pn-table td { padding: 6px 5px; }
  .pn-table thead small { font-weight: 500; }
}
.pn-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.pn-copy { min-height: 44px; padding: 6px 18px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }
.pn-copy-msg { margin: 0; font-weight: 600; color: var(--teal); }
.pn-copy-msg.is-error { color: var(--rose); }
.pn-copy-buffer { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------------ explainer */
.pn-gloss { margin: 0; }
.pn-gloss dt { font-weight: 700; margin-top: var(--s-3); }
.pn-gloss dt:first-child { margin-top: 0; }
.pn-gloss dd { margin: 2px 0 0; max-width: 46em; }
.pn-plain-table { margin-top: var(--s-4); }
.pn-plain-list { padding-left: 1.2em; max-width: 46em; }
.pn-why { padding-left: 1.2em; max-width: 46em; }
.pn-why li + li { margin-top: var(--s-2); }
.pn-sources { margin-top: var(--s-5); max-width: 46em; }
.pn-sources .acc-body ul { padding-left: 1.2em; }
.pn-sources .acc-body li + li { margin-top: var(--s-1); }

/* ------------------------------------------------------------------ forced colours */
@media (forced-colors: active) {
  .pn-piano .pk.is-selected .pk-body { fill: Highlight !important; stroke: CanvasText !important; }
  /* White keys: text sits on the Highlight body. Black keys: the label sits on its own badge, which stays Canvas. */
  .pn-piano .pk-white.is-selected .pk-label, .pn-piano .pk-white.is-selected .pk-sub, .pn-piano .pk.is-selected .pk-dot.on { fill: HighlightText; }
  .pn-piano .pk-black.is-selected .pk-label { fill: CanvasText; }
  .pn-table tr.is-pick th { outline: 2px solid Highlight; outline-offset: -2px; }
  .pn-msg, .pn-sa-line { border: 1px solid CanvasText; }
  /* The checked segment is drawn with background colours, which forced colours remove (same fix as the alankar page). */
  .pn .seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .pn .seg input:not(:checked) + span { forced-color-adjust: none; background: Canvas; color: CanvasText; }
}

@media print { .pn-actions, .pn-try, .pn-try-label, .pn-copy-row, .pn-piano, .pn-forms { display: none; } }