/* Everything on CS42 (Version 2). Shared parts live in site.css; this is only what the site map adds.
   An index set like a good book's: a bar of sections that sticks and marks where you are, each
   section's heading held in the margin while its entries pass on hairlines, and the four
   Play and Chill colours where those sections are. */

/* Section jumps stop below the sticky bar through scroll-margin on the targets, never
   scroll-padding on the page: with scroll-padding, tabbing into the bar makes the page jump. */
html:has(.sm-bar) { scroll-padding-top: 0; }
.sm-sec { scroll-margin-top: 64px; }

/* ── Head ───────────────────────────────────────────────────────── */
.sm-head { padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(44px, 6vw, 80px); }
.sm-head .t-display { margin-top: 2px; max-width: 13em; }
.sm-head .t-display em { font-style: normal; color: var(--accent); }
.sm-head .t-lead { margin-top: 22px; max-width: 40ch; }
.sm-in { animation: sm-rise 1s var(--ease-out) var(--d, 0s) both; }
@keyframes sm-rise { from { opacity: 0; transform: translateY(22px); } }

/* ── The bar of sections ────────────────────────────────────────
   Left-aligned on the page's own edge; one underline slides to the section you are
   reading (assets/js/pages/sitemap.js moves it to the link site.js marks .is-here). */
/* the page colour itself, a little see-through, so no theme shows a grey stripe before it sticks */
.sm-bar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.sm-bar .ln-in { position: relative; width: min(100% - 2 * var(--gutter), var(--w-wide)); justify-content: flex-start; }
.sm-bar .ln-links { gap: clamp(22px, 3.4vw, 40px); height: 100%; }
.sm-bar .ln-links li { height: 100%; }
.sm-bar .ln-links a:not(.btn) {
    display: flex; align-items: center; height: 100%;
    font-size: 14px; letter-spacing: -0.006em;
}
.sm-ind {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; border-radius: 2px;
    background: var(--accent); opacity: 0; pointer-events: none;
    transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s var(--ease);
}
@media (max-width: 733px) {
    .sm-bar .ln-links li:not(:last-child) { display: block; }
    .sm-bar .ln-links { gap: 20px; }
}

/* ── Sections ───────────────────────────────────────────────────── */
.sm-sec { padding-top: clamp(64px, 8vw, 120px); }
.sm-sec:last-child { padding-bottom: clamp(96px, 12vw, 168px); }
.sm-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) {
    .sm-grid { grid-template-columns: 4fr 8fr; gap: clamp(48px, 6vw, 96px); }
    .sm-side-in { position: sticky; top: 92px; }
}
.sm-side .t-1 { margin-top: 2px; max-width: 11ch; font-size: clamp(32px, 3.4vw, 46px); }
.sm-intro { margin-top: 16px; max-width: 38ch; color: var(--fg-2); }
.sm-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }

/* entries on hairlines, two to a row */
.sm-list { display: grid; list-style: none; align-content: start; }
@media (min-width: 735px) { .sm-list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); } }
.sm-list > li { border-top: 1px solid var(--line); }
.sm-item { display: block; height: 100%; padding: 22px 0 30px; color: var(--fg); }
.sm-item:hover { text-decoration: none; }
.sm-item h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.014em; transition: color .2s var(--ease); }
.sm-item:hover h3 { color: var(--accent); }
.sm-item p { margin-top: 8px; font-size: 15px; line-height: 1.47; color: var(--fg-2); }
.sm-host { display: block; margin-top: 14px; font-size: 13px; color: var(--fg-3); }

/* apps: icon, name, state, one line, then the legal pages */
.sm-app { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px 0 26px; }
.sm-app .app-icon { width: 56px; height: 56px; }
.sm-app h3 { font-size: 19px; line-height: 1.24; letter-spacing: -0.012em; }
.sm-app h3 a { color: var(--fg); transition: color .2s var(--ease); }
.sm-app h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole entry opens the app's page */
.sm-app h3 a:hover { text-decoration: none; }
.sm-app:hover h3 a { color: var(--accent); }
.sm-state { margin-top: 2px; font-size: 13px; color: var(--fg-3); }
.sm-desc { margin-top: 10px; font-size: 15px; line-height: 1.47; color: var(--fg-2); }
.sm-legal { position: relative; z-index: 1; display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 12px; font-size: 13px; }
/* each legal link gets a full 44px tap height without changing how it looks, so a near miss
   does not open the app instead */
