/* ArrowLink: the accent's ink, 700; the arrow steps 3 px forward (right to left: towards the left) under the pointer. */

.alink { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: var(--text-subhead); font-weight: 700; }
.alink .i { width: 16px; height: 16px; transition: translate var(--d-default) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .alink:hover .i { translate: -3px 0; } }
/*
 * DragRow: room above and below inside the scroller for a lifted card and its shadow (edit 16: they were clipped), given
 * back by the margin; faded ends; the snap off while dragged or gliding (dragScroll.ts); the edge buttons from 1024.
 */

.drow { position: relative; min-width: 0; }
.drow-row { display: flex; gap: 16px; margin: -14px 0 -22px; padding: 18px 2px 40px; list-style: none; cursor: grab; mask-image: linear-gradient(90deg, transparent, var(--black) 18px, var(--black) calc(100% - 18px), transparent); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; user-select: none; -webkit-user-select: none; }
.drow-row::-webkit-scrollbar { display: none; }
/* edit 21: nothing in the row is selected or dragged on its own; a drag is the row's */
.drow-row a, .drow-row img { -webkit-user-drag: none; }
.drow-row img { pointer-events: none; }
.drow-row a, .drow-row button { cursor: pointer; }
.drow-row.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.drow-row.dragging > * { pointer-events: none; }
.drow-row.gliding { scroll-snap-type: none; }
.drow-edge { position: absolute; top: var(--drow-edge-y, calc(50% - 40px)); z-index: 2; display: none; }
.drow-edge.start { inset-inline-start: -14px; }
.drow-edge.end { inset-inline-end: -14px; }
@media (min-width: 1024px) { .drow-edge { display: block; } }
/* FlagIR: emerald, ivory and a deep rose (tokens --flag-*), a hairline edge, a soft shadow. */

.flag-ir { width: 21px; height: 14px; border-radius: 3px; flex: none; clip-path: inset(0 round 3px); box-shadow: 0 1px 3px var(--black-18); transition: scale var(--d-default) var(--ease-out); }
.flag-ir .g { fill: var(--flag-green); }
.flag-ir .w { fill: var(--flag-white); }
.flag-ir .r { fill: var(--flag-red); }
.flag-ir .edge { fill: none; stroke: var(--black-8); stroke-width: 0.8; }
/* «قطعه ها» (edits 15–16; in design): the shelf — a head, the filters, one row of piece cards that scrolls sideways. */

.pcs { padding-block: 0 var(--section); }

/* the tabs (ui/Tabs), and «همه قطعه ها» (ui/ArrowLink) at the end */
.pcs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* the row is ui/DragRow; a cell is the section's */

/* a card */
.pc-cell { flex: 0 0 clamp(250px, 21vw, 300px); scroll-snap-align: start; display: grid; }
.pc { display: flex; flex-direction: column; padding: 8px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); transition: translate var(--d-default) var(--ease-out), border-color var(--d-default) ease, box-shadow var(--d-enter) var(--ease-out); }

/* the first bars: the card's picture */
.pc-score { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: calc(var(--radius-card) - 8px); overflow: hidden; padding: 34px 12px 22px; background:
  radial-gradient(80% 90% at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
  radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
  var(--surface-muted); transition: background-color var(--d-default) ease; }
.pc-staves { width: 100%; display: grid; gap: 2px; }
.pc-staves svg { width: 100%; height: auto; max-width: none; }
.pc-lvl { position: absolute; inset-inline-start: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 700; }
.pc-lvl.easy { background: var(--success-soft); color: var(--success-ink); }
.pc-lvl.mid { background: var(--reward-soft); color: var(--reward-ink); }
.pc-lvl.hard { background: var(--danger-soft); color: var(--danger-ink); }
.pc-meter { width: 13px; height: 11px; }
.pc-meter rect { fill: currentColor; opacity: 0.28; }
.pc-meter rect.on { opacity: 1; }

/* the play button: a glass circle at the foot, its ring filling while the bars play */
/* edit 18: beside the title (over the score it covered the bass staff's clef) */
/* the play button is ui/PlayRing; the card only places it */
.pc-play { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* the words */
.pc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 10px 8px; flex: 1; align-content: start; }
.pc-title, .pc-by { grid-column: 1; }
.pc-go { grid-column: 1 / -1; }
.pc-title { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; transition: color var(--d-default) ease; }
.pc-by { display: flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.pc-face { width: 26px; height: 26px; border-radius: var(--radius-pill); object-fit: cover; flex: none; border: 1px solid var(--edge); }
.pc-initial { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-caption); font-weight: 700; }
.pc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-ink); font-size: var(--text-subhead); font-weight: 700; justify-self: start; }
.pc-go .i { width: 16px; height: 16px; transition: translate var(--d-default) var(--ease-out); }

/* the pointer: the card lifts onto its brand edge, its title and its link answer */
@media (hover: hover) and (pointer: fine) {
  .pc:hover { translate: 0 -3px; border-color: var(--edge-strong); box-shadow: var(--shadow-tile-hover); }
  .pc:hover .pc-title { color: var(--accent-ink); }
  .pc:hover .pc-go .i { translate: -3px 0; }
}

/* the archive's card at the end */
.pc-more { place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; border-radius: var(--radius-card); border: 1px dashed var(--edge-strong); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.pc-more b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.pc-more small { color: var(--fg-muted); font-size: var(--text-footnote); }
.pc-more-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--surface); border: 1px solid var(--edge-strong); color: var(--accent-ink); }
.pc-more-ico .i { width: 26px; height: 26px; }

/* a tab's cards come in one after another (each tab is a new list) */
.pc-cell { opacity: 1; translate: none; transition: opacity var(--d-enter) var(--ease-out), translate var(--d-enter) var(--ease-out); transition-delay: calc(min(var(--i, 0), 6) * 50ms); }
@starting-style { .pc-cell { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) { .pc-cell { translate: none; transition-delay: 0s; } }