/* ===================================
   THEME
   The LGT palette, said in Bulma's own variables. Bulma derives every
   component's colours from these; splash.html inherits them too, so the TV
   and the phones read as one show.
   =================================== */
:root {
  /* Bulma applies the family to body and to every form control. Headings take
     the display face below. */
  --bulma-family-primary: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    sans-serif;
  --bulma-family-secondary: "Bricolage Grotesque", "Lato", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* The neutral ramp. Cards are Bulma's scheme-main: the surface Bulma measures
     its stripes, hovers, lines and borders from. The page behind them is the one
     surface beyond Bulma's ramp, a near-black with a purple cast. Bulma keeps
     text on its own hue and saturation, so both pairs are set. */
  --bulma-scheme-h: 275;
  --bulma-scheme-s: 33%;
  --bulma-text-h: 264deg;
  --bulma-text-s: 12%;
  --bulma-scheme-main-l: 11%;
  --bulma-scheme-main-bis-l: calc(var(--bulma-scheme-main-l) + 4%);
  --bulma-scheme-main-ter-l: calc(var(--bulma-scheme-main-l) + 6%);
  --bulma-background-l: calc(var(--bulma-scheme-main-l) + 5%);
  --bulma-border-weak-l: calc(var(--bulma-scheme-main-l) + 9%);
  --bulma-border-l: calc(var(--bulma-scheme-main-l) + 12%);
  --bulma-body-background-color:
    hsl(var(--bulma-scheme-h), 40%, calc(var(--bulma-scheme-main-l) - 5%));
  --bulma-text-weak-l: 66%;
  --bulma-text-l: 93%;
  --bulma-text-strong-l: 99%;

  /* Magenta, cyan and yellow: the neon family the idle screen is drawn in. */
  --bulma-primary-h: 322deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 59%;
  --bulma-link-h: 184deg;
  --bulma-link-s: 91%;
  --bulma-link-l: 55%;
  --bulma-info-h: 262deg;
  --bulma-info-s: 100%;
  --bulma-info-l: 71%;
  /* Add-to-queue stays a neon green, clear of the cyan links. */
  --bulma-success-h: 149deg;
  --bulma-success-s: 80%;
  --bulma-success-l: 54%;
  --bulma-warning-h: 50deg;
  --bulma-warning-s: 100%;
  --bulma-warning-l: 65%;
  --bulma-danger-h: 5deg;
  --bulma-danger-s: 100%;
  --bulma-danger-l: 68%;

  /* Bulma picks each accent's ink from a lightness ladder compiled for its own
     accent and does not recompute it when the accent changes. Every accent here
     is a bright neon, which wants near-black ink: white on this magenta is 3.3:1,
     the page colour on it 6:1. Accent text is lifted to stay readable on the
     near-black page. */
  --bulma-primary-invert-l: 6%;
  --bulma-link-invert-l: 6%;
  --bulma-success-invert-l: 6%;
  --bulma-warning-invert-l: 6%;
  --bulma-danger-invert-l: 6%;
  --bulma-info-invert-l: 6%;
  --bulma-primary-on-scheme-l: 68%;
  --bulma-link-on-scheme-l: 62%;

  /* Inset panels - has-background-dark, the action rows - sit a step above the
     card, on the ramp's hue rather than Bulma's blue. */
  --bulma-dark-h: var(--bulma-scheme-h);
  --bulma-dark-s: var(--bulma-scheme-s);
  --bulma-dark-l: calc(var(--bulma-scheme-main-l) + 6%);

  /* Bulma's dark theme moves a hovered colour 5%, too faint on this ramp to read as a
     hover; every hover in the app takes its step from these two. */
  --bulma-hover-color-l-delta: 10%;
  --bulma-hover-background-l-delta: 6%;

  /* Surfaces are told apart by their fill, not by Bulma's dark-theme glow. */
  --bulma-shadow: none;

  /* Soft, generous corners on every surface; controls a step tighter. */
  --bulma-radius: 0.75rem;
  --bulma-radius-small: 0.5rem;
  --bulma-radius-medium: var(--bulma-radius);
  --bulma-radius-large: 1.25rem;

  /* Phone-sized touch targets for every control. */
  --bulma-control-height: 2.75em;

  /* Bulma scopes the list-item hover to .panel; the option lists in the sheets are
     panel-blocks too, and hover the same way. */
  --bulma-panel-block-hover-background-color: var(--bulma-background);
}

