/* INDX Audio: ohjesivut (guide/*.html, tuottaa build-guides.py).
   Kaikki valitsimet ovat .guide-juuren alla tai g-etuliitteellä, jotta mikään ei osu sivuston omiin luokkiin (.app, .note, .lead, .sub, ...).
   Värit tulevat sivuston teemamuuttujista (style.css), joten Booth, Studio ja Daylight toimivat ilman erillistä tummaa tilaa.
   Sovelluksen korostusväri --c vaihtuu <main data-app>-attribuutista; --g-ink on sama väri tekstikäyttöön (tummennettu Daylightissa, AA). */

/* ---------- sovelluskohtainen väri ---------- */
.guide { --c: var(--c-sound); --cb: var(--sound-b); }
.guide[data-app="scriptindx"], .g-card[data-app="scriptindx"], .g-pill[data-app="scriptindx"] { --c: var(--c-script); --cb: var(--script-b); }
.guide[data-app="mixindx"], .g-card[data-app="mixindx"], .g-pill[data-app="mixindx"] { --c: var(--c-mix); --cb: var(--mix-b); }
.guide[data-app="recindx"], .g-card[data-app="recindx"], .g-pill[data-app="recindx"] { --c: var(--c-rec); --cb: var(--rec-b); }
.guide[data-app="tagindx"], .g-card[data-app="tagindx"], .g-pill[data-app="tagindx"] { --c: var(--c-tag); --cb: var(--tag-b); }
.g-card[data-app="soundindx"], .g-pill[data-app="soundindx"] { --c: var(--c-sound); --cb: var(--sound-b); }
.guide, .g-card, .g-pill {
  --g-ink: color-mix(in srgb, var(--c) 62%, var(--text-primary));
  --g-ink-hi: color-mix(in srgb, var(--c) 40%, var(--text-primary));          /* tummemmalle pohjalle (näppäinkapselit), AA myös Daylightissa */
  --g-wash: color-mix(in srgb, var(--c) 9%, var(--card));
  --g-line: var(--hair-soft);
  --g-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.guide { padding-block: .75rem 0; }

/* Mitat: sivuston yläpalkki (style.css .bar: 64 px + 1 px reunaviiva) ja sen alla pysyvä ohjeiden ylärivi (murupolku + EN|FI).
   Ankkurit, sisällysluettelon kiinnitys ja vieritysseuranta (guide.js) laskevat paikkansa näistä, joten otsikko ei jää rivin alle. */
html[data-page="guide"] { --g-head: 65px; --g-bar: 3.25rem; scroll-padding-top: calc(var(--g-head) + var(--g-bar) + 1rem); }

/* ---------- kieli: yksi sivu, kaksi kieltä; ilman skriptiä näkyy englanti ---------- */
:root:not([data-glang="fi"]) .guide [data-lang-block="fi"],
:root[data-glang="fi"] .guide [data-lang-block="en"] { display: none; }
.guide [hidden] { display: none !important; }
.g-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:root:not(.g-js) .g-lang, :root:not(.g-js) .g-toc { display: none; }
:root:not(.g-js) .g-layout { grid-template-columns: minmax(0, 1fr); }

.guide a:focus-visible, .guide button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }   /* ei border-radiusta: kortit, pillerit ja napit säilyttävät oman muotonsa */

/* ---------- ylärivi: murupolku + kielivalinta (kiinnitetty sivuston yläpalkin alle, jotta EN|FI on aina tavoitettavissa) ---------- */
.g-top { position: sticky; top: var(--g-head); z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--g-bar); }
.g-top::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
                 background: var(--nav-bg); border-bottom: 1px solid var(--hair-soft);
                 -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.g-crumbs { min-width: 0; }
.g-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; list-style: none; font-size: .92rem; font-weight: 500; color: var(--text-secondary); }
.g-crumbs li + li::before { content: "/"; margin-right: .55rem; color: var(--soft); }
.g-crumbs a { color: var(--text-secondary); }
.g-crumbs a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.g-crumbs [aria-current] { color: var(--text-primary); font-weight: 700; }

