/*
  Make a Sweet Beet styles.
*/

:root {
  --tile-size: clamp(118px, 18vw, 156px);
  --gap: 14px;
  /* Rhythm cards run 15% smaller than they used to (122 -> 104 at the cap), so
     the dock can give the measures back their vertical room. --dock-height
     comes down with them, plus the ~23px the removed "Rhythm Cards" heading
     was taking. */
  --dock-height: clamp(232px, 29vh, 298px);
  --bank-unit: clamp(82px, 8.5vw, 104px);
  --bank-gap: 12px;
  --bg1: #fffdf7;
  --bg2: #f7fff9;
  --ink: #23403a;
  --soft-ink: #67817a;
  --panel: #ffffff;
  --panel-border: #dbeee4;
  --teal: #159a8c;
  --teal-dark: #0e7e72;
  --red: #ef726a;
  --red-dark: #d75c54;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", "Avenir Next Rounded", "Trebuchet MS", "Verdana", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255, 201, 134, 0.2), transparent 48%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  padding: 14px;
}

body.sweet-beet-page .shopify-section-group-header-group,
body.sweet-beet-page #shopify-section-header,
body.sweet-beet-page [id*="shopify-section"][id*="header"],
body.sweet-beet-page .shopify-section-group-footer-group,
body.sweet-beet-page #shopify-section-footer,
body.sweet-beet-page [id*="shopify-section"][id*="footer"],
body.sweet-beet-page [id*="shopify-section"][id*="announcement"] {
  display: none !important;
}

body.sweet-beet-page #MainContent,
body.sweet-beet-page main#MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.app {
  width: min(1120px, 100%);
  margin: 0 auto;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: 30px;
  box-shadow: 0 16px 36px rgba(38, 71, 64, 0.08);
  overflow: hidden;
  position: relative;
}

.screen {
  padding: 22px 16px 24px;
  position: relative;
}

#gameScreen {
  padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom) + 28px);
}

.boot-loader {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  gap: 10px;
  background: rgba(255, 252, 246, 0.92);
  backdrop-filter: blur(1px);
  transition: opacity 0.18s ease;
}

.boot-loader.done {
  opacity: 0;
}

.boot-loader-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #d9eadf;
  border-top-color: var(--teal);
  animation: bootSpin 0.82s linear infinite;
}

.boot-loader-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #3d6f66;
  letter-spacing: 0.01em;
}

@keyframes bootSpin {
  to { transform: rotate(360deg); }
}

button {
  border: 0;
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

button:active {
  transform: translateY(2px);
  filter: brightness(0.98);
}

.teal-btn {
  background: var(--teal);
  box-shadow: 0 8px 0 var(--teal-dark), 0 12px 24px rgba(21, 154, 140, 0.24);
}

.red-btn {
  background: var(--red);
  box-shadow: 0 8px 0 var(--red-dark), 0 12px 24px rgba(215, 92, 84, 0.2);
}

.progress {
  margin: 6px 0 10px;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: #4a746b;
}

.song-row {
  display: flex;
  justify-content: center;
  margin: 0 0 2px;
  padding: 0 56px;
  position: relative;
}

.song-name-input {
  flex: 0 1 560px;
  min-width: 0;
  height: auto;
  border: 0;
  border-bottom: 2px solid #d8ece3;
  border-radius: 0;
  padding: 2px 10px 8px;
  font-size: clamp(1.38rem, 3.6vw, 2rem);
  font-weight: 900;
  color: #1e5b4d;
  background: transparent;
  text-align: center;
}

.song-name-input:focus {
  outline: none;
  border-color: #90d6ca;
}

.song-name-input::placeholder {
  color: #88a39b;
}

.song-save-btn,
.song-load-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 12px;
}

.saved-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(500px, calc(100vw - 42px));
  max-height: min(56vh, 430px);
  overflow: auto;
  border: 2px solid #d9ece3;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 14px 28px rgba(37, 63, 58, 0.12);
  z-index: 32;
}

.saved-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #2f6357;
}

.saved-list {
  display: grid;
  gap: 10px;
}

.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid #e6f3ed;
  background: linear-gradient(180deg, #fffefb, #f9fffc);
}

