/* The blank page (blank.js): the score's pane over the whole window, the
   rest of the studio laid out as it was underneath, out of sight. */

.btn.blank-open .glyph {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------- the page */

.studio.blank .pane-top,
.studio.compact.blank .pane-top {
  display: flex;
  position: fixed;
  inset: 0;
  /* Over the studio, under its dialogs, toasts and menus. */
  z-index: 40;
  min-height: 0;
  /* A phone in the browser's or the agent's view hides the workspace; the page shows anyway. */
  visibility: visible;
  /* Clear of a phone's notch and rounded corners (what sits at the edges below adds the same). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--blank-desk);
  animation: blank-in 0.32s var(--ease-pane) both;
  --blank-desk: #151217;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
/* The film's cinema covers the window from inside the page, so the page rises with it. */
.studio.blank .pane-top:has(.film.cinema) {
  z-index: 1000;
}
/* The film has its own ribbon and its way back to the page: the corner steps aside. */
.studio.blank .pane-top:has(.score.filming) > :is(.blank-ctl, .blank-tip) {
  display: none;
}
@keyframes blank-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}
.studio.blank .pane-top > .tabs {
  display: none;
}
.studio.blank .pane-top > .dock-body {
  background: transparent;
}

/* What the page would otherwise cover: the studio reconnecting, files on disk it could not read. */
.studio.blank .workspace > .banner {
  position: fixed;
  z-index: 45;
  top: calc(10px + var(--safe-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* A quiet desk: one even tone, a soft lamp, no frame on the paper. */
.studio.blank .score {
  position: relative;
  --desk: var(--blank-desk);
}
.studio.blank .score.night {
  --desk: #08070a;
}
.studio.blank .score-lamp {
  /* A desk lamp just off the upper left: a wide, warm pool of light over most of
     the page, falling off quickly into shadow near the edges, deepest in the
     corners. It stays put as the page scrolls. */
  background:
    radial-gradient(75% 85% at 32% -6%, rgba(255, 228, 168, 0.28), rgba(255, 228, 168, 0.14) 50%, transparent 88%),
    radial-gradient(ellipse farthest-corner at 46% 44%, transparent 58%, rgba(52, 30, 8, 0.22) 76%, rgba(12, 7, 2, 0.8) 100%);
}
.studio.blank .score.night .score-lamp {
  background:
    radial-gradient(75% 85% at 32% -6%, rgba(255, 220, 150, 0.15), rgba(255, 220, 150, 0.07) 50%, transparent 88%),
    radial-gradient(ellipse farthest-corner at 46% 44%, transparent 58%, rgba(0, 0, 0, 0.28) 76%, rgba(0, 0, 0, 0.85) 100%);
}
.studio.blank .score-paper::after {
  border-color: transparent;
}
.studio.blank .score-paper {
  box-shadow:
    inset 0 0 calc(var(--sp) * 6) rgba(150, 106, 38, 0.08),
    0 0 0 1px rgba(120, 96, 52, 0.12),
    0 24px 70px rgba(0, 0, 0, 0.55);
}
.studio.blank .score.night .score-paper {
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.12),
    0 24px 70px rgba(0, 0, 0, 0.7);
}
.studio.blank .score-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* ---------------------------------------------------------------- the ribbon, out of the way */

/* It floats over the page instead of pushing it down, and waits above the top edge. */
.studio.blank .score-ribbon-dock {
  /* A strip along the top edge: under the pointer it brings the ribbon down, and
     keeps it down while the pointer is on the strip or the ribbon (its child,
     however far below). Down, it stays while one of its menus or sliders is in
     use, or the keyboard is in it. */
  display: block;
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
}
.studio.blank .score-ribbon-dock > .score-ribbon {
  position: absolute;
  top: 10px;
  /* Centered between the corners, scrolling sideways when its tools do not fit. */
  left: 50%;
  width: max-content;
  max-width: calc(100% - 400px);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(22, 19, 26, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0;
  transition:
    transform 0.24s var(--ease-pane),
    opacity 0.2s;
}
.studio.blank .score-ribbon-dock:hover > .score-ribbon,
.studio.blank .score-ribbon-dock > .score-ribbon:has(:focus-visible, select:focus, input:focus),
.studio.blank.blank-tools .score-ribbon-dock > .score-ribbon {
  transform: translate(-50%, 0);
  opacity: 1;
}
.studio.blank .score-ribbon-dock > .score-ribbon > .score-spacer {
  flex: none;
  width: 1px;
  min-width: 1px;
  align-self: stretch;
  margin: 4px 6px;
  background: var(--line-2);
}

/* A narrow window: the ribbon takes a row of its own under the corner, as wide
   as the window (the page moves down for it when it is pinned, score.js). The
   strip grows down to it while it shows. */
.studio.blank-narrow .score-ribbon-dock > .score-ribbon {
  top: 48px;
  left: 8px;
  right: 8px;
  width: auto;
  max-width: none;
  transform: translateY(calc(-100% - 60px));
}
.studio.blank-narrow .score-ribbon-dock:hover > .score-ribbon,
.studio.blank-narrow .score-ribbon-dock > .score-ribbon:has(:focus-visible, select:focus, input:focus),
.studio.blank-narrow.blank-tools .score-ribbon-dock > .score-ribbon {
  transform: translateY(0);
}
.studio.blank-narrow .score-ribbon-dock:hover {
  height: 50px;
}

/* ---------------------------------------------------------------- the sidebar, as a drawer */

.studio.blank .score > .score-side {
  position: absolute;
  z-index: 5;
  top: 12px;
  bottom: 12px;
  left: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(18, 16, 22, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: blank-drawer 0.24s var(--ease-pane) both;
}
.studio.blank .score > .score-side.off {
  display: none;
}
@keyframes blank-drawer {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}
.studio.compact.blank .score > .score-side:not(.off) {
  display: block;
  top: 56px;
  right: 12px;
  width: auto;
}

/* ---------------------------------------------------------------- the corner */

/* Faint until the pointer comes near; full as it rests on a button. */
.blank-ctl {
  position: absolute;
  z-index: 7;
  top: calc(10px + var(--safe-top));
  right: calc(14px + var(--safe-right));
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  opacity: 0.28;
  transition:
    opacity 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.blank-ctl:hover,
.blank-ctl:focus-within,
.studio.blank-tools .blank-ctl {
  opacity: 1;
  background: rgba(22, 19, 26, 0.88);
  border-color: var(--line-2);
  backdrop-filter: blur(10px);
}
.blank-ctl .btn:not(.on) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.blank-ctl .btn:not(.on):hover {
  background: rgba(212, 175, 55, 0.08);
}
.blank-leave {
  gap: 5px;
  margin-left: 2px;
}

/* Said once as the page opens, then gone. */
.blank-tip {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 7px 14px;
  border-radius: 14px;
  background: rgba(14, 12, 17, 0.8);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
  pointer-events: none;
  animation: blank-tip 6s ease both;
}
@keyframes blank-tip {
  0%,
  8% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  16%,
  78% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
  }
}
.blank-tip-touch {
  display: none;
}

/* ---------------------------------------------------------------- touch */

/* Nothing hovers: the corner stays readable, and the tip names it instead of the top edge. */
@media (hover: none) {
  .blank-ctl {
    opacity: 1;
    background: rgba(22, 19, 26, 0.88);
    border-color: var(--line-2);
    backdrop-filter: blur(10px);
  }
  .blank-tip-pointer {
    display: none;
  }
  .blank-tip-touch {
    display: inline;
  }
}