.g-lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--hair); border-radius: 10px; background: var(--elevated); flex: none; }
.g-lang button { min-width: 2.6rem; padding: .32rem .7rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary);
                 font: 700 .8rem/1.2 var(--font); letter-spacing: .08em; cursor: pointer; }
.g-lang button:hover { color: var(--text-primary); background: var(--row-hover); }
.g-lang button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
@media (max-width: 600px), (pointer: coarse) {            /* kosketusnäytöllä napin korkeus vähintään 44 px */
  .g-lang button { min-width: 2.75rem; min-height: 44px; padding: .5rem .8rem; }
}

/* ---------- sivun pää ---------- */
.g-head { padding-block: 1.5rem 2rem; }
.g-logo { width: min(340px, 100%); height: auto; margin-bottom: 1.15rem; }
.g-logo.on-dark { display: none; }
:root[data-theme="studio"] .g-logo.on-light, :root[data-theme="booth"] .g-logo.on-light { display: none; }
:root[data-theme="studio"] .g-logo.on-dark, :root[data-theme="booth"] .g-logo.on-dark { display: block; }
.g-title { font-size: clamp(2.1rem, 5.6vw, 3.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.g-meta { margin-top: .85rem; color: var(--text-secondary); font-size: 1rem; font-weight: 500; }
.g-product { margin-top: .9rem; }
.g-product a, .g-end a { font-weight: 600; font-size: .95rem; color: var(--g-ink); }
.g-product a:hover, .g-end a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-head .g-others { margin-top: 1.4rem; }
.g-lead { max-width: 40rem; margin-top: 1rem; color: var(--text-secondary); font-size: 1.15rem; line-height: 1.55; }

/* ---------- asettelu: sisältö + kiinteä sisällysluettelo ---------- */
.g-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.g-main { min-width: 0; }
@media (min-width: 1080px) {
  .g-layout { grid-template-columns: 14.5rem minmax(0, 1fr); gap: 2.5rem; }
  .g-layout.g-no-toc { grid-template-columns: minmax(0, 1fr); }      /* yhden luvun ohje (RECINDX): ei sisällysluetteloa, ei tyhjää saraketta */
  .g-toc { position: sticky; top: calc(var(--g-head) + var(--g-bar) + 1rem); max-height: calc(100vh - var(--g-head) - var(--g-bar) - 2rem);
           overflow-y: auto; overscroll-behavior: contain; padding: 4px .4rem 4px 4px; scrollbar-width: thin; }
}
.g-toc { min-width: 0; font-size: .875rem; }
.g-toc-title { margin: 0 0 .65rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.g-toc-toggle { display: none; }
.g-toc-list { list-style: none; border-left: 1px solid var(--hair); }
.g-toc-list a { display: block; margin-left: -1px; padding: .36rem .8rem; border-left: 2px solid transparent; line-height: 1.35; color: var(--text-secondary); }
.g-toc-list a:hover { color: var(--text-primary); }
.g-toc-list a:focus-visible { outline-offset: -2px; }           /* rengas sisäpuolella: vierityslaatikko ei leikkaa sitä */
.g-toc-list a[aria-current="location"] { border-left-color: var(--c); color: var(--g-ink); font-weight: 650; background: linear-gradient(90deg, var(--g-wash), transparent); }
.g-toc-list a[data-g-trail] { color: var(--text-primary); }                      /* luku, jonka alaotsikossa ollaan */
.g-toc-sub { list-style: none; margin: 0 0 .3rem; }                              /* referenssitaulukoiden ryhmäotsikot lukunsa alla */
.g-toc-sub a { padding-block: .26rem; padding-left: 1.55rem; font-size: .93em; }
@media (max-width: 1079.98px) {
  .g-toc-title { display: none; }
  .g-toc-toggle { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--hair-soft);
                  border-radius: 14px; background: var(--card); box-shadow: var(--shadow); color: var(--text-primary); font: 600 .95rem/1.2 var(--font); cursor: pointer; }
  .g-toc-toggle i { width: .55rem; height: .55rem; margin-right: .25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .g-toc.is-open .g-toc-toggle i { transform: translateY(2px) rotate(-135deg); }
  .g-toc-list { display: none; margin-top: .5rem; padding: .4rem 0; max-height: min(60vh, 28rem); overflow-y: auto; border: 1px solid var(--hair-soft); border-radius: 14px; background: var(--card); }
  .g-toc.is-open .g-toc-list { display: block; }
  .g-toc-list a { display: flex; align-items: center; min-height: 44px; margin-left: 0; padding: .5rem 1rem; border-left-width: 3px; font-size: .92rem; }
  .g-toc-sub a { min-height: 44px; padding-block: .5rem; padding-left: 1.9rem; font-size: .9rem; }
}

/* ---------- sovelluskortti ---------- */
.g-app { padding: clamp(1.1rem, 3.4vw, 2.4rem); background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--r); box-shadow: var(--shadow); overflow-wrap: break-word; }
.g-app > [data-lang-block] > :first-child { margin-top: 0; }
.g-app-shot { width: 100%; height: auto; margin-top: 1.4rem; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .3); background: #0c0d10; box-shadow: 0 22px 44px var(--drop); }
.g-sr + .g-app-shot { margin-top: 0; margin-bottom: .75rem; }
.g-shot-caption { margin-top: .7rem; font-size: .88rem; color: var(--text-secondary); }

.g-app h3 { margin-top: 2.7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--hair); color: var(--g-ink);
            font-size: clamp(1.3rem, 2.6vw, 1.55rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.g-app p { max-width: 66ch; margin-top: .95rem; line-height: 1.65; }
.g-app ul, .g-app ol { max-width: 68ch; margin: .95rem 0 0 1.35rem; line-height: 1.6; }
.g-app li { margin-top: .5rem; padding-left: .15rem; }
.g-app li::marker { color: var(--g-ink); font-weight: 700; }
.g-app strong { font-weight: 650; }
.g-app a { color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; }
.g-app small { font-size: .85em; }
.g-app sub, .g-app sup { font-size: .75em; }

/* "Viisi minuuttia": koko työnkulku yhdessä laatikossa, pidetään sivun ensimmäisenä */
.g-tour { margin-top: 1.5rem; padding: 1.2rem 1.45rem 1.35rem; border: 1px solid color-mix(in srgb, var(--c) 38%, var(--hair)); border-radius: 18px; background: var(--g-wash); }
.g-app .g-tour h3 { margin-top: 0; padding-bottom: 0; border-bottom: 0; color: var(--text-primary); font-size: 1.2rem; }
.g-tour ol { margin-top: .85rem; max-width: none; }

/* Nostolaatikko: se yksi asia, jonka takia työ joko sujuu tai ei */
.g-note { margin-top: 1.3rem; padding: 1rem 1.25rem 1.05rem; border-left: 3px solid var(--c); border-radius: 0 14px 14px 0; background: var(--g-wash); }
.g-app .g-note p { margin-top: 0; max-width: none; font-size: .96rem; }
.g-app .g-note p + p { margin-top: .6rem; }
.g-label { display: block; margin-bottom: .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--g-ink); }

/* ---------- näppäimet ja koodi ---------- */
.guide kbd { display: inline-block; padding: .08em .45em; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 6px; background: var(--elevated);
             color: var(--text-primary); font: 600 .8em/1.35 var(--g-mono); white-space: nowrap; }
.guide code { padding: .12em .42em; border-radius: 6px; background: color-mix(in srgb, var(--text-primary) 9%, transparent);
              color: var(--text-primary); font: 500 .84em var(--g-mono); overflow-wrap: anywhere; }
/* Sovelluksen oma kuvake tekstin seassa: lukija tunnistaa napin ruudulta eikä etsi sitä nimen perusteella. Sivuston svg { display:block } ohitetaan. */
.guide .g-ui-icon { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .12em; vertical-align: -.16em; color: var(--text-primary); }
.guide .g-ui-icon:not([fill]) { fill: currentColor; }

/* ---------- toiminnot ja napit -referenssi: kuvake, nimi, näppäin, selitys ---------- */
.g-ref-h { margin: 2.3rem 0 .25rem; padding-bottom: .45rem; border-bottom: 1px solid var(--hair); color: var(--g-ink);
           font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.g-ref-table, .g-ref-table tbody { display: block; width: 100%; }
.g-ref-table tr { display: grid; grid-template-columns: 2.4rem 11.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "ri rn rd" "ri rk rd";
                  column-gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--g-line); }
.g-ref-table tr:first-child { border-top: 0; }
.g-ref-table td { display: block; min-width: 0; padding: 0; }
.g-ref-table td.g-ri { grid-area: ri; }
.g-ref-table td.g-rn { grid-area: rn; padding-top: .3rem; color: var(--text-primary); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.g-ref-table td.g-rk { grid-area: rk; margin-top: .45rem; }
.g-ref-table td.g-rd { grid-area: rd; padding-top: .3rem; color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
.g-ref-table td.g-rd strong { color: var(--text-primary); }
.g-ref-table td.g-rk:has(> .g-ref-nokey) { display: none; }        /* ref-nokey = ei oletusnäppäintä (lähteessä viiva); tyhjä kohta kertoo saman */
.g-ref-table.g-noicons tr { grid-template-columns: 11.5rem minmax(0, 1fr); grid-template-areas: "rn rd" "rk rd"; }
.g-ref-table.g-noicons td.g-ri { display: none; }
.g-ref-icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--hair); border-radius: 8px;
              background: var(--g-wash); color: var(--g-ink); }
.g-ref-icon svg { width: 1.05rem; height: 1.05rem; }
.g-ref-icon svg:not([fill]):not([style*="fill"]) { fill: currentColor; }
.g-ref-icon.g-glyph { font-size: 1rem; font-weight: 700; line-height: 1; }
.g-ref-combo, .g-ref-alts { display: inline-flex; align-items: center; flex-wrap: wrap; }
.g-ref-combo { gap: 4px; }
.g-ref-alts { gap: 2px; }
.g-ref-table kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; padding: 0 7px; font: 600 .8rem var(--font); }
.g-ref-table kbd.g-mod { color: var(--g-ink-hi); font-size: 1rem; }
/* Selitystekstin sisällä näppäin on tekstin osa: tavallinen inline-laatikko (ei inline-flex), jonka line-height on 1, joten se ei kasvata rivin
   korkeutta (27 px:n kapseli venytti rivejä 21-31 px:iin). Inline-laatikko ei myöskään ole rivinvaihtokohta: "⌥+klikkaus" pysyy yhdessä. */
.g-ref-table td.g-rd kbd { display: inline; min-width: 0; height: auto; padding: .06em .5em; font-size: .8rem; line-height: 1; vertical-align: baseline; }
.g-ref-table td.g-rd kbd.g-mod { padding-inline: .42em; font-size: .95rem; }
.g-ref-plus { color: var(--soft); font-size: .7rem; font-weight: 700; }
.g-ref-nokey { color: var(--soft); }
/* Kuvakkeiden omat koukut (class tulee sovelluksen SVG:stä; sovelluksessa tyyli on sen omassa CSS:ssä) */
.g-chip-mark { border-radius: 22%; background: #1c1c1e; }                 /* kuvakkeen vaalea viiva-aineisto tarvitsee tumman pohjan myös Daylightissa */
.g-ref-icon .g-knob-track, .g-ref-icon .g-knob-arc { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.g-ref-icon .g-knob-track { stroke-opacity: .3; stroke-dasharray: 70.7 94.25; }
.g-ref-icon .g-knob-arc { stroke-dasharray: 49.5 94.25; }
.g-ref-icon .g-knob-ptr { stroke: currentColor; stroke-width: 4; stroke-linecap: round; transform: rotate(54deg); transform-origin: 20px 20px; }
@media (max-width: 759.98px) {
  .g-ref-table tr { grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "ri rn" "ri rk" "ri rd"; column-gap: .75rem; padding: .8rem 0; }
  .g-ref-table.g-noicons tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rn" "rk" "rd"; }
  .g-ref-table td.g-rn { padding-top: .25rem; }
  .g-ref-table td.g-rk { margin-top: .4rem; }
  .g-ref-table td.g-rd { margin-top: .35rem; padding-top: 0; }
}

/* ---------- sivun loppu: muut ohjeet, linkit, tavaramerkit ---------- */
.g-others { margin-top: 2rem; }
.g-others-title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.g-others ul { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; list-style: none; }
.g-pill { display: inline-flex; align-items: center; padding: .55rem 1.05rem; border: 1.5px solid var(--hair); border-radius: 999px; background: var(--card);
          color: var(--text-primary); font-size: .92rem; font-weight: 800; letter-spacing: -.01em; transition: transform .15s, border-color .15s; }
.g-pill .g-ix { color: var(--g-ink); }
.g-pill:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 55%, var(--hair)); }
.g-pill-all { font-weight: 600; letter-spacing: 0; color: var(--text-secondary); }
.g-end { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: baseline; margin-top: 1.8rem; }
.g-support { color: var(--text-secondary); font-size: .95rem; }
.g-support a { font-weight: 600; color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; }
.g-tm { max-width: 70ch; margin-top: 1.6rem; color: var(--text-secondary); font-size: .8rem; line-height: 1.55; }

/* ---------- ohjeiden hakemisto ---------- */
.g-head-hub { padding-bottom: 1.5rem; }
.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; list-style: none; }
.g-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .85rem; height: 100%; padding: 1.7rem 1.4rem 1.3rem;
          background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--r); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.g-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cb); }