.saved-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.saved-meta span:first-child {
  font-weight: 900;
  color: #21463d;
}

.saved-meta span:last-child {
  font-size: 0.86rem;
  color: var(--soft-ink);
}

.saved-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.saved-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--soft-ink);
  font-weight: 800;
}

.mini-btn {
  min-width: 72px;
  padding: 10px 12px;
  font-size: 0.86rem;
}

.control-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  padding: 0 56px;
}

.settings {
  width: min(560px, calc(100vw - 42px));
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  border: 2px solid #dcefe7;
  background: #fffefb;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(92px, 120px) 1fr minmax(46px, 56px);
  align-items: center;
  gap: 10px;
}

.setting-row-modes {
  grid-template-columns: minmax(92px, 120px) 1fr;
}

.setting-label {
  font-weight: 900;
  color: #35685d;
  font-size: 0.84rem;
}

.setting-value {
  text-align: center;
  font-weight: 900;
  color: #16574d;
  background: #ffffff;
  border-radius: 999px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #dcefe7;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.mode-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #dcefe7;
  flex-wrap: wrap;
}

.mode-btn {
  padding: 10px 16px;
  min-height: 38px;
  border-radius: 999px;
  background: transparent;
  color: #3a6d62;
  box-shadow: none;
}

.mode-btn.active {
  background: #159a8c;
  color: #fff;
  box-shadow: none;
}

.toolbar {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 900px;
  position: relative;
}

.transport-primary,
.transport-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.transport-primary {
  gap: 12px;
}

.transport-secondary {
  gap: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.transport-btn {
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.play-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #43c36a;
  box-shadow: none;
}

.play-circle.micro-celebrate {
  animation: playCelebratePulse 760ms ease;
}

@keyframes playCelebratePulse {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.08); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

.play-triangle {
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}

.stop-octagon {
  width: 54px;
  height: 54px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background: #ef726a;
  box-shadow: none;
}

.stop-square {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 3px;
}

.tool-icon-btn {
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffffff;
  color: #3c6f64;
  border: 2px solid #dcefe7;
  box-shadow: none;
}

.tool-icon-btn.active {
  background: #159a8c;
  color: #fff;
  border-color: #159a8c;
}

.library-ui,
.settings-ui {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 32;
}

.tool-icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message {
  min-height: 22px;
  margin: 0 0 6px;
  text-align: center;
  font-weight: 800;
  color: #2d675c;
}

.help-ui {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));   /* not beside the iPhone island */
  right: 16px;
  z-index: 24;
}

.help-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  padding: 0;
  background: linear-gradient(180deg, #ffffff, #f2faf6);
  color: #367166;
  border: 2px solid #dcefe7;
}

