/* OCTA · SCRIBE — the TRACK slot and the picker. Linked only by /creators/write, after
   editor.css; <= 5 KB gzip (gorsel_olcum.py). Always dark; state is a word; no dot, circle,
   spinner or shimmer; 44 px targets without hover; no inline style. Why: SINIFLAR.md §6. */

/* 1. THE SLOT — a third header field under the Standfirst (.afield family) */
main.blogscope .trackslot-body{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; max-width:34rem;
}
main.blogscope .trackslot .track{ flex:1 1 100%; margin-top:0 }
/* a desk card with no playable source (no veil, or gone) reserves no empty control row */
main.blogscope .trackslot .track:not([data-src]) .tctl{ display:none }
main.blogscope .tnote, .ov.trackpick .tnote{
  font-family:var(--f-ui); font-size:13.5px; line-height:1.5; letter-spacing:.005em; color:var(--ink3);
}
main.blogscope .trackslot .tnote{ flex:1 1 16rem; min-width:0 }

/* PREVIEW 1:05 TO 1:35 — SONG 3:34: the house dash trails, so a wrapped line never starts with it */
main.blogscope .tinfo{
  display:flex; flex-wrap:wrap; gap:4px 22px; flex:1 1 auto; min-width:0;
  font:500 10px/1.6 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink3); font-variant-numeric: lining-nums tabular-nums;
}
main.blogscope .tinfo span{ position:relative; white-space:nowrap }
main.blogscope .tinfo span:not(:last-child)::after{
  content:''; position:absolute; right:-13px; top:50%; width:4px; height:1px;
  background:currentColor; opacity:.75;
}
main.blogscope .tactions{ display:flex; gap:8px; margin-inline-start:auto }

/* unavailable: words, and the amber rim ONLY while the words are there */
main.blogscope .twarn{
  flex:1 1 100%; font:500 10px/1.6 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
}
/* one valid list per theme: night's --surf-shadow is `none`, which may not sit in a list */
main.blogscope .trackslot:has(.twarn) .track.gone{ box-shadow: 0 0 0 1px var(--amber) }
main.blogscope[data-ink="paper"] .trackslot:has(.twarn) .track.gone{ box-shadow: 0 0 0 1px var(--amber), var(--surf-shadow) }
main.blogscope .track.gone .tctl{ display:none }
main.blogscope .track.gone .tcover{ opacity:.55 }
main.blogscope .track.gone .ttitle{ color:var(--ink2) }

