/*
 * Alankar Generator (/tools/alankar/). Loaded after site.css and scales.css (scales.css only for the keyboard
 * picture's .pk-* styles). Uses the site's tokens only; no new decoration.
 * Mobile first: the stage (Play, tempo, notation, keyboard) comes first, so the default exercise plays at once,
 * with a link down to the exercise settings; then range and sound.
 * From 1100 px the stage is on the left and both settings panels on the right.
 * The sounding note is shown by a filled box AND a thick underline (not by colour alone).
 */

/* ------------------------------------------------------------------ layout */
.al { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "setup" "range"; align-items: start; }
.al-setup { grid-area: setup; }
.al-stage { grid-area: stage; text-align: left; padding: var(--s-4); }
.al-range { grid-area: range; }
@media (min-width: 640px) { .al-stage { padding: var(--s-5) var(--s-6) var(--s-5); } }
@media (min-width: 1100px) {
  .al { grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 1fr); grid-template-areas: "stage setup" "stage range"; grid-template-rows: auto 1fr; gap: var(--s-5) var(--s-6); }
}
.al-panel-h { margin: 0 0 var(--s-3); font-size: var(--step-1); }
.al-h3 { font-size: 1.125rem; margin: var(--s-5) 0 var(--s-2); }

/* ------------------------------------------------------------------ settings */
.al-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: flex-end; }
.al-row .field { flex: 1 1 14rem; min-width: 0; }
.al-sa { flex: 0 1 12rem !important; }
.al-row select, .al-range select { width: 100%; }
.al-label { font-weight: 600; margin-bottom: 6px; }
.al-seg { margin: 0; flex-wrap: wrap; border-radius: var(--r-md); }
.al-seg .seg span { border-radius: calc(var(--r-md) - 4px); padding: 8px 14px; }
.al-scale-note, .al-pattern-note { margin: var(--s-2) 0 var(--s-3); max-width: 46em; }
.al-scale-note:empty, .al-pattern-note:empty { display: none; }
.al-pattern-row { margin-top: var(--s-2); }
.al-custom { margin-top: var(--s-2); }
.al-custom input { width: 100%; font-family: var(--font-num); letter-spacing: .02em; }
.al-custom input[aria-invalid="true"] { border-color: var(--rose); border-style: dashed; }
.al-custom-help { margin: var(--s-2) 0 0; max-width: 46em; }
.al-custom-help kbd { font-size: .8125rem; }
.al-error { margin: var(--s-2) 0 0; color: var(--rose); font-weight: 600; }
.al-error:empty { display: none; }
.al-range { display: grid; gap: var(--s-3); }
.al-range fieldset legend { margin-bottom: 6px; }
.al-octaves { gap: 6px; }
.al-range-note { margin: -4px 0 0; }
.al-range-note:empty { display: none; }
.al-drone .hint { margin: 0; }
.al-range > p { margin: 0; }