/* Plain buttons are raised tiles, a step lighter than the cards they sit on, so they
   match is-dark. Bulma fills them with the surface they sit on and outlines them to compensate; filled, they need no
   outline, like the coloured buttons. is-outlined sets its own width. Disabled,
   they keep their fill and Bulma's opacity fades it; Bulma's own disabled fill is
   scheme-main, the box itself, where a faded button vanishes. */
.button {
  --bulma-button-background-l: calc(var(--bulma-scheme-main-l) + 6%);
  --bulma-button-border-width: 0px;
  --bulma-button-disabled-background-color:
    hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-button-background-l));
}

/* Hovering lights the label; the fill lifts only as far as master's, short of
   fading into the box. Coloured buttons keep Bulma's hover. */
.button:hover:not(
    [disabled],
    .is-white,
    .is-black,
    .is-light,
    .is-dark,
    .is-primary,
    .is-link,
    .is-info,
    .is-success,
    .is-warning,
    .is-danger,
    .is-text,
    .is-ghost
  ) {
  --bulma-button-background-l-delta: 5%;
  color: var(--bulma-link-text-hover);
}

/* Cards are inset panels. */
.card {
  --bulma-card-background-color: var(--bulma-dark);
  --bulma-card-radius: var(--bulma-radius);
}

/* Striped tables tell rows apart by the stripe; a rule under each row says it
   twice. Every table sits in base.html's .content, whose rule draws it. Heading
   underlines are a separate variable and stay. Bulma's 800 heading weight has no
   loaded face. */
.content {
  --bulma-content-table-cell-border-width: 0;
  --bulma-content-heading-weight: var(--bulma-weight-bold);
}

/* Bulma's stripe, a step stronger. Any hovered row takes the app's hover step. */
.table {
  --bulma-table-striped-row-even-background-color: var(--bulma-scheme-main-ter);
  --bulma-table-row-hover-background-color:
    hsl(var(--bulma-scheme-h), var(--bulma-scheme-s),
      calc(var(--bulma-scheme-main-l) + var(--bulma-hover-background-l-delta)));
  --bulma-table-striped-row-even-hover-background-color: var(--bulma-table-row-hover-background-color);
}

/* Bulma sets a modal's header apart from its body only by the shadow turned off
   above; the page colour does it by fill, as the wells do. */
.modal {
  --bulma-modal-card-head-background-color: var(--bulma-body-background-color);
}

/* Every modal card is a short option list. */
.modal-card {
  --bulma-modal-card-head-padding: 1rem;
  --bulma-modal-card-body-padding: 0;
  width: 90%;
  max-width: 400px;
}
.modal-card-title {
  max-width: 95%;
}

/* Bulma 1.0 defines a link hover colour but applies it to no plain link, only to its
   own components, which hover their own way. This is the rule bulma-dark.css used
   to carry, for text links only. */
a:not(.button, .app-tab, .navbar-burger, .panel-block, .delete):hover {
  color: var(--bulma-link-text-hover);
}

/* Form fields are dark wells on the page, outlined in the border step and lit
   in the accent when focused, as the search box in the mockups. */
.control,
.input,
.select,
.textarea {
  --bulma-input-background-l: calc(var(--bulma-scheme-main-l) + 4%);
  --bulma-input-border-l: var(--bulma-border-l);
  --bulma-input-placeholder-color: var(--bulma-text-weak);
  --bulma-input-icon-color: var(--bulma-text-weak);
  --bulma-input-icon-hover-color: var(--bulma-text);
  --bulma-input-focus-h: var(--bulma-primary-h);
  --bulma-input-focus-s: var(--bulma-primary-s);
  --bulma-input-focus-l: var(--bulma-primary-l);
}

/* Firefox applies its own default placeholder opacity on top of the colour. */
.input::placeholder,
.textarea::placeholder {
  opacity: 1;
}

/* Bulma puts .checkbox on the label that wraps a box, and accent-color inherits,
   so this reaches the box either way. */
.checkbox {
  accent-color: var(--bulma-success);
}