/* 2. THE RAIL DOOR — three drawn bars; absolute, or it set the baseline 2 px high */
main.blogscope .rail .abtn.sm[data-cmd="track"]{ padding-left:29px }
main.blogscope .rail .abtn.sm[data-cmd="track"]::before{
  content:''; position:absolute; left:10px; top:50%; width:12px; height:12px; margin-top:-6px; background:currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='3' width='2' height='6' rx='1'/%3E%3Crect x='5' y='1' width='2' height='10' rx='1'/%3E%3Crect x='9' y='4' width='2' height='4' rx='1'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='3' width='2' height='6' rx='1'/%3E%3Crect x='5' y='1' width='2' height='10' rx='1'/%3E%3Crect x='9' y='4' width='2' height='4' rx='1'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* 3. THE PICKER — anchored at the top, so no view change moves its header (TAS-02); the
   sticky action row reaches into the foot padding --pb (TAS-05) */
.ov.trackpick{ color-scheme:dark; place-items:start center }
.ov.trackpick .pane{
  --mt:clamp(12px, 8vh, 96px); --pb:clamp(20px, 3vw, 32px);
  margin-top:var(--mt); padding-bottom:var(--pb); max-height:min(900px, calc(100dvh - 40px - var(--mt)));
  font-family:var(--f-ui); color:var(--ink2);
  /* the kit's gradient, flat under a stuck foot */
  background: linear-gradient(180deg, oklch(20% .05 270 / .86), oklch(13% .035 266 / .92) 62%);
}
.ov.trackpick h2{
  margin:0; font-family:var(--f-ui); font-size:28px; line-height:1.1; letter-spacing:-.026em;
  font-weight:380; color:var(--ink);
}
.ov.trackpick .tp-intro, .ov.trackpick h2 + p{
  margin-top:10px; max-width:44ch; font-family:var(--f-book); font-size:16px; line-height:1.55; color:var(--ink2);
}
/* the desk's own button register (aurora-blog.css §13), which the pane cannot reach */
.ov.trackpick .abtn{ font-family:var(--f-ui); font-size:12px; letter-spacing:.16em; font-weight:500 }
.ov.trackpick .abtn.ghost{ color:var(--ink2); box-shadow: inset 0 0 0 1px var(--edge) }

/* view 1 — the list */
.ov.trackpick .tp-status{
  margin-top:18px; font:500 10px/1.6 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3);
}
.ov.trackpick .tp-status:empty{ margin:0 }
.ov.trackpick .tp-status:is([data-state="empty"], [data-state="error"]){
  font:400 16px/1.5 var(--f-book); letter-spacing:0; text-transform:none; color:var(--ink2);
}
/* empty and error (TAS-13): a title in words, then (empty) the one line under it */
.ov.trackpick .tp-status:is([data-state="empty"], [data-state="error"]) b{ display:block; font:450 17px/1.35 var(--f-ui); color:var(--ink) }
.ov.trackpick .tp-status[data-state="empty"] span{ display:block; margin-top:4px; color:var(--ink3) }
.ov.trackpick .tp-list{ list-style:none; display:grid; gap:2px; margin:16px -6px 0; padding:0 }
.ov.trackpick .tp-row{ position:relative; display:flex; align-items:center; gap:4px; min-height:60px }
.ov.trackpick .tp-pick{
  flex:1 1 auto; min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr); align-content:center;
  column-gap:12px; min-height:60px; padding:6px; border:0; border-radius:14px;
  background:none; color:inherit; font:inherit; text-align:start; cursor:pointer;
  transition: background .3s var(--glide);
}
/* the ring sits inside the row, clear of the listen button (TAS-16) */
.ov.trackpick .tp-pick:focus-visible{ outline-offset:-2px }
.ov.trackpick .tp-pick .tcover{
  grid-row:1 / span 2; align-self:center; width:48px; height:48px; border-radius:10px;
  --tb:2px; --tg:3px; --th:20px;
}
.ov.trackpick .tp-pick > :not(.tcover){ grid-column:2; min-width:0 }
.ov.trackpick .tp-pick b, .ov.trackpick .tp-head b{
  display:block; font:450 15px/1.3 var(--f-ui); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov.trackpick .tp-pick small, .ov.trackpick .tp-head small{
  display:block; margin-top:5px; font:500 9.5px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink3); font-variant-numeric: lining-nums tabular-nums;
}
/* no length and no date: the title alone, centred on its tile */
.ov.trackpick :is(.tp-pick, .tp-head) small:empty{ display:none }
.ov.trackpick :is(.tp-pick, .tp-head):has(> small:empty) > b{ grid-row:1 / span 2; align-self:center }
/* the state word has its own line: no dash trails a wrap, rows stay even (TAS-10) */
.ov.trackpick .tp-flag{ display:block; margin-top:3px; color:var(--cyan); white-space:nowrap }

/* the audition toggle: 44 x 44, a rounded square (never a circle), the icon drawn */
.ov.trackpick .tp-listen{
  flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:12px; background:none; color:var(--ink2); cursor:pointer;
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: color .3s var(--glide), background .3s var(--glide), box-shadow .3s var(--glide);
}
.ov.trackpick .tp-listen:focus-visible{ border-radius:12px }
.ov.trackpick .tp-listen::before{
  content:''; width:10px; height:11px; margin-left:2px; background:currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ov.trackpick .tp-listen[aria-pressed="true"]{ color:var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan) }
.ov.trackpick .tp-listen[aria-pressed="true"]::before{
  width:11px; margin-left:0; clip-path:none;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px);
}
/* hover only where there is one: a tap left a cyan ring that means "playing" (TAS-15) */
@media (hover:hover){
  .ov.trackpick .abtn.ghost:hover{ color:var(--ink); box-shadow: inset 0 0 0 1px var(--cyan) }
  .ov.trackpick .tp-pick:hover{ background: oklch(60% .12 270 / .12) }
  .ov.trackpick .tp-listen:hover{ color:var(--ink); background: oklch(60% .12 270 / .12) }
}

/* loading: three STATIC rows, a cover square and two hairlines. No shimmer. */
.ov.trackpick .tp-skel{ padding:6px; pointer-events:none }
.ov.trackpick .tp-skel::before{
  content:''; flex:none; width:48px; height:48px; border-radius:10px;
  background: color-mix(in oklch, var(--rail) 70%, transparent); box-shadow: 0 0 0 1px var(--hair);
}
.ov.trackpick .tp-skel::after{
  content:''; flex:1 1 auto; height:28px; margin:0 56px 0 8px;
  background:
    linear-gradient(var(--hair), var(--hair)) 0 3px / 62% 9px no-repeat,
    linear-gradient(var(--hair), var(--hair)) 0 20px / 38% 6px no-repeat;
}
.ov.trackpick .tp-list-view > .abtn{ margin-top:14px }
.ov.trackpick .tp-list-view > .tnote{ margin-top:16px }
.ov.trackpick .row{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:22px }

