/* SPDX-License-Identifier: MPL-2.0
 * Copyright (C) 2026 Styves Goupil
 * FRASIL Editor (editor.frasilsynth.com): the header's word and chips, OPEN's four doors and their lists, the editor
 * (one track at a time: the bar, the rail, the page, the keys), the SAVE sheet. The River's own
 * CSS under it (river.css: cells, buttons, sheets, the toast), the editor's look here. */

/* ---------------------------------------------------------------- the header */
.rvh-river.ed-w { fill: var(--lamp); }
.rvh-nav .chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--steel); border-radius: 999px;
  font: 700 13px/1 var(--f-ui); letter-spacing: .14em; color: var(--fog); background: none; white-space: nowrap; cursor: pointer; text-decoration: none; text-transform: uppercase; }
.rvh-nav .chip:hover { border-color: var(--slate); color: var(--white); }
.rvh-nav .chip:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.rvh-nav .chip[hidden] { display: none; }
.chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--mist); }
.chip.on i { background: var(--ice); border-color: var(--ice); box-shadow: 0 0 8px var(--ice); }
.chip small { font: 500 12px/1 var(--f-ui); letter-spacing: .08em; color: var(--dim); }
.ed-page { min-height: 70vh; }
.ed[hidden], .st-page[hidden], .st-back[hidden], .ed-keys[hidden] { display: none; }

/* ---------------------------------------------------------------- OPEN: the four doors, a list under them */
.st-page { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 48px; }
.st-page .pt { margin-top: 26px; }
.st-back { margin-left: auto; }
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.door { --c: var(--mist); position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 148px; padding: 16px 16px 14px;
  background: #0c1117; border: 1px solid #1c242e; border-radius: 10px; text-align: left; color: inherit; font: inherit; cursor: pointer;
  transition: background-color .2s, border-color .2s; }