/* A touch target for the preference boxes, which carry .checkbox on the input
   itself: Bulma leaves native checkboxes at the browser's size, and exposes no
   variables for them. On a wrapping label these would inset it instead. */
input.checkbox {
  margin-right: 8px;
  min-width: 20px;
  min-height: 20px;
}

.pagination {
  margin-bottom: 7px;
}
.pagination-page-info {
  padding: 0;
  width: 100%;
  margin: 0.5em;
  margin-left: 0;
  font-size: 12px;
}
.pagination-list {
  margin-top: 0px !important;
  margin-left: 0px !important;
  margin-bottom: 0px !important;
}
.pagination-list li {
  margin-top: 0px !important;
}
.pagination-previous,
.pagination-next {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.pagination-page-info b {
  color: var(--bulma-white);
}

input {
  /* prevents mobile zooming */
  font-size: 16px !important;
}

/* Sections step down from the page heading rather than matching it: Bulma's
   own scale starts an h2 at 1.75em. */
.content h2 {
  font-size: 1.5em;
}
.content h3 {
  font-size: 1.25em;
}
.content h4 {
  font-size: 1.125em;
}
.content h5,
.content h6 {
  font-size: 1em;
}

table {
  table-layout: fixed;
  width: 100%;
}

/* A fixed layout holds each column to its share, so a word longer than the
   column breaks rather than running into the next one. */
td {
  overflow-wrap: break-word;
}

.break-word {
  overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
  width: 100%;
}

/* Bulma has no truncation helper. */
.is-truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Admin-only field naming who is about to sing. */
.singer-field {
  max-width: 320px;
  margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
  /* Headers set smaller than the rows under them. They are single words that
     cannot wrap, so on a phone they, not the data, are what decides how narrow
     a column may be -- and they are read once rather than scanned down the
     page, which makes them the right thing to shrink. */
  .history-table th {
    font-size: 0.75rem;
  }
}

/* The cog opening a row's actions. Fontello gives every glyph side margins that
   push it off the right edge the other cells sit flush against. */
.row-options-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.row-options-btn .icon-cog:before {
  margin-left: 0;
  margin-right: 0;
}

/* The cog is deliberately dim until pointed at, so a column of them does not
   compete with the rows. !important because it carries has-text-grey-light,
   and Bulma's colour helpers are themselves !important. */
.row-options-btn:hover {
  color: var(--bulma-text-strong) !important;
}

/* The add-to-queue plus brightens as a text link does, by Bulma's hover step on its
   own colour. !important for the same reason as the cog. */
.add-song-link.has-text-success:hover {
  color: hsl(
    var(--bulma-success-h),
    var(--bulma-success-s),
    calc(var(--bulma-success-l) + var(--bulma-hover-color-l-delta))
  ) !important;
}

/* Drag and drop highlight */
.drag-chosen {
  background-color: var(--bulma-info) !important;
  opacity: 0.9;
}

/* Brief highlight after move action */
.row-moved {
  animation: highlight-fade 1.5s ease-out;
}

@keyframes highlight-fade {
  0% { background-color: var(--bulma-info); }
  100% { background-color: transparent; }
}

/* Format badge on edit page */
.format-badge {
  height: 1.2em;
  vertical-align: middle;
  opacity: 0.6;
  flex-shrink: 0;
}

/* A div, not <progress>, so the fill can transition; the duration matches the poll. */
.dl-bar {
  /* A lighter grey on the card's has-background-dark, so the empty track shows
     before the fill covers it. */
  background-color: var(--bulma-grey-dark);
  border-radius: var(--bulma-radius-rounded);
  height: 8px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.dl-bar-fill {
  background-color: var(--bulma-link);
  border-radius: inherit;
  height: 100%;
  position: relative;
  transition: width 500ms linear;
  width: 0;
}

/* Whenever no percentage is arriving - the resolve, the seam between the two passes,
   the merge - a highlight travels instead of a number advancing. It rides the empty
   track before the first byte and the fill after it, hence the opposite contrast.
   transform keeps the animation off the Pi's CPU. */
.dl-bar.is-waiting::after,
.dl-bar-fill.is-waiting::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: dl-sheen 1.6s linear infinite;
}

/* Grey, not the accent: a coloured sweep on the empty track would read as real fill. */
.dl-bar.is-waiting::after {
  background: linear-gradient(90deg, transparent, var(--bulma-text-weak), transparent);
  opacity: 0.35;
}

.dl-bar-fill.is-waiting::after {
  background: linear-gradient(90deg, transparent, var(--bulma-white), transparent);
  opacity: 0.28;
}

@keyframes dl-sheen {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-bar-fill {
    transition: none;
  }

  .dl-bar.is-waiting::after,
  .dl-bar-fill.is-waiting::after {
    animation: none;
    opacity: 0.2;
  }
}

/* Wraps, unlike the .level.is-mobile it replaces: the phase and the three figures
   need more room than a phone gives them. The auto margin is on the span wrapping
   the phase so the figures stay grouped at the right, and so the rate stays
   right-aligned when it drops to a second line. */
.dl-meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  justify-content: flex-end;
  margin-top: 10px;
  min-height: 17px;
}