.sm-legal a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--fg-3); }
.sm-legal a:hover { color: var(--accent); }

/* Play and Chill in their own colours */
.sm-tiles { display: grid; gap: 14px; align-content: start; }
@media (min-width: 735px) {
    .sm-tiles { grid-template-columns: 1fr 1fr; }
    .sm-tile--piano, .sm-tile--wide { grid-column: 1 / -1; }
}
.sm-tile { --pad: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; padding: var(--pad); border-radius: var(--radius-lg); scroll-margin-top: 72px; }
.sm-kind { font-size: 15px; font-weight: 600; color: var(--fg-2); }
.sm-tile .t-3 { margin-top: 4px; }
.sm-tile .t-3 a { color: var(--fg); }
.sm-tile .t-3 a:hover { text-decoration: none; opacity: 0.72; }
.sm-tile-text { margin-top: 10px; max-width: 40ch; color: var(--fg-2); }
.sm-sub { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.sm-sub li { padding: 12px 0 13px; border-bottom: 1px solid var(--line); }
.sm-sub li:last-child { border-bottom: 0; padding-bottom: 0; }
.sm-sub a { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.sm-sub li > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.43; color: var(--fg-2); }

.sm-tile--piano { display: grid; gap: 32px; }
@media (min-width: 900px) { .sm-tile--piano { grid-template-columns: 1fr 1fr; align-items: end; } }
/* two octaves that run to the corner of the tile; the keys go down one after another as it arrives */
.sm-keys {
    display: flex; gap: 3px; height: clamp(120px, 13vw, 170px);
    margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
    padding: 0 0 0 3px;
}
@media (max-width: 899px) { .sm-keys { margin-left: calc(-1 * var(--pad)); } }
.sm-keys i {
    position: relative; flex: 1;
    border-radius: 0 0 7px 7px;
    background: #FCFBFF;
    box-shadow: inset 0 -6px 0 rgba(22,22,26,0.07), 0 1px 0 rgba(22,22,26,0.16);
    transform-origin: 50% 0;
}
.sm-keys i.hb::after {
    content: ""; position: absolute; z-index: 1; top: 0; right: -32%;
    width: 58%; height: 60%; border-radius: 0 0 5px 5px;
    background: #1B1A22; box-shadow: inset 0 -4px 0 rgba(255,255,255,0.08);
}
.js .sm-tile--piano.is-in .sm-keys i { animation: sm-key .5s var(--ease) calc(.45s + var(--k) * 0.06s) both; }
@keyframes sm-key { 45% { transform: scaleY(0.965); background: #E9E4FB; } }

.sm-tile--wide { display: grid; gap: 4px 48px; }
@media (min-width: 900px) {
    .sm-tile--wide { grid-template-columns: 5fr 7fr; align-items: start; }
    .sm-tile--wide .sm-sub { margin-top: 0; border-top: 0; }
    .sm-tile--wide .sm-sub li:first-child { padding-top: 4px; }
}

/* Studio: rows, with this page marked */
.sm-rows { list-style: none; border-top: 1px solid var(--line); }
.sm-rows li { border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.sm-rows a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px;
    padding: 20px 0 22px; color: var(--fg);
}
.sm-rows a:hover { text-decoration: none; }
.sm-rows strong { font-size: 19px; letter-spacing: -0.012em; transition: color .2s var(--ease); }
.sm-rows a:hover strong { color: var(--accent); }
.sm-rows span { grid-column: 1; font-size: 15px; line-height: 1.45; color: var(--fg-3); }
.sm-rows a::after {
    content: ""; grid-column: 2; grid-row: 1 / span 2;
    width: 8px; height: 8px; margin-right: 4px;
    border: solid var(--fg-3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.sm-rows a:hover::after { border-color: var(--accent); transform: translateX(3px) rotate(45deg); }
.sm-rows a.is-current::after { display: none; }
.sm-here { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.sm-here::before {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 0.15em;
    border-radius: 50%; background: var(--accent);
}
.sm-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
    margin-top: 40px; padding: clamp(24px, 3vw, 32px);
    border-radius: var(--radius-lg); background: var(--bg-2);
}
.sm-cta p { max-width: 44ch; color: var(--fg-2); }
.sm-cta strong { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
    .sm-in { animation: none; }
    .js .sm-tile--piano.is-in .sm-keys i { animation: none; }
}