.help-popover {
  position: absolute;
  top: 40px;
  right: 0;
  width: min(320px, calc(100vw - 42px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid #dcefe7;
  background: rgba(255, 255, 255, 0.96);
  color: #355e55;
  font-size: 0.92rem;
  line-height: 1.45;
  box-shadow: 0 18px 30px rgba(36, 64, 59, 0.16);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.help-ui.open .help-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.print-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.35rem;
  color: #204840;
}

.slots-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 4px 14px;
  position: relative;
}

.slots-grid {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  gap: var(--gap);
  padding: 4px;
}

.slot {
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 28px;
  border: 3px dashed #cfe5da;
  background: linear-gradient(180deg, #fffdf9, #f4fcf7);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  overflow: visible;
}

/* the + under the last measure: two more measures in one tap (Rob, 2026-10-20) */
.add-measures {
  grid-column: 1 / -1;
  height: max(56px, calc(var(--tile-size) * 0.42));
  margin: 2px 0 0;
  padding: 0;
  border-radius: 28px;
  border: 3px dashed #cfe5da;
  background: rgba(255, 255, 255, 0.6);
  color: #5f8a7e;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background-color 0.15s ease;
}
.add-measures svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.add-measures:hover { background: #fff; }
.add-measures:active { transform: scale(0.98); }
.add-measures:focus-visible { outline: 3px solid var(--teal, #159a8c); outline-offset: 3px; }
body.is-v2 .add-measures { background: rgba(255, 255, 255, 0.72); border-color: rgba(27, 35, 62, 0.22); color: #1b233e; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.08); }
@media print { .add-measures { display: none !important; } }

.slot.filled {
  border-style: solid;
  border-color: rgba(53, 111, 98, 0.22);
}

.slot.filled,
.slot.tail-only {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.slot.filled .slot-num,
.slot.tail-only .slot-num {
  opacity: 0.26;
}

.slot.playing {
  border-color: var(--teal);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.92),
    0 0 0 6px rgba(21, 154, 140, 0.18);
}

.slot.preview-valid {
  border-color: #66b95a;
  box-shadow: 0 0 0 5px rgba(102, 185, 90, 0.16);
}

.slot.preview-invalid {
  border-color: #e8837c;
  box-shadow: 0 0 0 5px rgba(232, 131, 124, 0.16);
}

.slot-num {
  position: absolute;
  right: 10px;
  top: 8px;
  z-index: 7;
  font-size: 0.82rem;
  font-weight: 900;
  color: #769087;
  background: #ffffffd9;
  border-radius: 999px;
  padding: 3px 8px;
  line-height: 1;
}

.measure-overlays {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 4;
}

.measure-num {
  position: absolute;
  font-size: 0.66rem;
  font-weight: 900;
  color: #86a198;
  line-height: 1;
  white-space: nowrap;
}

.slot-rest {
  font-size: 1.06rem;
  font-weight: 900;
  color: #9aaea8;
}

.slot-tail-fill {
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--rhythm-color-1, #dbeee4), var(--rhythm-color-2, #c6e5d7));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(34, 60, 54, 0.12);
  display: grid;
  place-items: center;
}

.slot-tail-fill.accented {
  box-shadow:
    inset 0 0 0 2px rgba(255, 249, 217, 0.95),
    0 0 0 3px rgba(247, 192, 63, 0.55),
    0 2px 6px rgba(34, 60, 54, 0.16);
}

.slot-tail-fill-text {
  font-size: 0.76rem;
  font-weight: 900;
  color: rgba(35, 64, 58, 0.58);
  letter-spacing: 0.02em;
}

.playhead {
  position: absolute;
  z-index: 15;
  /* Horizontal pill on the LEFT of the card, pointing inward (X axis) */
  width: 22px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(21, 154, 140, 0.92), rgba(21, 154, 140, 0.36));
  box-shadow: 0 0 12px rgba(21, 154, 140, 0.28);
  transform: translateY(-50%);
  transition: left 0.09s linear, top 0.09s linear, opacity 0.12s ease;
  pointer-events: none;
}

.count-in-overlay {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 18;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #d7ebe3;
  background: rgba(255, 255, 255, 0.95);
  color: #2d675c;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(34, 61, 116, 0.1);
  white-space: nowrap;
}

.bank-dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 28px));
  z-index: 70;
  pointer-events: none;
}

.bank-dock-inner {
  pointer-events: auto;
  border-radius: 26px 26px 0 0;
  background: #009999;
  border: 0;
  box-shadow: none;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
}

.tray-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.bank-area {
  /* Was 34px, which reserved room for the removed .tray-title. */
  max-height: calc(var(--dock-height) - 14px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
}

.bank-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--bank-gap);
  width: max-content;
  margin: 0 auto;
}

/* 1.0.2: on an upright iPad the tray wraps to two rows of full-size cards instead of panning (fitBank) */
.bank-area.is-wrapped { overflow-x: hidden; }
.bank-area.is-wrapped .bank-grid { width: auto; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 10px; }
.bank-area.is-wrapped .bank-divider { display: none; }

.bank-divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 4px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.rhythm-card {
  position: relative;
  width: 100%;
  min-height: 94px;
  border-radius: 24px;
  padding: 16px 16px 14px;
  background: var(--rhythm-flat-bg, rgba(0, 0, 0, 0.06));
  color: #1f3e37;
  border: 2px solid var(--rhythm-flat-border, rgba(0, 0, 0, 0.15));
  box-shadow: none;
  display: grid;
  align-content: space-between;
  text-align: left;
  overflow: hidden;
}

.rhythm-card:hover,
.rhythm-card:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.bank-card {
  min-height: var(--bank-unit);
  height: var(--bank-unit);
  flex: 0 0 auto;
  padding: 8px 10px;
}

.slot-card {
  position: absolute;
  inset: 4px;
  width: auto;   /* 1.0.2: .rhythm-card's width:100% beat the right inset, so every card sat 4px right (Rob: "centred better") */
  z-index: 3;
  min-height: 0;
  padding: 6px;
  border-color: rgba(92, 111, 106, 0.28);
}

.slot-card.long-rhythm {
  max-width: none;
  height: calc(100% - 8px);
  border-radius: 28px;
}

.slot-card.accented {
  box-shadow:
    inset 0 0 0 2px rgba(255, 249, 217, 0.92),
    0 0 0 3px rgba(247, 192, 63, 0.46);
}

.slot-card.note-playing {
  transform: translateY(1px) scale(1.03);
  filter: brightness(1.05);
}

.slot-card.playing-step {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.94),
    0 0 0 4px rgba(21, 154, 140, 0.34);
}

