/* ---------------------------------------------------------------------------
   requester-html5.css

   Loaded AFTER requester.css. It only supplies things requester.css does not
   already handle:

     1. presentation that used to live in HTML attributes
        (align=, hspace=, border=, frameborder=, scrolling=, valign=)
     2. styling for the classes the rewrite introduced
     3. a few sizing fixes forced by longer button labels

   It deliberately does NOT restyle .csong, .requester_title, .search_text,
   .songlist, .queuelist, .information or the table interiors. Those selectors
   in requester.css are plain class selectors and still match the new markup,
   so overriding them here would only change the look for no reason.
   --------------------------------------------------------------------------- */

/* --- 1. presentation formerly carried by HTML attributes ------------------ */

/* requester.css sets .menu { text-align: center }, but the old markup put that
   class on a <span>. text-align has no effect on an inline element's own
   content, so the menu has always rendered left-aligned. It is a <nav> now,
   which is a block, so the centring suddenly applied. Put it back. */
nav.menu {
  text-align: left;
}

/* <hr class="line" align="left"> — requester.css already sets the width,
   colour and dotted style; only the left alignment was in the attribute. */
hr.line {
  margin-left: 0;
  margin-right: auto;
}

/* <img ... hspace="15" align="left"> */
.headerbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* The original was <img hspace="15" align="left"> inside a table cell, with a
   <br> above it. hspace gave 15px left and right; the <br> and the cell
   padding gave roughly a line's worth above. 15px all round reproduces that.
   This is the one number to change if you want it looser or tighter. */
.headerimg {
  flex: 0 0 auto;
  margin: 15px;
}

.headerinfo {
  flex: 1 1 20em;
  min-width: 0;
}

/* <iframe frameborder="0" scrolling="no" width=... height=...> */
.infoframe,
.queueframe {
  border: 0;
  display: block;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
}

.infoframe {
  height: 150px;
}

.queueframe {
  margin-bottom: 10px;
  overflow: hidden;
  /* Height starts from an inline style sized to the queue length, then a
     script in the parent measures the real content and corrects it. */
}

body.frame {
  margin: 0;
}

/* The original put the search controls and the information panel in two
   cells of a layout table, side by side. Reproduce that without the table. */
.artistselect {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.artistselect > .information {
  margin-left: 10px;   /* margin rather than `gap`, for older Safari */
}

/* Three explicit rows: search + Search, album + Show, artist + Clear. The
   original relied on the controls wrapping by themselves, which put Clear on a
   line of its own. */
.artistselect > .searchcontrols {
  display: flex;
  flex-direction: column;
  flex: 1 1 620px;
  min-width: 0;        /* without this a flex item will not shrink below its basis */
}

.searchrow {
  display: flex;
  align-items: center;
}

.searchrow + .searchrow {
  margin-top: 3px;
}

/* Margin rather than `gap`: flexbox gap needs Safari 14.1+. Targets the
   button specifically -- a `* + *` rule would also catch the visually-hidden
   label and push the first control 4px out of line with the others. */
.searchrow > .search_button {
  margin-left: 4px;
}

.searchrow .search_text,
.searchrow select {
  flex: 0 1 auto;
}

.artistselect > .information {
  flex: 0 0 auto;
}

.artistselect .information ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: none;
}

.artistselect .information p {
  margin: 0 0 0.3em;
}

/* --- 2. classes introduced by the rewrite -------------------------------- */

/* The two dispatch forms hold only hidden inputs. Without this they would
   still pick up `form { margin: 2px 0 }` and add stray vertical space. */
.hiddenform {
  display: contents;
}

/* The original was a table inside <td valign="middle">, with every row ending
   in <br><br>. That produced vertical centring plus about two blank lines
   between entries. Reproduce both: 100vh is the iframe's own height, so the
   column centres inside the frame whatever its size. */
.nowplaying {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4px;
}

.nowplaying p {
  margin: 0;
  padding: 0;
}

/* the old markup ended each row with <br><br>; this is that spacing */
.nowplaying p + p {
  margin-top: 1.9em;
}

.boxtitle {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 0.6em;
}