button.door:hover { border-color: var(--slate); }
button.door:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.door[aria-pressed="true"] { background: #111923; border-color: var(--c); }
.door b { font: 700 15px/1.15 var(--f-ui); letter-spacing: .16em; color: var(--white); }
.door em { font: 500 12px/1.2 var(--f-ui); font-style: normal; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.door em.live { color: var(--c); }
.door > svg { display: block; height: 42px; width: auto; color: var(--c); }
.door .door-t { margin-top: auto; display: grid; gap: 7px; }
.d-fm { --c: var(--white); } .d-co { --c: var(--ice); } .d-pr { --c: var(--lamp); } .d-fi { --c: #6ea4f0; }
.st-list { margin-top: 22px; min-height: 240px; }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.st-tools h2 { margin: 0; font: 700 13px/1 var(--f-ui); letter-spacing: .2em; color: var(--fog); }
.st-q { flex: 0 1 340px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border: 1px solid var(--steel); border-radius: 8px; color: var(--mist); }
.st-q input { flex: 1; min-width: 0; background: none; border: 0; color: var(--white); font: 500 15px/1 var(--f-ui); letter-spacing: .04em; }
.st-q input:focus { outline: none; }
.st-q:focus-within { border-color: var(--slate); }
.st-say { padding: 18px 8px; font: 400 16px/1.5 var(--f-text); color: var(--text-2); }
.st-say .btn { margin-top: 12px; }
.st-more { display: flex; justify-content: center; margin-top: 14px; }
.slots { display: grid; grid-template-rows: repeat(8, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 28px; }
.picks { list-style: none; margin: 0; padding: 0; }
.pick { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 44px; padding: 5px 8px;
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); color: inherit; background: none; text-align: left; font: inherit; cursor: pointer; }
.pick:hover, .pick:focus-visible { background: #101720; outline: none; }
.pick:focus-visible { box-shadow: inset 2px 0 0 var(--lamp); }
.pick .no { font: 500 13px/1 var(--f-mono); color: var(--dim); }
.pick .pn { font: 700 14px/1.1 var(--f-ui); letter-spacing: .14em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .pn small { display: block; margin-top: 4px; font: 400 13px/1.2 var(--f-text); letter-spacing: 0; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick.empty { cursor: default; }
.pick.empty .pn { font-weight: 500; color: var(--slate); }
.pick .ar { min-width: 96px; color: var(--mist); font: 500 12.5px/1 var(--f-ui); letter-spacing: .08em; text-align: right; }
.pick .ar .artist { justify-content: flex-end; }
.pick .go { font: 600 11px/1 var(--f-ui); letter-spacing: .16em; color: var(--ice); opacity: 0; }
.pick:hover .go, .pick:focus-visible .go { opacity: 1; }
.pick.empty .go { display: none; }
.drop { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 240px; padding: 26px; border: 1px dashed var(--slate); border-radius: 10px;
  text-align: center; font: 600 12px/1.3 var(--f-ui); letter-spacing: .16em; color: var(--mist); }
.drop.is-over { border-color: #6ea4f0; background: rgba(110, 164, 240, .06); }
.drop b { font: 700 15px/1 var(--f-ui); letter-spacing: .18em; color: var(--white); }
.drop > svg { width: 64px; height: auto; color: #6ea4f0; }

/* ---------------------------------------------------------------- the editor */
.ed { --tc: var(--fog); display: grid; grid-template-columns: 148px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "bar bar" "rail main" "rail keys";
  max-width: 1440px; margin: 0 auto; min-height: 640px; background: var(--night); border-bottom: 1px solid var(--rule); }
.ed[data-t="glint"] { --tc: var(--ice); } .ed[data-t="bass"] { --tc: var(--lamp); }
.ed-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 24px; border-bottom: 1px solid var(--rule); }
.ed-bar .play { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--slate); background: none; color: var(--white); cursor: pointer; }
.ed-bar .play:hover { border-color: var(--ice); }
.ed-bar .play[aria-pressed="true"] { border-color: var(--ice); color: var(--ice); box-shadow: 0 0 14px -4px var(--ice); }
.ed-bar .play:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.ed-name { min-width: 0; }
.ed-name h1 { margin: 0; display: block; font: 700 20px/1.1 var(--f-ui); letter-spacing: .18em; color: var(--white); white-space: nowrap; }
.ed-name h1 i { display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: 3px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); }
.ed-name p { margin: 4px 0 0; font: 500 12px/1.2 var(--f-ui); letter-spacing: .1em; color: var(--dim); white-space: nowrap; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.ed-name p em { font-style: normal; color: var(--ice); }
.ed-hm { display: flex; gap: 6px; margin-left: 12px; }
.ed-hm .cell { padding: 4px 8px; min-width: 64px; }
.ed-hm .cell-v { margin-top: 4px; }
.ed-hm .cell-m { display: none; }
.ed-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ed-rail { grid-area: rail; display: flex; flex-direction: column; padding: 14px 0; border-right: 1px solid var(--rule); }
.ed-rail button { --c: var(--mist); position: relative; display: block; width: 100%; padding: 13px 18px 12px 24px; background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--c); opacity: .62; transition: opacity .2s, background-color .2s; font: inherit; }
.ed-rail button b { display: block; font: 700 15px/1 var(--f-ui); letter-spacing: .2em; }
.ed-rail button span { display: block; margin-top: 6px; font: 500 11px/1 var(--f-ui); letter-spacing: .1em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-rail button:hover { opacity: 1; }
.ed-rail button:focus-visible { opacity: 1; outline: 2px solid var(--lamp); outline-offset: -2px; }
.ed-rail button[aria-pressed="true"] { opacity: 1; background: #101720; }
.ed-rail button[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--c); }
.ed-rail hr { width: 100%; margin: 10px 0; border: 0; border-top: 1px solid var(--rule); }
.ed-main { grid-area: main; min-width: 0; padding: 18px 26px 22px; }
.ed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ed-pre { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ed-pre small { font: 600 10px/1 var(--f-ui); letter-spacing: .18em; color: var(--mist); }
.ed-pre b { font: 700 26px/1 var(--f-ui); letter-spacing: .18em; color: var(--tc); white-space: nowrap; }
.ed-pre h2 { margin: 0; font: 700 26px/1 var(--f-ui); letter-spacing: .18em; color: var(--fog); }
.ed-pre button { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 1px solid #222b36; border-radius: 7px; color: var(--mist); cursor: pointer; }
.ed-pre button:hover { border-color: var(--slate); color: var(--white); }
.ed-pre button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.ed-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #222b36; border-radius: 8px; }
.ed-tabs button { position: relative; padding: 8px 14px 7px; background: none; border: 0; border-radius: 5px; font: 600 11.5px/1 var(--f-ui); letter-spacing: .16em; color: var(--mist); cursor: pointer; white-space: nowrap; }
.ed-tabs button:hover { color: var(--white); }
.ed-tabs button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }
.ed-tabs button[aria-pressed="true"] { background: var(--steel); color: var(--white); }
.ed-tabs button.on::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: 1.5px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.ed-groups { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 34px; margin-top: 20px; }
.ed-g { min-width: 0; padding-top: 12px; border-top: 1px solid var(--steel); }
.ed-g h3 { margin: 0 0 14px; font: 700 12px/1 var(--f-ui); letter-spacing: .2em; color: var(--tc); }
.ed-cells { display: grid; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); gap: 10px 10px; }
.ed .cell { position: relative; padding: 6px 8px 8px; border-radius: 6px; cursor: ew-resize; touch-action: pan-y; }
.ed .cell.is-choice { cursor: pointer; }
.ed .cell:focus-visible { outline: 2px solid var(--lamp); outline-offset: 0; }
.ed .cell.is-open { background: #111821; }
.ed .cell.is-active { background: rgba(242, 166, 90, .08); }
.ed .cell.is-edited .cell-v .v { color: var(--lamp); }
@media (hover: hover) { .ed .cell:hover { background: #0f151d; } .ed .cell:hover .cell-v .v { color: var(--white); } }
.ed .gauge, .ed .dots { max-width: none; }
.ed .gauge i { background: var(--tc); }
.ed .dots i.on::before { background: var(--tc); }
.ed .gauge .was { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--mist); opacity: .8; }
.ed-g .lfo-sc { display: block; width: 100%; height: 56px; margin-bottom: 12px; }
.ed-off { margin: 22px 0 0; font: 400 16px/1.5 var(--f-text); color: var(--text-2); }
.ed-keys { grid-area: keys; min-width: 0; padding: 0 26px 20px; }
.ed-seqh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 0 8px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .18em; color: var(--mist); }
.ed-seqh > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-seqh .a { height: 30px; }
.ed-roll { display: block; width: 100%; height: auto; border-radius: 6px; background: #090c11; box-shadow: inset 0 0 0 1px #151b23; touch-action: manipulation; }
.ed-roll rect.st { cursor: pointer; }
.ed-board { display: block; width: 100%; height: auto; margin-top: 10px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ed-board rect[data-n] { cursor: pointer; }
.ed-board rect[data-n]:hover { opacity: .85; }
.ed-board text { pointer-events: none; }
.ed-kl { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .18em; color: var(--mist); }
.ed-kl .a { height: 30px; }
.ed-empty { max-width: 1440px; margin: 0 auto; padding: 60px var(--gutter); }
.ed-pop { position: absolute; z-index: 60; max-height: 320px; overflow: auto; min-width: 150px; padding: 6px; background: #0e141b; border: 1px solid var(--steel); border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.ed-pop h5 { margin: 8px 10px 4px; font: 600 9.5px/1 var(--f-ui); letter-spacing: .18em; color: var(--dim); }
.ed-pop button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 5px;
  font: 500 13.5px/1 var(--f-ui); letter-spacing: .08em; color: var(--fog); text-align: left; cursor: pointer; }
.ed-pop button:hover, .ed-pop button:focus-visible { background: #18212c; outline: none; }
.ed-pop button.is-on { color: var(--ice); }
.ed-pop button .w { font: 600 9px/1 var(--f-ui); letter-spacing: .16em; color: var(--lamp); }
.ed-dragging, .ed-dragging * { cursor: ew-resize !important; }

/* ---------------------------------------------------------------- SAVE: the sheet, open until DONE */
.sv { width: min(calc(100% - 32px), 1100px); padding: 20px 28px 22px; background: #0d1219; border: 1px solid var(--steel); border-radius: 12px; color: inherit; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.sv::backdrop { background: rgba(4, 6, 9, .7); }
.sv-t { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.sv-t h2 { margin: 0; font: 700 22px/1 var(--f-ui); letter-spacing: .2em; color: var(--white); }
.sv-done { min-width: 96px; justify-content: center; }
.sv-n { margin-top: 14px; width: 100%; max-width: 380px; padding: 11px 13px; background: #090c11; border: 1px solid var(--steel); border-radius: 7px;
  font: 700 18px/1 var(--f-ui); letter-spacing: .2em; color: var(--white); text-transform: uppercase; }
.sv-n:focus { outline: none; border-color: var(--slate); }
.sv-say { min-height: 1.4em; margin: 8px 0 0; font: 400 14.5px/1.4 var(--f-text); color: #ffb3a4; }
.sv-from { display: flex; align-items: center; gap: 12px; margin-top: 4px; font: 400 15px/1.35 var(--f-text); color: var(--text-2); }
.sv-from .cc { flex: none; padding: 4px 7px 3px; border: 1px solid var(--slate); border-radius: 4px; font: 700 10px/1 var(--f-ui); letter-spacing: .14em; color: var(--fog); }
.sv-from b { font-weight: 500; color: var(--fog); }
.sv .doors { margin-top: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* (five: FRASIL STREAM the fifth) */
.sv .door { cursor: default; min-height: 216px; gap: 10px; }
.sv .door .door-t { margin-top: 0; }
.sv .door .a { width: 100%; justify-content: center; margin-top: auto; }
.sv .door .a-did { background: none; border-color: transparent; color: var(--mist); cursor: default; opacity: .9; }
.sv .door .a-did::before { content: "✓"; margin-right: 6px; color: var(--c); }
.sv .door .sv-err { font: 400 13.5px/1.35 var(--f-text); color: #ffb3a4; }
.sv .door .sv-ok { font: 400 13.5px/1.35 var(--f-text); color: var(--text-2); }
.sv .door .sv-ok a { color: var(--fog); }
.sv .door .sv-need { margin: 0; font: 400 13.5px/1.35 var(--f-text); color: var(--dim); }
.sv .door .sv-need a { color: var(--fog); }
.d-st { --c: #7FE3FF; }                                   /* FRASIL STREAM: the radio's glacier, its border a glow */
.sv .door.d-st { background: linear-gradient(#0c1117, #0c1117) padding-box, linear-gradient(160deg, rgba(127, 227, 255, .5), rgba(127, 227, 255, .08) 60%) border-box; border-color: transparent; }
.sv .door.d-st .a:not(.a-did):not(:disabled):not(.a-ice) { border-color: rgba(127, 227, 255, .55); color: #7FE3FF; }
@media (max-width: 1100px) and (min-width: 761px) { .sv .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.sv-slots button { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 2px; background: var(--steel); cursor: pointer; }
.sv-slots button.factory { background: #1c242e; box-shadow: inset 0 0 0 1px var(--steel); }
.sv-slots button.empty { background: none; box-shadow: inset 0 0 0 1px #2a3440; }
.sv-slots button.at { background: var(--lamp); box-shadow: 0 0 6px var(--lamp); }
.sv-slots button:hover:not(.at) { box-shadow: inset 0 0 0 1px var(--fog); }
.sv-slots button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }
@media (pointer: coarse) { .sv-slots { gap: 5px; } }
.sv-mode { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border: 1px solid #222b36; border-radius: 6px; }
.sv-mode button { padding: 5px 9px 4px; border: 0; border-radius: 4px; background: none; font: 600 10.5px/1 var(--f-ui); letter-spacing: .14em; color: var(--mist); cursor: pointer; }
.sv-mode button[aria-pressed="true"] { background: var(--steel); color: var(--white); }
.sv-mode button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }

/* ---------------------------------------------------------------- a phone: the rail as tabs, one column */
@media (max-width: 760px) {
  .rvh-nav .chip { padding: 8px 11px; font-size: 12px; }
  .chip small { display: none; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sv .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* (the fifth alone on its row) */
  .door { min-height: 112px; padding: 12px; gap: 8px; }
  .door > svg { height: 30px; }
  .door b { font-size: 13px; letter-spacing: .12em; }
  .door em { font-size: 11px; }
  .slots { grid-template-rows: none; grid-auto-flow: row; }
  .pick { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .pick .go { display: none; }
  .pick .ar { min-width: 0; }
  .ed { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "bar" "rail" "main" "keys"; min-height: 0; }
  .ed-bar { padding: 10px 14px; gap: 8px 12px; }
  .ed-name { flex: 1; }
  .ed-name h1 { font-size: 16px; letter-spacing: .14em; }
  .ed-hm { order: 5; width: 100%; margin: 0; overflow-x: auto; gap: 0; }
  .ed-hm .cell { min-width: 0; flex: 1; padding: 4px 6px; }
  .ed-hm .cell-v .v { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-acts { margin-left: 0; }
  .ed-acts .a-t { display: none; }
  .ed-rail { position: sticky; top: 0; z-index: 5; flex-direction: row; justify-content: space-between; padding: 0 6px; border-right: 0; border-bottom: 1px solid var(--rule); background: var(--night); }
  .ed-rail button { width: auto; padding: 13px 7px 12px; }
  .ed-rail button b { font-size: 13px; letter-spacing: .12em; }
  .ed-rail button span, .ed-rail hr { display: none; }
  .ed-rail button[aria-pressed="true"] { background: none; box-shadow: inset 0 -2px 0 var(--c); }
  .ed-rail button[aria-pressed="true"]::before { display: none; }
  .ed-main { padding: 14px 14px 16px; }
  .ed-pre b, .ed-pre h2 { font-size: 21px; }
  .ed-tabs { display: flex; width: 100%; }
  .ed-tabs button { flex: 1; padding-inline: 4px; }
  .ed-groups { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ed-cells { --c: 2 !important; }
  .ed-keys { position: sticky; bottom: 0; z-index: 4; padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 13, 18, .94); border-top: 1px solid var(--rule); }
  .ed-keys .ed-kl { margin-top: 0; }
  .sv { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px 14px 18px; border: 0; border-radius: 0; box-shadow: none; }
  .sv .door { min-height: 168px; }
}
@media (prefers-reduced-motion: reduce) { .door, .ed-rail button { transition: none; } }