.rhythm-card.has-image {
  background: var(--rhythm-flat-bg, rgba(0, 0, 0, 0.08));
  border-color: var(--rhythm-flat-border, rgba(0, 0, 0, 0.15));
}

.slot-card.has-image {
  border-color: rgba(92, 111, 106, 0.28);
}

.rhythm-art {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: none;
}

.bank-card.has-image .rhythm-art {
  max-height: calc(var(--bank-unit) - 16px);
}

.slot-card.has-image .rhythm-art {
  max-width: 100%;
  max-height: 100%;
}

.image-card {
  padding: 6px;
  align-content: center;
  justify-items: center;
}

.image-slot-card {
  padding: 4px;
}

.image-slot-card.long-rhythm {
  padding: 0;
  align-content: center;
}

.rhythm-name {
  display: block;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.rhythm-meta {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.rhythm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 900;
  color: rgba(31, 62, 55, 0.86);
}

.rhythm-syllables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rhythm-syllable {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: center;
  color: rgba(31, 62, 55, 0.88);
}

.image-card .rhythm-syllables {
  display: none;
}

.rhythm-card.rest-card .rhythm-syllable {
  min-width: 52px;
}

.accent-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 241, 191, 0.96);
  color: #8a6200;
  font-size: 0.74rem;
  font-weight: 900;
  box-shadow: none;
}

.image-slot-card.long-rhythm .accent-badge {
  right: 10px;
  bottom: 10px;
}

