/* Skin · liner — every rule must stay scoped to body[data-skin="liner"]. */

.theme-swatch-liner {
  background: linear-gradient(135deg, var(--swatch-liner-paper) 0 68%, var(--swatch-liner-accent) 68%);
}

/* ---- tokens ---------------------------------------------------------- */
body[data-skin="liner"] {
  --ln-paper: oklch(91% 0.03 80);
  --ln-edge: oklch(80% 0.035 76);
  --ln-ink: oklch(25% 0.02 50);
  --ln-soft: oklch(25% 0.02 50 / 0.64);
  --ln-hair: oklch(25% 0.02 50 / 0.3);
  --ln-ox: oklch(40% 0.08 40);
  --ln-table: oklch(14% 0.01 50);
  --ln-m: clamp(26px, 2.8vw, 40px);
  --ln-pad: clamp(34px, 4.6vw, 70px);
  --ln-foot: 188px;
  --ln-board: oklch(30% 0.025 55);
  --ln-serif: "Iowan Old Style", Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --ln-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .14 0 0 0 .22 -.045'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23b)'/%3E%3C/svg%3E");
  --color-canvas: var(--ln-table); --color-surface: var(--ln-paper); --color-surface-2: oklch(87% 0.032 78);
  --color-ink: var(--ln-ink); --color-muted: var(--ln-soft); --color-rule: var(--ln-hair);
  --color-accent: var(--ln-ox); --color-focus: var(--ln-ox);
  --color-dock: var(--ln-paper); --color-dock-ink: var(--ln-ink); --color-dock-muted: var(--ln-soft);
  --color-modal: oklch(92% 0.03 80); --color-modal-2: oklch(88% 0.032 78);
  --color-overlay: oklch(14% 0.012 50 / 0.82); --color-shadow: oklch(10% 0.01 50 / 0.45);
  --font-display: var(--ln-serif); --font-body: var(--ln-serif);
  --radius-control: 0; --radius-panel: 0;
  background: var(--ln-table);
  color: var(--ln-ink);
  font-family: var(--ln-serif);
}
body[data-skin="liner"] .app { background: var(--ln-table); }

/* ---- hidden layers --------------------------------------------------- */
body[data-skin="liner"] #ambientCanvas, body[data-skin="liner"] .background-image, body[data-skin="liner"] .background-veil,
body[data-skin="liner"] .ambient-noise, body[data-skin="liner"] .stamp-decoration, body[data-skin="liner"] .film-perforation,
body[data-skin="liner"] .glass-grid, body[data-skin="liner"] .spectrum-ruler, body[data-skin="liner"] .beat-halo,
body[data-skin="liner"] .scan-glint, body[data-skin="liner"] .vinyl-record, body[data-skin="liner"] .sleeve-shadow,
body[data-skin="liner"] .sleeve-edge, body[data-skin="liner"] .art-highlight, body[data-skin="liner"] .art-caption,
body[data-skin="liner"] .art-frame::before, body[data-skin="liner"] .art-frame::after,
body[data-skin="liner"] .stage-header .brand-block h1, body[data-skin="liner"] .stage-header .eyebrow,
body[data-skin="liner"] .touch-album-kicker, body[data-skin="liner"] .touch-now-playing, body[data-skin="liner"] .touch-hint,
body[data-skin="liner"] .dock-corner, body[data-skin="liner"] .skin-controls, body[data-skin="liner"] .footer-note,
body[data-skin="liner"] .touch-track-row .number, body[data-skin="liner"] .touch-track-row .state-mark,
body[data-skin="liner"] .theme-menu-label, 
body[data-skin="liner"] .legacy-track-copy > :not(#trackIndex) { display: none !important; }

/* ---- the booklet: two facing pages ----------------------------------- */
body[data-skin="liner"] .stage {
  position: fixed !important; inset: var(--ln-m) !important; width: auto; height: auto !important; min-height: 0 !important;
  padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) !important;
  gap: 0; overflow: visible; z-index: 3; background: none; box-shadow: none;
}
body[data-skin="liner"] .composition { display: contents !important; }