/* view 2 — the preview window */
.ov.trackpick .tp-back{ margin-bottom:14px }
.ov.trackpick .tp-head{
  display:grid; grid-template-columns:56px minmax(0,1fr); align-content:center; column-gap:14px; margin-top:16px;
}
.ov.trackpick .tp-head .tcover{
  grid-row:1 / span 2; align-self:center; width:56px; height:56px; border-radius:12px;
  --tb:2px; --tg:3px; --th:20px;
}
.ov.trackpick .tp-head > :not(.tcover){ grid-column:2; min-width:0 }
.ov.trackpick .tp-head b{ font-size:17px }

/* the reel: a FIXED frame over a dragged waveform */
.ov.trackpick .tp-reel{
  --wt:12px; --wh:72px; --rh:22px;
  position:relative; height:calc(2 * var(--wt) + var(--wh) + var(--rh)); margin-top:18px;
  border-radius:14px; overflow:hidden; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  background: color-mix(in oklch, var(--rail) 60%, transparent); box-shadow: inset 0 0 0 1px var(--hair);
}
.ov.trackpick .tp-reel.drag{ cursor:grabbing }
.ov.trackpick .tp-reel:is([aria-disabled="true"], [aria-busy="true"]){ cursor:default }
.ov.trackpick .tp-reel:focus-visible{ border-radius:14px }
.ov.trackpick .tp-reel canvas{ position:absolute; left:0; top:var(--wt); display:block; width:100%; height:var(--wh) }
/* 60 % of the reel is the preview: 1.5 px --ink2 over --wash */
.ov.trackpick .tp-frame{
  position:absolute; left:20%; width:60%; top:calc(var(--wt) - 6px); height:calc(var(--wh) + 12px);
  border-radius:10px; background:var(--wash); box-shadow: inset 0 0 0 1.5px var(--ink2); pointer-events:none;
}
/* the playhead: information, and only while the writer plays the window */
.ov.trackpick .tp-frame::after{
  content:''; position:absolute; top:4px; bottom:4px; left:calc(var(--p, 0) * 100%); width:1.5px; margin-left:-.75px;
  border-radius:1px; background:var(--cyan); opacity:0;
}
.ov.trackpick .tp-reel.playing .tp-frame::after{ opacity:1; transition: left .25s linear }
/* the children slide by --shift on the reel's own box, so the ends can fade */
.ov.trackpick .tp-marks, .ov.trackpick .tp-ruler{ position:absolute; inset:0; pointer-events:none }
.ov.trackpick .tp-reel > :is(canvas, .tp-marks, .tp-ruler){
  --fd:linear-gradient(90deg, #0000, #000 40px, #000 calc(100% - 40px), #0000);
  -webkit-mask:var(--fd); mask:var(--fd);
}
/* 5 px: a notch ends above the frame (6 px down) */
.ov.trackpick .tp-marks > *{
  position:absolute; top:0; left:calc(var(--x, 0px) + var(--shift, 0px)); width:2px; height:5px; margin-left:-1px;
  border-radius:0 0 1px 1px; background:var(--mor);
}
.ov.trackpick .tp-ruler > *{
  position:absolute; bottom:5px; left:calc(var(--x, 0px) + var(--shift, 0px)); transform:translateX(-50%);
  font:500 9px/1 var(--mono); letter-spacing:.1em; color:var(--ink3); white-space:nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.ov.trackpick .tp-ruler > *::before{
  content:''; position:absolute; left:50%; bottom:calc(100% + 4px); width:1px; height:5px; margin-left:-.5px;
  background:var(--edge);
}
/* the whole song, the window as a segment; tap or drag jumps (vertical pans still scroll the pane) */
.ov.trackpick .tp-map{ position:relative; height:28px; margin-top:12px; cursor:pointer; touch-action:pan-y }
.ov.trackpick .tp-map::before, .ov.trackpick .tp-map::after{ content:''; position:absolute; top:50% }
.ov.trackpick .tp-map::before{
  left:0; right:0; height:4px; margin-top:-2px; border-radius:2px;
  background: color-mix(in oklch, var(--edge) 40%, transparent);
}
.ov.trackpick .tp-map::after{
  left:calc(var(--a, 0) * 100%); width:calc(var(--w, 0) * 100%); height:8px; margin-top:-4px; border-radius:3px;
  background:var(--ramp-ink);
}
/* 1:05 – 1:35: the mark at the digits' size, centred on them (TAS-12) */
.ov.trackpick .tp-times{
  display:flex; justify-content:center; align-items:center; gap:.45em; margin-top:14px;
  font:500 19px/1 var(--mono); letter-spacing:.02em; color:var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.ov.trackpick .tp-times b{ font-weight:500 }
.ov.trackpick .tp-times span{ color:var(--ink3) }
.ov.trackpick .tp-times.bekler{ visibility:hidden }
.ov.trackpick .tp-window-view .tnote{ margin-top:8px; text-align:center }
/* while the song is read, the hint's place holds the status (TAS-09) */
.ov.trackpick .tp-window-view .tnote.durum{
  font:500 9.5px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase;
}
/* in the foot; never display:none (a live region); an error is a sentence */
.ov.trackpick .tp-msg{ text-align:center }
.ov.trackpick .tp-msg:not(:empty){ margin-bottom:10px }
.ov.trackpick .tp-msg[data-tone="err"]{
  font:400 13.5px/1.45 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--err);
}
/* the sticky feet (TAS-05; SINIFLAR.md §6.1): solid, with a 12 px fade, only while the pane scrolls */
.ov.trackpick :is(.tp-list-view > .row, .tp-foot){
  position:sticky; bottom:calc(-1 * var(--pb)); z-index:1;
  margin:8px -6px calc(-1 * var(--pb)); padding:12px 6px var(--pb);
}
.ov.trackpick .tasar :is(.tp-list-view > .row, .tp-foot){
  background: linear-gradient(to top, oklch(12.5% .034 266) calc(100% - 12px), oklch(12.5% .034 266 / 0));
}
/* Use first in the Tab order and on the right (TAS-17) */
.ov.trackpick .tp-actions{ display:flex; flex-wrap:wrap; flex-direction:row-reverse; justify-content:flex-start; gap:10px }
/* preparing: the reel and the map rest; the hint, which invites a drag, steps out (TAS-01) */
.ov.trackpick .kilitli :is(.tp-reel, .tp-map){ opacity:.55; pointer-events:none }
.ov.trackpick .kilitli .tnote:not(.durum){ visibility:hidden }
/* a song the server cannot use: the sentence where the reel was, and the way out (TAS-06) */
.ov.trackpick .olu :is(h2, .tp-reel, .tp-map, .tp-times, .tnote, .tp-actions){ display:none }
.ov.trackpick .olu .tp-msg{
  margin-top:18px; font:400 16px/1.55 var(--f-book); letter-spacing:0; text-transform:none;
  text-align:start; color:var(--ink2);
}
.ov.trackpick .olu [data-track="another"]{ margin-top:18px }
/* a refused song keeps its head, even on a short screen */
.ov.trackpick .olu .tp-head{ display:grid }

/* 4. PHONES — the actions stack, Use on top */
@media (max-width:560px){
  .ov.trackpick{ padding:12px }
  /* the grid area already excludes a classic scrollbar (TAS-19) */
  .ov.trackpick .pane{ --pb:18px; width:100%; max-width:none; padding:18px 16px var(--pb); border-radius:22px;
    max-height:calc(100dvh - 24px - var(--mt)) }
  .ov.trackpick h2{ font-size:24px }
  .ov.trackpick .tp-intro, .ov.trackpick h2 + p{ font-size:15px }
  .ov.trackpick .tp-reel{ --wh:64px }
  .ov.trackpick .tp-actions{ flex-direction:column; align-items:stretch }
  .ov.trackpick .tp-actions .abtn{ width:100%; height:46px }
}
/* a short screen keeps the reel and Use in sight (TAS-05) */
@media (max-height:520px){
  .ov.trackpick{ padding:10px }
  .ov.trackpick .pane{ --mt:0px; --pb:12px; padding-top:14px; max-height:calc(100dvh - 20px) }
  .ov.trackpick .tp-head{ display:none }
  .ov.trackpick h2{ font-size:20px }
  .ov.trackpick .tp-back{ margin-bottom:8px }
  .ov.trackpick .tp-reel{ --wt:10px; --wh:44px; --rh:18px; margin-top:12px }
  .ov.trackpick .tp-map{ height:32px; margin-top:6px }
  .ov.trackpick .tp-times{ margin-top:8px; font-size:17px }
  .ov.trackpick .tp-actions{ flex-direction:row-reverse; align-items:center }
  .ov.trackpick .tp-actions .abtn{ width:auto; flex:1 1 0; height:44px }
}
/* a short portrait phone: the window view fits (TAS-05) */
@media (max-width:560px) and (max-height:660px){ .ov.trackpick .pane{ --mt:12px } }
@media (max-width:560px) and (max-height:600px){ .ov.trackpick .tp-head{ display:none } }
/* 44 x 44 targets where there is no hover; last, so no short-screen rule undercuts them */
@media (hover:none){
  main.blogscope .trackslot .abtn.sm, .ov.trackpick .abtn.sm{ height:44px; min-width:44px }
  .ov.trackpick .tp-map{ height:44px }
}
@media (prefers-reduced-motion: reduce){
  .ov.trackpick, .ov.trackpick .pane, .ov.trackpick .tp-pick, .ov.trackpick .tp-listen,
  .ov.trackpick .tp-reel.playing .tp-frame::after{ transition:none }
}