.rhythm-strip {
  display: grid;
  grid-template-columns: repeat(var(--segment-count, 2), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: var(--rhythm-flat-bg, rgba(0, 0, 0, 0.08));
}

.rhythm-segment {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 100%;
  background: var(--rhythm-flat-bg, rgba(0, 0, 0, 0.08));
}

.rhythm-strip-art {
  width: auto;
  max-width: 86%;
  max-height: 78%;
  object-fit: contain;
  opacity: 0.6;
  transform: rotate(var(--segment-rotate, 0deg));
  pointer-events: none;
}

.rhythm-segment:first-child .rhythm-strip-art {
  opacity: 1;
}

.drag-ghost {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  opacity: 0.94;
  transform: rotate(-3deg) scale(1.02);
}

@media (max-width: 860px) {
  :root {
    --tile-size: clamp(100px, 22vw, 132px);
    --gap: 10px;
    --dock-height: clamp(240px, 33vh, 325px);
    --bank-unit: clamp(75px, 10.2vw, 90px);
    --bank-gap: 10px;
  }

  body {
    padding: 10px;
  }

  .app {
    border-radius: 22px;
  }

  .song-row,
  .control-row {
    padding-right: 42px;
    padding-left: 42px;
  }

  .toolbar {
    max-width: none;
    justify-items: center;
  }

  .bank-dock {
    width: calc(100vw - 20px);
  }
}

@media (max-width: 640px) {
  :root {
    --tile-size: clamp(70px, 18vw, 92px);
    --dock-height: clamp(270px, 37vh, 360px);
    --bank-unit: 71px;
  }

  .song-row {
    padding-left: 12px;
    padding-right: 42px;
  }

  .settings {
    min-width: 0;
  }

  .control-row {
    padding-left: 12px;
    padding-right: 42px;
  }

  .setting-row {
    grid-template-columns: 88px 1fr 48px;
  }

  .settings-popover {
    right: -6px;
  }

}

@media print {
  @page {
    margin: 10mm;
  }

  :root {
    --tile-size: 96px;
    --gap: 8px;
  }

  body {
    background: #fff !important;
    padding: 0;
  }

  .app {
    width: 100%;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .boot-loader,
  .song-row,
  .saved-panel,
  .help-ui,
  .control-row,
  .settings-popover,
  .settings-ui,
  .settings,
  .message,
  .bank-dock,
  .playhead,
  .toolbar {
    display: none !important;
  }

  .runtime-meta {
    display: block !important;
  }

  #gameScreen {
    display: flex !important;
    flex-direction: column;
    padding: 8px 10px 12px;
  }

  .print-title {
    order: 1;
    margin: 0 0 4px;
  }

  .progress {
    order: 2;
    margin: 0 0 10px;
  }

  .slots-wrap {
    order: 3;
    overflow: visible;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 0 0;
  }

  .slots-grid {
    margin: 0 auto;
    grid-template-columns: repeat(4, var(--tile-size));
  }

  .measure-overlays {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH — the drag mechanic does not work on iPad without this.
   
   `onPointerDown` is bound to .bankGrid and .slotsGrid, and both of those sit
   inside `overflow-x: auto` scrollers (.bank-area and .slots-wrap). On iOS the
   browser claims a gesture that starts on a scrollable surface BEFORE any
   pointer handler can react, and `preventDefault()` on a pointer event does
   not take it back — only `touch-action` does. Without these rules, dragging a
   rhythm card pans the strip instead, which is the entire game.

   Scoped to the pieces themselves, not the scrollers, so a child can still
   swipe the strip sideways by dragging the background between cards.
   ══════════════════════════════════════════════════════════════════════════ */
.rhythm-card,
.slot-note {
  touch-action: none;
}

/* The beat BOX is not a draggable piece - only the card in it is. As
   `touch-action: none` every box, even an empty one, swallowed the pan, so on
   an iPad a finger that landed on the board could not scroll the page at all
   (2026-10-12: the board covers most of the screen, so that was most fingers).
   A box hands the browser the pan; a card in it still overrides with `none`,
   because touch-action is the intersection of an element and its ancestors. */
.slot {
  touch-action: manipulation;
}

/* ...with ONE exception, on a phone. When the bank strip is wider than the
   screen, its cards give the browser back the sideways pan - see updateBankPan()
   in the JS. The gestures do not fight, because the strip scrolls sideways and
   cards are dragged UP out of it. Scoped to cards inside the strip, so cards
   already placed in a measure are untouched. */
.bank-area.is-pannable .rhythm-card {
  touch-action: pan-x;
}

/* Reachable is not discoverable: without a cue the strip just looks like it
   ends at the screen edge. A soft right-edge fade, only while there is more to
   see. mask-image rather than an overlay, so it cannot intercept the very
   gesture it advertises. */
.bank-area.is-pannable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}


/* The rest of the page keeps normal scrolling but loses the iOS text-selection
   and callout menus that a long-press on a label otherwise pops over the UI. */
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

/* Hover lift is fine sticky, but keep it off touch so a dragged card does not
   stay raised after the finger lifts. */
@media (hover: none) {
  .rhythm-card:hover { transform: none; }
}

/* Free tier (2026-09-23): only SAVING needs the unlock. The Save button keeps
   working as a door to the wall, so it dims gently and wears the lock chip on
   its corner. Never red, never "error" looking. */
#savePatternBtn.is-locked { position: relative; opacity: .8; }
#savePatternBtn .save-lock-chip { position: absolute; top: -9px; right: -9px; pointer-events: none; line-height: 1; }
#savePatternBtn .save-lock-chip .pmg-lock { padding: 2px 7px; font-size: 10px; box-shadow: 0 1px 3px rgba(27,35,62,.18); background: #fff; }