/* left page: full-bleed cover */
body[data-skin="liner"] .art-shell {
  grid-column: 1; grid-row: 1; position: relative; width: 100% !important; height: 100%; max-width: none;
  aspect-ratio: auto !important; margin: 0; transform: none !important; overflow: hidden;
  background: var(--art-base, oklch(35% 0.03 50)); box-shadow: -1px 0 0 oklch(80% 0.03 76), -2px 1px 0 oklch(95% 0.02 80), -3px 1px 0 oklch(80% 0.03 76), -4px 2px 0 oklch(74% 0.035 76), 0 10px 24px oklch(5% 0.01 50 / 0.45);
}
body[data-skin="liner"] .art-frame {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
  padding: 0 !important; margin: 0; border: 0; border-radius: 0 !important; background: none;
  box-shadow: none !important; transform: none !important; overflow: hidden;
}
body[data-skin="liner"] .art-frame img {
  width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; object-position: center;
  filter: none !important; box-shadow: none !important;
}
/* Switch = page turn. `rotate`/`translate` are independent properties, so the
   frame's scroll-clipping transform is untouched; the hinge sits on the spine
   (right edge of the left leaf) and the parent supplies the perspective. */
body[data-skin="liner"].is-transitioning .art-frame-a,
body[data-skin="liner"].is-shared-art-transition .art-frame-a,
body[data-skin="liner"].is-transitioning .art-frame-b,
body[data-skin="liner"].is-shared-art-transition .art-frame-b { transform-origin: 100% 50%; }
body[data-skin="liner"].is-transitioning .art-frame-a, body[data-skin="liner"].is-shared-art-transition .art-frame-a { animation: linerPageOut calc(370ms * var(--motion, 1)) cubic-bezier(.22,.72,.25,1) both !important; }
body[data-skin="liner"].is-transitioning .art-frame-b, body[data-skin="liner"].is-shared-art-transition .art-frame-b { animation: linerPageIn calc(370ms * var(--motion, 1)) cubic-bezier(.18,.78,.22,1) both !important; }
@keyframes linerPageOut {
  from { rotate: y 0deg; translate: 0 0; opacity: 1; }
  to { rotate: y calc(-42deg * var(--motion, 1)); translate: calc(var(--art-switch-x) * -1 * var(--motion, 1)) 0; opacity: 0; }
}
@keyframes linerPageIn {
  from { rotate: y calc(26deg * var(--motion, 1)); translate: calc(var(--art-switch-x) * var(--motion, 1)) 0; opacity: 0; }
  to { rotate: y 0deg; translate: 0 0; opacity: 1; }
}
/* Playing = the paper grain drifts a whole tile (seamless loop) and the progress
   leaf breathes: nothing here changes layout, size or reading position. */