/* Tabular figures and a floor on the width: without both, the percentage and the
   speed change width on every 500 ms poll and the whole row twitches. */
.dl-percent {
  color: var(--bulma-text-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 3.2em;
  text-align: right;
}

/* ===================================
   APP SHELL
   One header and one tab bar at every width. On a phone the tabs pin to the
   bottom under the thumb; on a wide screen they sit under the header. Bulma
   has no tab bar, sheet or song card, so these are the bespoke pieces.
   =================================== */
.title,
.content h1,
.content h2,
.content h3,
.app-brand-name,
.lgt-display {
  font-family: var(--bulma-family-secondary);
  letter-spacing: -0.01em;
}

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0 0.5rem;
}

.app-header-start {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.app-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--bulma-primary);
}

.app-brand-name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.app-brand-tagline {
  margin-top: 0.2rem;
  color: var(--bulma-text-weak);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The running session, as a pill beside the brand. */
.session-ribbon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius-rounded);
  background-color: var(--bulma-scheme-main);
  color: var(--bulma-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.session-ribbon-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--bulma-success);
  animation: session-ribbon-pulse 2s ease-in-out infinite;
}

@keyframes session-ribbon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* The stage-name chip, which opens the More sheet. */
.app-user {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 0.8rem 0 0.35rem;
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius-rounded);
  background-color: var(--bulma-scheme-main);
  color: var(--bulma-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.app-user-name {
  max-width: 7rem;
}

.lgt-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--bulma-dark);
  color: var(--bulma-link);
  font-weight: 900;
  text-transform: uppercase;
}

.lgt-avatar.is-large {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.1rem;
}

.lgt-avatar.is-me,
.app-user .lgt-avatar {
  background-color: var(--bulma-primary);
  color: var(--bulma-primary-invert);
}

.app-tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0.25rem 0 0.75rem;
  border: 1px solid var(--bulma-border-weak);
  border-radius: var(--bulma-radius-large);
  background-color: var(--bulma-scheme-main);
  overflow: hidden;
}

.app-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--bulma-text-weak);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.app-tab .icon {
  font-size: 1.25rem;
}

.app-tab:hover,
.app-tab.is-active {
  color: var(--bulma-link);
}

.app-tab-badge {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 0.6rem;
  background-color: var(--bulma-primary);
  color: var(--bulma-primary-invert);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15rem;
  text-align: center;
}

/* Pages sit on the page itself as cards, rather than in one big panel. */
.box.app-main {
  padding: 0.5rem 0 1.5rem;
  background: transparent;
}

.app-page-title {
  font-size: 1.75rem;
  font-weight: 800;
}