.g-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--hair-soft)); }
.g-card .g-logo { width: min(15rem, 100%); margin-bottom: .2rem; }
.g-card-meta { color: var(--text-secondary); font-size: .95rem; }
.g-card-go { margin-top: auto; padding-top: .4rem; color: var(--g-ink); font-size: .92rem; font-weight: 700; }
.g-card-go::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform .2s; }
.g-card:hover .g-card-go::after { transform: translateX(4px); }

@media (max-width: 600px), (pointer: coarse) {            /* linkit ja pillerit kosketuskokoon (44 px) */
  .g-pill { min-height: 44px; }
  .g-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .g-product a, .g-end a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }      /* gap: flex-laatikossa nuolen ja tekstin välilyönti katoaisi */
}
@media (max-width: 560px) {
  .g-head { padding-block: 1.1rem 1.5rem; }
  .g-app h3 { margin-top: 2.2rem; }
  .g-tour { padding: 1rem 1.1rem 1.15rem; }
  .g-note { padding: .9rem 1rem; }
  .g-app ul, .g-app ol { margin-left: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-page="guide"] { scroll-behavior: auto; }
  .g-pill, .g-card, .g-card-go::after, .g-toc-toggle i { transition: none; }
}
@media print {
  .g-top, .g-toc, .g-others, .g-end, .g-product { display: none !important; }
  html[data-page="guide"] .bar, html[data-page="guide"] footer { display: none !important; }
  .guide { padding: 0; }
  .g-app { padding: 0; border: 0; box-shadow: none; background: none; }
  .g-ref-table tr { break-inside: avoid; }
}