body[data-skin="liner"].is-playing .touch-album-panel { animation: linerPaperDrift calc(24000ms * var(--motion, 1)) linear infinite; }
body[data-skin="liner"].is-playing .progress-track i { animation: linerProgressBreath calc(3600ms * var(--motion, 1)) ease-in-out infinite; }
body[data-skin="liner"].is-playing .progress-track i::after { animation: linerDotPulse calc(3600ms * var(--motion, 1)) ease-in-out infinite; }
@keyframes linerPaperDrift { from { background-position: 0 0, 0 0; } to { background-position: 240px 240px, 0 0; } }
@keyframes linerProgressBreath { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes linerDotPulse { 0%, 100% { scale: 1; } 50% { scale: calc(1 + .45 * var(--motion, 1)); } }

/* right page: paper */
body[data-skin="liner"] .touch-album-panel {
  grid-column: 2; grid-row: 1; position: relative; display: flex !important; flex-direction: column; gap: 0;
  width: auto; height: 100%; max-height: none !important; min-height: 0; margin: 0;
  padding: clamp(104px, 16vh, 140px) var(--ln-pad) var(--ln-foot) var(--ln-pad) !important;
  border: 0 !important; border-radius: 0; color: var(--ln-ink); background: var(--ln-fibre), var(--ln-paper);
  box-shadow: 1px 0 0 var(--ln-edge), 2px 1px 0 oklch(95% 0.02 80), 3px 1px 0 var(--ln-edge), 4px 2px 0 oklch(95% 0.02 80), 5px 2px 0 oklch(74% 0.035 76), 0 10px 24px oklch(5% 0.01 50 / 0.45);
  counter-reset: ln-track;
}
/* the spine: 1px crease + ~24px fold shadow on each leaf */
body[data-skin="liner"] .stage::before {
  content: "" !important; display: block !important; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 50px; transform: translateX(-50%); z-index: 5; pointer-events: none;
  background:
    linear-gradient(to right, transparent 49%, oklch(8% 0.02 50 / 0.7) 49% 50%, oklch(98% 0.02 80 / 0.35) 50% 51%, transparent 51%),
    linear-gradient(to right, transparent, oklch(10% 0.02 50 / 0.4) 44%, oklch(10% 0.02 50 / 0.6) 49%, oklch(20% 0.03 55 / 0.3) 52%, transparent 100%);
}
/* the board the book rests on */
body[data-skin="liner"] .stage::after {
  content: "" !important; display: block !important; position: absolute; inset: calc(var(--ln-m) * -0.55); z-index: -1; pointer-events: none;
  background: var(--ln-board); border: 1px solid oklch(13% 0.015 50); box-shadow: 0 18px 40px oklch(4% 0.01 50 / 0.6);
}
body[data-skin="liner"] .stage, body[data-skin="liner"] .art-shell, body[data-skin="liner"] .touch-album-panel { border-radius: 0 !important; }

/* ---- title page ------------------------------------------------------ */
body[data-skin="liner"] .touch-album-heading { display: block; margin: 0 0 clamp(12px, 2.2vh, 24px); }
body[data-skin="liner"] .touch-album-heading h2 {
  margin: 0; padding-bottom: clamp(12px, 2vh, 20px); border-bottom: 1px solid var(--ln-ink); color: var(--ln-ink);
  font: 400 clamp(30px, 3.3vw, 52px)/1.08 var(--ln-serif); letter-spacing: -0.012em; text-wrap: balance; overflow-wrap: anywhere;
}
body[data-skin="liner"] .stage-header {
  position: fixed; inset: 0 0 auto; height: 0; padding: 0; display: block; border: 0; background: none;
  backdrop-filter: none; box-shadow: none; pointer-events: none; z-index: 60;
}
body[data-skin="liner"] .stage-header > * { pointer-events: auto; }
body[data-skin="liner"] .wordmark {
  position: fixed; top: calc(var(--ln-m) * 0.725 - 5px); left: 50%; transform: translateX(-50%); color: oklch(66% 0.07 80);
  font: 400 9px/1 var(--ln-serif); letter-spacing: 0.7em; text-indent: 0.7em;
}
body[data-skin="liner"] .stage-header .brand-block {
  position: fixed; top: calc(var(--ln-m) + clamp(62px, 10vh, 86px)); left: calc(50% + var(--ln-pad));
  right: calc(var(--ln-m) + var(--ln-pad)); display: block; text-align: left;
}
body[data-skin="liner"] .stage-header .artist {
  display: block !important; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ln-soft) !important; font: 400 clamp(12px, 1.05vw, 15px)/1 var(--ln-serif); letter-spacing: 0.26em;
  font-variant-caps: all-small-caps; text-transform: lowercase; opacity: 1 !important;
}
body[data-skin="liner"] .header-meta { opacity: 1 !important; position: fixed; top: calc(var(--ln-m) + 20px); right: calc(var(--ln-m) + var(--ln-pad)); }
body[data-skin="liner"] .theme-menu summary {
  width: auto !important; min-height: 30px; padding: 0 2px 2px; display: flex; background: none; border: 0;
  border-bottom: 1px solid var(--ln-hair); color: var(--ln-ink);
}
body[data-skin="liner"] .theme-menu summary strong { color: var(--ln-ink); font: italic 400 14px/1.2 var(--ln-serif); letter-spacing: 0; text-transform: none; }
body[data-skin="liner"] .theme-menu-list,
body[data-skin="liner"] .more-controls-menu {
  background: var(--ln-paper); color: var(--ln-ink); border: 1px solid var(--ln-ink); box-shadow: 0 10px 26px oklch(10% 0.01 50 / 0.4);
}
body[data-skin="liner"] .theme-menu-list button strong { font-family: var(--ln-serif); font-weight: 400; }
body[data-skin="liner"] .theme-menu-list button:hover,
body[data-skin="liner"] .theme-menu-list button.active { background: oklch(25% 0.02 50 / 0.07); border-color: var(--ln-hair); }
body[data-skin="liner"] .theme-menu-list button.active strong { font-style: italic; }