@media screen and (max-width: 1087px) {
  .app-tabs {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid var(--bulma-border-weak);
    border-radius: 0;
    background-color: var(--bulma-body-background-color);
  }

  .app-tab {
    flex-direction: column;
    gap: 0.15rem;
    min-height: 60px;
    font-size: 0.7rem;
  }

  .app-tab .icon {
    font-size: 1.4rem;
  }

  .app-tab-badge {
    position: absolute;
    top: 0.4rem;
    left: 55%;
  }

  .app-shell {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  .app-page-title {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 420px) {
  /* The brand and the chip already fill a small phone's header. */
  .app-header .session-ribbon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-ribbon-dot {
    animation: none;
  }
}

/* Toasts float above the tab bar, dark ink on a light card so they read over
   anything. */
.base-notification {
  --bulma-notification-padding: 0.875em 2.75em 0.875em 1.25em;
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 1.25rem;
  width: min(500px, calc(100% - 2rem));
  transform: translateX(-50%);
  border-radius: var(--bulma-radius);
  font-weight: 700;
}

@media screen and (max-width: 1087px) {
  .base-notification {
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}

/* ===================================
   CARDS
   The pieces every guest screen is built from.
   =================================== */
.lgt-card {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--bulma-border-weak);
  border-radius: var(--bulma-radius-large);
  background-color: var(--bulma-scheme-main);
}

.lgt-card.is-accent {
  border-color: var(--bulma-primary);
  background-color: var(--bulma-scheme-main-bis);
}

.lgt-card + .lgt-card {
  margin-top: 0.75rem;
}

.lgt-kicker,
.content .lgt-kicker {
  margin-top: 0;
  font-family: var(--bulma-family-primary);
  line-height: 1.4;
  color: var(--bulma-text-weak);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lgt-kicker.is-accent {
  color: var(--bulma-primary);
}

/* Four bars that bounce while a song plays and hold still while it is paused. */
.lgt-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.lgt-eq span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--bulma-primary);
  transform-origin: bottom;
  animation: lgt-eq 0.9s ease-in-out infinite;
}

.lgt-eq span:nth-child(2) { animation-delay: -0.3s; }
.lgt-eq span:nth-child(3) { animation-delay: -0.6s; }
.lgt-eq span:nth-child(4) { animation-delay: -0.15s; }

.lgt-eq.is-paused span {
  animation-play-state: paused;
}

@keyframes lgt-eq {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lgt-eq span {
    animation: none;
    transform: scaleY(0.7);
  }
}

/* One song row, shared by the queue, Songs and search results. */
.song-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  padding: 0.4rem 0.4rem 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--bulma-radius);
  background-color: var(--bulma-scheme-main);
}

.song-card + .song-card {
  margin-top: 0.5rem;
}

.song-card.is-mine {
  border-color: var(--bulma-primary);
  background-color: var(--bulma-scheme-main-bis);
}

.song-card-body {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.song-card-title {
  color: var(--bulma-text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.song-card-meta {
  color: var(--bulma-text-weak);
  font-size: 0.85rem;
}

.song-card-singer {
  color: var(--bulma-link);
  font-size: 0.85rem;
  font-weight: 900;
}

.song-card.is-mine .song-card-singer {
  color: var(--bulma-primary);
}

/* A square icon button at touch size, for a row's add, drag and more actions. */
.lgt-icon-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--bulma-radius-small);
  background: transparent;
  color: var(--bulma-text-weak);
  font-size: 1.2rem;
  cursor: pointer;
}

.lgt-icon-button:hover {
  color: var(--bulma-text-strong);
}

.lgt-icon-button.is-success {
  background-color: var(--bulma-success);
  color: var(--bulma-success-invert);
}

.lgt-icon-button.is-success:hover {
  color: var(--bulma-success-invert);
  filter: brightness(1.1);
}

.lgt-icon-button .icon-braille:before,
.lgt-icon-button .icon-menu:before,
.lgt-icon-button .icon-plus:before {
  margin: 0;
}

/* ===================================
   SHEETS
   A Bulma modal that rises from the bottom on a phone, where the thumb is,
   and centres on a wide screen.
   =================================== */
.modal.is-sheet {
  justify-content: flex-end;
}

.modal.is-sheet .modal-card {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  margin: 0;
  border-radius: var(--bulma-radius-large) var(--bulma-radius-large) 0 0;
}

.modal.is-sheet .modal-card-head {
  border-bottom: 1px solid var(--bulma-border-weak);
  background-color: var(--bulma-scheme-main);
}

.modal.is-sheet .modal-card-body {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--bulma-scheme-main);
}