/* ------------------------------------------------------------------ stage */
.al-head .eyebrow { margin-bottom: var(--s-1); }
.al-jump { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-1); font-weight: 650; }
@media (min-width: 1100px) { .al-jump { display: none; } }
.al-title { margin: 0; font-size: var(--step-2); overflow-wrap: anywhere; }
.al-sub { margin: var(--s-1) 0 0; color: var(--muted); }
.al-transport { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.al-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; flex: 0 0 auto; max-width: 100%; }
/* A fixed min-width (no percentage: a percentage here is ignored when the row measures itself, so it wrapped). */
.al-play { min-width: 9rem; max-width: 100%; }
.al-tempo { flex: 1 1 16rem; min-width: 0; }
.al-tempo-out { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.al-loop { margin-bottom: 2px; }
.al-status { margin: var(--s-2) 0 0; }
.al-status:empty { display: none; }
.al-pos { margin: var(--s-2) 0 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ notation */
.al-notation {
  margin-top: var(--s-2); max-height: min(28rem, 62vh); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: var(--s-3);
}
.al-notation:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.al-phase { margin: 0 0 var(--s-2); font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; }
.al-phase ~ .al-phase { margin-top: var(--s-3); }
.al-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.al-group { display: flex; flex-wrap: wrap; gap: 4px 4px; padding: 4px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--card-edge); }
/* A part (between divisions) moves to the next line as a whole; it wraps inside only if wider than the box. */
.al-part { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.al-part.has-div { margin-left: 9px; position: relative; }
.al-part.has-div::before { content: ""; position: absolute; left: -8px; top: 3px; bottom: 3px; border-left: 2px dotted var(--line-strong); }
.al-n {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 2.75rem; padding: 4px 5px 3px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); line-height: 1.15; text-align: center;
}
.al-n.is-oct { border-style: dashed; }
.al-n-a { font-weight: 750; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.al-n-q { font-size: .75rem; color: var(--muted); font-weight: 600; min-height: 1.15em; white-space: nowrap; } /* 12 px at the default size */
.al-n-b { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text); }
.al-n.is-hold { justify-content: center; color: var(--muted); font-weight: 700; font-size: 1.0625rem; min-width: 1.9rem; border-style: dotted; }
.al-n.is-now { background: var(--indigo); border-color: var(--indigo); color: var(--indigo-ink); box-shadow: inset 0 -4px 0 var(--saffron); }
.al-n.is-now .al-n-q, .al-n.is-now .al-n-b, .al-n.is-hold.is-now { color: var(--indigo-ink); }
.al-empty { margin: 0; padding: var(--s-3); }
.al-empty strong { color: var(--rose); }
.al-legend { margin: var(--s-2) 0 0; }

/* ------------------------------------------------------------------ keyboard picture */
.al-piano { margin-top: var(--s-4); }
/* piano-ui.js sizes the keys from the box's inner width; keep the side padding small. */
.al-piano .piano-scroll { padding-left: 2px; padding-right: 2px; }
.al-piano .pk.is-active .pk-body { fill: var(--saffron); stroke: var(--saffron-edge); stroke-width: 3; filter: none; }
.al-piano .pk-black.is-active .pk-label { fill: var(--pk-text); }
.al-piano-note { margin: var(--s-2) 0 0; }

/* ------------------------------------------------------------------ share */
.al-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.al-share button { min-height: 44px; padding: 6px 16px; font-size: var(--step--1); }
.al-share-msg { margin: 0; flex-basis: 100%; }
.al-share-msg:empty { display: none; }
.al-copy-box { flex-basis: 100%; min-height: 8rem; font-family: var(--font-num); font-size: .8125rem; }

@media (max-width: 520px) {
  .al-n { min-width: 2.5rem; padding: 3px 3px 2px; }
  .al-n-a { font-size: 1rem; }
  .al-group, .al-part { gap: 3px; }
  .al-group { padding: 3px; }
  .al-groups { gap: 6px; }
  .al-tempo { flex-basis: 100%; }
  .al-play { min-width: 7rem; padding-left: 20px; padding-right: 20px; }
  .al-restart { padding-left: 14px; padding-right: 14px; }
}

@media (forced-colors: active) {
  .al-n.is-now { outline: 3px solid Highlight; outline-offset: 1px; }
  .al-group { border-color: CanvasText; }
  .al-part.has-div::before { border-left-color: CanvasText; }
  /* Scale keys are Highlight (scales.css); the sounding key must differ from them, and labels must stay readable. */
  .al-piano .pk.is-scale .pk-label, .al-piano .pk.is-root .pk-label, .al-piano .pk.is-scale .pk-dot.on, .al-piano .pk.is-root .pk-dot.on { fill: HighlightText; }
  .al-piano .pk.is-active .pk-body { fill: CanvasText !important; }
  .al-piano .pk.is-active .pk-label, .al-piano .pk.is-active .pk-dot.on { fill: Canvas; }
  /* The checked chip, segment and switch are drawn with background colours, which forced colours remove, so on
     this page they are drawn in Highlight / HighlightText here (the same fix belongs in site.css for every page). */
  .al .chip input:checked + span, .al .seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .al .chip input:not(:checked) + span, .al .seg input:not(:checked) + span { forced-color-adjust: none; background: Canvas; color: CanvasText; border-color: CanvasText; }
  .al .switch input { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .al .switch input::after { background: CanvasText; }
  .al .switch input:checked { background: Highlight; border-color: Highlight; }
  .al .switch input:checked::after { background: HighlightText; }
}