/* ---- track list ------------------------------------------------------ */
body[data-skin="liner"] .touch-track-list {
  display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: none !important; margin: 0;
  padding: 0 0 0 1.6em; overflow-y: auto; scrollbar-width: none;
}
body[data-skin="liner"] .touch-track-list::-webkit-scrollbar { display: none; }
body[data-skin="liner"] .touch-track-row {
  position: relative; width: 100%; flex: 1 0 auto; min-height: 56px; padding: 6px 0; display: flex; align-items: center; gap: 1.1em;
  border: 0; border-bottom: 1px dotted var(--ln-hair); border-radius: 0; background: none; color: var(--ln-ink); text-align: left;
  opacity: 1 !important; transform: none !important; overflow: visible; counter-increment: ln-track; cursor: pointer;
}
body[data-skin="liner"] .touch-track-row:first-child:nth-last-child(-n+4),
body[data-skin="liner"] .touch-track-row:first-child:nth-last-child(-n+4) ~ .touch-track-row { flex-grow: 0; }
body[data-skin="liner"] .touch-track-row:last-child { border-bottom-color: transparent; }
body[data-skin="liner"] .touch-track-row::after {
  content: counter(ln-track, lower-roman) "."; order: -1; flex: 0 0 2.6em; position: static; display: block; width: auto; height: auto;
  background: none; opacity: 0.6; font-variant-numeric: tabular-nums; color: var(--ln-ink); font: 400 clamp(15px, 1.35vw, 19px)/1 var(--ln-serif); text-align: right;
}
body[data-skin="liner"] .touch-track-row .title {
  flex: 1 1 auto; min-width: 0; color: var(--ln-ink); font: 400 clamp(19px, 1.9vw, 28px)/1.25 var(--ln-serif);
  letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-align: left;
}
body[data-skin="liner"] .touch-track-row:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--ln-hair); }
body[data-skin="liner"] .touch-track-row::before { content: ""; display: none; }
body[data-skin="liner"] .touch-track-row.is-active { color: var(--ln-ink); background: none; }
body[data-skin="liner"] .touch-track-row.is-active::before {
  content: "\00b6"; display: block; position: absolute; left: -22px; top: 50%; margin-top: -0.62em; width: auto; height: auto; background: none;
  transform: none; opacity: 1; color: var(--ln-ox); font: 400 clamp(19px, 1.9vw, 28px)/1.25 var(--ln-serif);
}
body[data-skin="liner"] .touch-track-row.is-active::after { opacity: 1; }
body[data-skin="liner"] .touch-track-row:focus-visible { outline: 1px solid var(--ln-ox); outline-offset: 2px; }

/* ---- running head & folio ------------------------------------------- */
body[data-skin="liner"] .legacy-track-copy {
  position: absolute; inset: 0; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  pointer-events: none; color: var(--ln-soft);
}
body[data-skin="liner"] #trackIndex {
  position: absolute; left: 0; right: 0; bottom: 14px; display: block; text-align: center;
  font: 400 12px/1 var(--ln-serif); letter-spacing: 0.2em; font-variant-numeric: oldstyle-nums;
}
body[data-skin="liner"] #trackIndex::before { content: "\2014\00a0"; }
body[data-skin="liner"] #trackIndex::after { content: "\00a0\2014"; }