.modal.is-sheet .panel-block {
  gap: 0.75rem;
  width: 100%;
  min-height: 56px;
  padding: 0 1.25rem;
  border: 0;
  background: transparent;
  color: var(--bulma-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.modal.is-sheet .panel-block.has-text-danger {
  border-top: 1px solid var(--bulma-border-weak);
}

@media screen and (min-width: 1088px) {
  .modal.is-sheet {
    justify-content: center;
  }

  .modal.is-sheet .modal-card {
    border-radius: var(--bulma-radius-large);
  }
}

/* ===================================
   NOW
   =================================== */
.lgt-now {
  overflow: hidden;
  padding: 1.4rem 1.25rem 1.25rem;
}

/* A soft disc of the accent behind the corner, the stage light. */
.lgt-now::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: var(--bulma-primary);
  opacity: 0.1;
  pointer-events: none;
}

.lgt-now-singer {
  color: var(--bulma-text-strong);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  overflow-wrap: anywhere;
}

.lgt-now-song {
  color: var(--bulma-warning);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Segments counting down to this device's turn; the last is its song. */
.lgt-line-bar {
  display: flex;
  gap: 6px;
}

.lgt-line-bar span {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background-color: var(--bulma-border);
}

.lgt-line-bar span.is-filled {
  background-color: var(--bulma-primary);
}

/* ===================================
   HOST
   =================================== */
.host-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin: 1.25rem 0;
}

.host-round-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 1px solid var(--bulma-border);
  border-radius: 50%;
  background-color: var(--bulma-dark);
  color: var(--bulma-text-strong);
  font-size: 1.5rem;
  cursor: pointer;
}

.host-round-button.is-main {
  width: 5.5rem;
  height: 5.5rem;
  border: 0;
  background-color: var(--bulma-primary);
  color: var(--bulma-primary-invert);
  font-size: 2rem;
}

.host-round-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.host-round-button i:before {
  margin: 0;
}

.host-slider {
  flex: 1;
  min-width: 6rem;
  min-height: 44px;
  accent-color: var(--bulma-link);
}

.host-key-value {
  min-width: 2.75rem;
  color: var(--bulma-warning);
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.host-mic-label {
  width: 6rem;
  color: var(--bulma-text);
  font-weight: 700;
}

.host-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* ===================================
   QUEUE
   =================================== */
.queue-now {
  border-color: var(--bulma-border-weak);
  padding-left: 1rem;
}

.queue-now .lgt-eq {
  flex: none;
  width: 1.5rem;
  height: 18px;
}

.queue-pos {
  white-space: nowrap;
}

.queue-list .drag-handle {
  margin-right: -0.4rem;
}

/* ===================================
   SONG LIST
   The library table (Songs, and the "On this machine" half of Search) drawn
   as the same cards as the queue: title first, add button at the thumb.
   =================================== */
.song-list,
.song-list tbody,
.song-list td {
  display: block;
}

.song-list tr.song-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 60px;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  border-radius: var(--bulma-radius);
  background-color: var(--bulma-scheme-main);
}

.table.song-list {
  --bulma-table-background-color: transparent;
  --bulma-table-striped-row-even-background-color: var(--bulma-scheme-main);
  --bulma-table-striped-row-even-hover-background-color: var(--bulma-scheme-main);
  --bulma-table-row-hover-background-color: var(--bulma-scheme-main);
  background-color: transparent;
}

.table.song-list tr.song-row:nth-child(even),
.table.song-list tr.song-row:hover {
  background-color: var(--bulma-scheme-main);
}

/* Live results in Search show the first page only; paging belongs on Songs. */
#library-results .pager-controls {
  display: none !important;
}

.song-list td {
  padding: 0;
  border: 0;
}

.song-list .song-index {
  display: none;
}

.song-list .song-title {
  flex: 1;
  min-width: 0;
  order: 1;
  color: var(--bulma-text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.song-list .song-edit {
  order: 2;
}

.song-list .song-add {
  order: 3;
}

.song-list .song-add a,
.song-list .song-edit a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--bulma-radius-small);
}

.song-list .song-edit a {
  color: var(--bulma-text-weak);
}

.song-list .song-add a,
.song-list .song-add a.has-text-success:hover {
  background-color: var(--bulma-success);
  color: var(--bulma-success-invert) !important;
}

.song-list .song-add .icon {
  font-size: 1.3rem;
}