/* .information is 555px wide; the admin panel now carries a session table,
   so it needs the room. The original did the same thing with inline widths. */
/* .information carries no margin, so stacked panels sit flush against each
   other. Separate them. */
.information + .information {
  margin-top: 10px;
}

.adminbox {
  width: auto;
  max-width: 1200px;
}

.loginbox {
  width: 600px;
  max-width: 100%;
}

.uploadbox {
  width: 650px;
  max-width: 100%;
}

.adminstats {
  font-family: monospace;
  word-break: break-word;
}

.adminops,
.inlineform p,
.entryform p {
  margin: 0.5em 0;
}

/* Every button row in the admin panel is spaced from CSS rather than from
   whitespace between tags, so the gaps are identical everywhere instead of
   depending on how a browser collapses a newline between inline-blocks. The
   bottom margin keeps rows clear of each other if they wrap on a narrow
   window. Deliberately excludes the Act column, whose buttons sit flush
   together exactly as they do on the main page. */
.adminops .search_button,
.inlineform .search_button,
.entryform tfoot .search_button {
  margin-right: 4px;
  margin-bottom: 2px;
}

.loginbox label,
.uploadbox label,
.inlineform label {
  display: inline-block;
  min-width: 8em;
}

/* Empty-state row inside a track table. */
.tracktable td.empty {
  text-align: center;
  padding: 1em;
  color: #aaa;
}

/* Feedback messages. requester.css already has .err at #f00000, which is too
   dark against the #353535 body; lift it for contrast. */
.notice,
.error {
  padding: 0.5em 0.8em;
  margin: 0.8em 0;
  border-left: 4px solid currentColor;
  max-width: 1200px;
}

.error {
  color: #ff5555;
}

/* Labels added so the search controls are announced properly. They must not
   change the visible layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 3. sizing forced by the new markup ---------------------------------- */

/* The old buttons were short codes ("rnd", "prg") pinned to a fixed 64px by
   .search_button, with per-button inline widths. The labels now say what they
   do, so they size to their content -- but with a floor that reproduces the
   original's rendered width exactly: 64px content + 2px padding + 2px border
   under content-box is 68px, which is what border-box min-width 68px gives. */
.search_button {
  box-sizing: border-box;
  width: auto;
  min-width: 68px;
  padding: 0 4px;
}

.search_button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Two buttons share the Act column. Without this they wrap onto separate
   lines once the column gets tight, which varies by browser and font. The
   1% width makes the column shrink to exactly what the buttons need. */
.tracktable td.act,
.tracktable th.act {
  white-space: nowrap;
  width: 1%;
}

/* .search_text is 546px, which is right for the search box and the login
   fields but absurd for a numeric id. */
#id_entry {
  width: 6em;
}

/* The entry editor puts one input per column, so they must share the row. */
.entryform .search_text {
  width: 100%;
  box-sizing: border-box;
}

.entryform tfoot .search_button,
.tracktable tfoot .search_button {
  width: auto;
}

/* --- 4. quality floor ---------------------------------------------------- */

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid #f0f0ff;
  outline-offset: 1px;
}

/* The original layout is a fixed 1200px. Keep that on desktop, but stop it
   overflowing now that there is a viewport meta tag. */
@media (max-width: 1240px) {
  hr.line,
  .artistselect,
  .songlist table,
  .queuelist table {
    width: 100%;
    max-width: 1200px;
  }

  .search_text,
  .artistselect select {
    width: 100%;
    max-width: 546px;
    box-sizing: border-box;
    min-width: 0;
  }

  .artistselect > p {
    flex-basis: 100%;
  }

  .artistselect > .information {
    width: 100%;
    max-width: 555px;
    box-sizing: border-box;
  }

  /* long titles must be allowed to wrap rather than forcing the table wide */
  .songlist tbody td,
  .queuelist tbody td {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 700px) {
  .headerbar {
    justify-content: center;
  }

  /* Drop the index/album column; artist, time and actions matter more. */
  .songlist thead th:first-child,
  .songlist tbody td:first-child,
  .queuelist thead th:first-child,
  .queuelist tbody td:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}