/* ---- colophon controls ---------------------------------------------- */
body[data-skin="liner"] {
  --ln-glyph-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d251f' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5.5 5v14M19 5.5 8.5 12 19 18.5z'/%3E%3C/svg%3E");
  --ln-glyph-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d251f' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18.5 5v14M5 5.5 15.5 12 5 18.5z'/%3E%3C/svg%3E");
  --ln-glyph-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d251f' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 5.5 18.5 12 8 18.5z'/%3E%3C/svg%3E");
  --ln-glyph-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d251f' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9.5 5.5v13M14.5 5.5v13'/%3E%3C/svg%3E");
}
body[data-skin="liner"] .control-dock,
body[data-skin="liner"] .control-dock.is-visible {
  position: fixed; inset: auto calc(var(--ln-m) + var(--ln-pad)) calc(var(--ln-m) + 30px) calc(50% + var(--ln-pad));
  width: auto; height: auto; min-height: 0; padding: 18px 0 0; display: grid; grid-template-columns: 1fr;
  grid-template-areas: "timeline" "transport" "utilities"; align-items: center; justify-items: stretch; gap: 14px;
  border: 0; border-top: 1px solid var(--ln-ink); border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; color: var(--ln-ink); z-index: 55;
}
body[data-skin="liner"] .stage-header .artist:empty { display: none !important; }
body[data-skin="liner"] .stage-footer { position: static !important; grid-area: timeline; width: 100%; height: auto; padding: 0; display: block; background: none; color: var(--ln-ink); }
body[data-skin="liner"] .progress-track { height: 1px; background-color: var(--ln-hair); border-radius: 0; }
body[data-skin="liner"] .progress-track i { background: var(--ln-ink); box-shadow: none; }
body[data-skin="liner"] .progress-track i::after {
  right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ln-paper); border: 1px solid var(--ln-ink);
  box-shadow: none; opacity: 1; transform: translateY(-50%);
}
body[data-skin="liner"] .time-row { margin-top: 14px; color: var(--ln-soft); font: 400 11px/1 var(--ln-serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.12em; }
body[data-skin="liner"] .primary-controls { grid-area: transport; gap: 10px; justify-self: center; display: flex; align-items: center; }
body[data-skin="liner"] .utility-controls {
  grid-area: utilities; justify-self: stretch; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; width: auto;
}
body[data-skin="liner"] .control-dock button,
body[data-skin="liner"] .control-dock .app-repo-link,
body[data-skin="liner"] .more-controls summary {
  min-height: 30px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--ln-ink);
  font: 400 12px/1 var(--ln-serif); font-variant-caps: all-small-caps; letter-spacing: 0.16em; text-decoration: none; text-transform: lowercase;
}
body[data-skin="liner"] .utility-controls [aria-hidden="true"] { display: none !important; }
body[data-skin="liner"] .utility-controls .control-label { display: inline !important; }
body[data-skin="liner"] .control-dock .utility-controls button, body[data-skin="liner"] .control-dock .utility-controls .app-repo-link { width: auto !important; min-width: 0; height: auto; }
body[data-skin="liner"] .utility-controls #mappingBtn::before,
body[data-skin="liner"] .utility-controls .app-repo-link::before { content: "\00b7"; display: inline-block; margin-right: 10px; letter-spacing: 0; font-size: 16px; line-height: 1; font-style: normal; vertical-align: middle; }
body[data-skin="liner"] .control-dock button:hover,
body[data-skin="liner"] .control-dock .app-repo-link:hover,
body[data-skin="liner"] .more-controls summary:hover { background: none; color: var(--ln-ox); }
body[data-skin="liner"] .control-dock .primary-controls button {
  min-width: 40px; width: 40px; height: 40px; padding: 0; border: 0; font-size: 0; background: var(--ln-glyph-prev) center / 22px no-repeat;
}
body[data-skin="liner"] .control-dock .primary-controls #nextBtn { background-image: var(--ln-glyph-next); }
body[data-skin="liner"] .control-dock .primary-controls .play-button {
  min-width: 46px; width: 46px; height: 46px; border: 1px solid var(--ln-ink); border-radius: 50%; background: none; margin: 0 4px;
}
body[data-skin="liner"]:not(.is-playing) .control-dock .primary-controls .play-icon,
body[data-skin="liner"].is-playing .control-dock .primary-controls .play-icon {
  width: 24px; height: 24px; border: 0; transform: none; background: var(--ln-glyph-play) center / 24px no-repeat; color: var(--ln-ink);
}
body[data-skin="liner"].is-playing .control-dock .primary-controls .play-icon { background-image: var(--ln-glyph-pause); }
body[data-skin="liner"] .volume-control { display: flex !important; margin: 0 auto 0 0; gap: 6px; color: var(--ln-soft); }
body[data-skin="liner"] .volume-control > span { display: none !important; }
body[data-skin="liner"] .volume-control input {
  -webkit-appearance: none; appearance: none; width: 72px; height: 14px; background: none; accent-color: var(--ln-ink); cursor: pointer;
}
body[data-skin="liner"] .volume-control input::-webkit-slider-runnable-track { height: 1px; background: var(--ln-hair); border: 0; }
body[data-skin="liner"] .volume-control input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3.5px; border-radius: 50%; background: var(--ln-ink); border: 0; box-shadow: none;
}
body[data-skin="liner"] .volume-control input::-moz-range-track { height: 1px; background: var(--ln-hair); border: 0; }
body[data-skin="liner"] .volume-control input::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--ln-ink); border: 0; box-shadow: none; }
body[data-skin="liner"] .more-controls summary { width: auto; letter-spacing: 0.2em; }
body[data-skin="liner"] .more-controls-menu button { min-height: 34px; padding: 0 6px; border-bottom: 1px dotted var(--ln-hair); }
body[data-skin="liner"] .toggle-track { border-radius: 0; border-color: var(--ln-soft); background: none; }
body[data-skin="liner"] .toggle-track i { border-radius: 0; background: var(--ln-soft); }
body[data-skin="liner"] .setting-toggle[aria-pressed="true"] .toggle-track { border-color: var(--ln-ink); background: none; }
body[data-skin="liner"] .setting-toggle[aria-pressed="true"] .toggle-track i { background: var(--ln-ink); }
@media (max-width: 1240px) and (min-width: 821px) {
  body[data-skin="liner"] .volume-control { display: none !important; }
}

/* ---- recording mode -------------------------------------------------- */
body[data-skin="liner"][data-clean="true"] .stage { inset: 0 !important; }
body[data-skin="liner"][data-clean="true"] .stage-header,
body[data-skin="liner"][data-clean="true"] .control-dock { display: none !important; }

/* ---- overlays on paper ---------------------------------------------- */
body[data-skin="liner"] .welcome-card,
body[data-skin="liner"] .mapping-card {
  background: var(--ln-fibre), var(--ln-paper); color: var(--ln-ink); border: 1px solid var(--ln-ink); border-radius: 0;
  box-shadow: 0 18px 50px oklch(8% 0.01 50 / 0.5);
}
body[data-skin="liner"] .welcome-eyebrow, body[data-skin="liner"] .format-tip, body[data-skin="liner"] .format-tip span,
body[data-skin="liner"] .welcome-card p, body[data-skin="liner"] .album-picker, body[data-skin="liner"] .album-picker * { color: var(--ln-soft); }
body[data-skin="liner"] .welcome-card p b, body[data-skin="liner"] .welcome-card h2, body[data-skin="liner"] .format-tip code { color: var(--ln-ink); }
body[data-skin="liner"] .toast { border-radius: 0; background: var(--ln-ink); color: var(--ln-paper); font-family: var(--ln-serif); }

/* ---- mobile: one page, fold between cover and paper ------------------ */
@media (max-width: 820px) {
  body[data-skin="liner"] { --ln-m: 12px; --ln-pad: 24px; --ln-cover: min(100vw - 24px, 31vh); }
  body[data-skin="liner"] .app { padding-bottom: 0 !important; }
  body[data-skin="liner"] .stage-header {
    position: relative; height: 44px; padding: 0 var(--ln-m); display: flex; align-items: center; justify-content: space-between; pointer-events: auto;
  }
  body[data-skin="liner"] .wordmark { position: static; transform: none; text-indent: 0; }
  body[data-skin="liner"] .header-meta { position: static; margin: 0; }
  body[data-skin="liner"] .theme-menu summary { border-bottom-color: oklch(80% 0.03 80 / 0.4); }
  body[data-skin="liner"] .theme-menu summary strong { color: oklch(88% 0.03 80); }
  body[data-skin="liner"] .stage-header .brand-block {
    position: absolute; top: calc(44px + var(--ln-cover) + 22px); left: calc(var(--ln-m) + var(--ln-pad)); right: calc(var(--ln-m) + var(--ln-pad));
  }
  body[data-skin="liner"] .stage {
    position: relative !important; inset: auto !important; margin: 0 var(--ln-m); display: block !important; min-height: 0 !important; overflow: visible !important;
  }
  body[data-skin="liner"] .stage::after { inset: 0 -6px -200px; }
  body[data-skin="liner"] .art-shell { width: 100% !important; height: var(--ln-cover); }
  body[data-skin="liner"] .art-frame img { object-fit: contain; background: var(--ln-table); }
  body[data-skin="liner"] .stage::before {
    inset: auto; top: var(--ln-cover); left: 0; width: 100%; height: 50px; transform: translateY(-50%);
    background:
      linear-gradient(to bottom, transparent 49%, oklch(8% 0.02 50 / 0.7) 49% 50%, oklch(98% 0.02 80 / 0.35) 50% 51%, transparent 51%),
      linear-gradient(to bottom, transparent, oklch(10% 0.02 50 / 0.4) 44%, oklch(10% 0.02 50 / 0.6) 49%, oklch(20% 0.03 55 / 0.3) 52%, transparent 100%);
  }
  body[data-skin="liner"] .touch-album-panel { display: block !important; height: auto; padding: 38px var(--ln-pad) 150px !important; overflow: visible !important; }
  body[data-skin="liner"] .touch-album-heading h2 { font-size: clamp(28px, 8.4vw, 38px); }
  body[data-skin="liner"] .touch-track-list { display: block !important; overflow: visible !important; }
  body[data-skin="liner"] .touch-track-row { min-height: 56px; }
  body[data-skin="liner"] .utility-controls #loadFolderBtn, body[data-skin="liner"] .utility-controls #mappingBtn { font-size: 11px !important; padding: 0 2px !important; }
  body[data-skin="liner"] .touch-track-row .title { font-size: clamp(19px, 5.4vw, 23px); }
  body[data-skin="liner"] .legacy-track-copy { position: static; }
  body[data-skin="liner"] #trackIndex { position: static; margin-top: 26px; }
  body[data-skin="liner"] .control-dock,
  body[data-skin="liner"] .control-dock.is-visible {
    inset: auto var(--ln-m) 0 var(--ln-m); padding: 10px 18px 8px; gap: 2px; background: var(--ln-paper);
    box-shadow: 0 -8px 18px oklch(10% 0.01 50 / 0.3);
  }
  body[data-skin="liner"] .volume-control { display: none !important; }
  body[data-skin="liner"] .primary-controls { gap: 14px; }
  body[data-skin="liner"] .time-row { margin-top: 8px; }
  body[data-skin="liner"] .control-dock .primary-controls button { width: 34px; min-width: 34px; height: 34px; }
  body[data-skin="liner"] .control-dock .primary-controls .play-button { width: 40px; min-width: 40px; height: 40px; }
  body[data-skin="liner"] .utility-controls { flex-wrap: nowrap; gap: 0 4px; justify-content: center; }
  body[data-skin="liner"] .control-dock .utility-controls button,
  body[data-skin="liner"] .control-dock .utility-controls .app-repo-link,
  body[data-skin="liner"] .utility-controls .more-controls summary { min-height: 28px; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; width: auto !important; }
  body[data-skin="liner"] .utility-controls #mappingBtn::before, body[data-skin="liner"] .utility-controls .app-repo-link::before { margin: 0 5px 0 0; }
  body[data-skin="liner"] .control-dock .utility-controls > :not(.volume-control), body[data-skin="liner"] .control-dock .utility-controls > button, body[data-skin="liner"] .control-dock .utility-controls .app-repo-link { flex: none !important; overflow: visible !important; min-width: max-content !important; display: inline-flex !important; align-items: center; letter-spacing: 0.06em !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="liner"] .art-frame, body[data-skin="liner"] .touch-track-row { animation: none !important; transition: none !important; }
  /* no infinite grain drift or progress breathing when the OS asks for less motion */
  body[data-skin="liner"].is-playing .touch-album-panel,
  body[data-skin="liner"].is-playing .progress-track i,
  body[data-skin="liner"].is-playing .progress-track i::after { animation: none !important; }
}