/*
Filename: review.css
Description: The look of jantrashala's site: the emblem, sangitadm's colours, a list beside the pages.
Author: SCS
Copyright (C) 2026, SCS, all rights reserved.
Created: 2026-11-03 Tue 18:12
Version: 0.1.0
Last-Updated: 2026-11-04 Wed 16:49
Update #: 7
*/

/* The colours are sangitadm's site/style.css, as monikeradm's are. */

:root {
  --red: #C8161E;
  --blue: #6cace4;
  --pale: #e2effa;
  --ink: #1f1f1f;
  --soft: #5f5f5f;
  --paper: #ffffff;
  --line: #e6e6e6;
  --desk: #f0f0f0;
  --before: #d11a1a;
  --after: #1f4fd1;
  --before-line: #fdeeee;
  --after-line: #edf2fd;
  --marked: #ffd2d5;
  --marked-ink: #C8161E;
  --after-marked: #d3defc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e3;
    --soft: #aaa69e;
    --paper: #17171a;
    --line: #34343a;
    --desk: #26262b;
    --pale: #1c2733;
    --before: #ff8a8a;
    --after: #8fb0ff;
    --before-line: #351f21;
    --after-line: #1d2638;
    --marked: #5c1d22;
    --marked-ink: #ff9aa0;
    --after-marked: #22345c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 0.2em; }
a:hover { color: var(--red); text-decoration-color: var(--red); }
a.current { color: var(--red); font-weight: 600; }

h1 { color: var(--red); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.4rem; overflow-wrap: anywhere; }

/* The top bar */

.top { border-bottom: 1px solid var(--line); }
.bar { padding: 0.55rem 1rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.name { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.15rem; color: var(--red); text-decoration: none; }
/* The emblem inside a site: 78 by 56 pixels, at the left end of the bar.
   The name and the emblem lead to the front page. */
.logo { display: block; width: 78px; height: 56px; }
.out { color: var(--soft); }
.count, .date, .who { color: var(--soft); }
.date { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  .logo { filter: invert(1); }
}

/* The list of songs beside the chosen song */

.review { display: grid; grid-template-columns: 19rem 1fr; min-height: 80vh; }
.songs { border-right: 1px solid var(--line); padding: 0.8rem 1rem; max-height: calc(100vh - 3rem); overflow-y: auto; position: sticky; top: 0; }
.songs ol { list-style: none; margin: 0; padding: 0; }
.tabs { margin: 0 0 0.6rem; }
.tabs a { margin-right: 0.7rem; white-space: nowrap; }
.songs li { padding: 0.15rem 0.4rem; border-radius: 0.4rem; font-size: 0.92rem; }
.songs li.current { background: var(--pale); }
.songs li.current a { color: var(--red); font-weight: 600; }
.verdict { color: var(--soft); font-size: 0.8rem; }

/* The buttons of a change, or the job that runs, and its pull request. */

.actions { margin: 0 0 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.actions form { display: inline; }
.actions button { margin: 0 0.4rem 0.4rem 0; }
.actions p { margin: 0.2rem 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.actions .job { color: var(--red); }
.actions .next { color: var(--soft); }

/* The text for the team, and the output of a job, as they are written. */

.text, .log { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--desk); padding: 0.8rem 1rem; border-radius: 0.6rem; margin: 0; }
.text { max-width: 48rem; }
.log { font: 0.85rem/1.45 ui-monospace, Menlo, Consolas, monospace; }

/* The LilyPond code, before and after, side by side: the line numbers in
   grey, a removed line on a red ground and an added one on a blue ground,
   as in the pictures. */

.code h2.file { font-size: 1rem; margin: 1rem 0 0.2rem; overflow-wrap: anywhere; }
.diff { width: 100%; border-collapse: collapse; table-layout: fixed; font: 0.8rem/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--desk); border-radius: 0.6rem; }
.diff td { padding: 0 0.5rem; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff td.number { width: 3.2rem; text-align: right; color: var(--soft); user-select: none; }
.diff td.before { background: var(--before-line); }
.diff td.after { background: var(--after-line); }
.diff td.empty { background: var(--line); }

/* The login page: the emblem centred above the form, 155 by 112 pixels,
   24 pixels below the top, as on the login page of id.ckg.is. */

.login { max-width: 22rem; margin: 0 auto; padding: 24px 1rem 2rem; }
.login .emblem { display: block; width: 155px; height: 112px; margin: 0 auto 12px; }
.login form { display: grid; gap: 0.3rem; margin-top: 1rem; }
.login label { color: var(--soft); font-size: 0.92rem; margin-top: 0.6rem; }
.login input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.5rem 0.7rem; }
.login input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.login button { justify-self: start; margin-top: 1.2rem; padding: 0.5rem 1.4rem; }
.login .said { font-weight: 600; }
.login #failed, .login #refused { color: var(--red); }
.login .help { margin-top: 1.8rem; font-size: 0.92rem; }
.login .help a { color: var(--soft); }

@media (prefers-color-scheme: dark) {
  .login .emblem { filter: invert(1); }
}

/* The front page: one change per line. */

.front { max-width: 60rem; padding: 1rem 1.2rem 2rem; }
.changes { list-style: none; margin: 1rem 0 0; padding: 0; }
.changes li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.changes .title { font-weight: 600; }
.changes .facts { margin: 0.2rem 0 0; overflow-wrap: anywhere; }

.song { padding: 0.8rem 1.2rem 2rem; min-width: 0; }
.facts { color: var(--soft); margin: 0 0 0.5rem; }

/* A changed line of the music: before in red and after in blue, as in the
   pictures, and the words that changed in Mother Kali red, marked. */

.head li.before, .head li.after { padding: 0.05rem 0.4rem; border-radius: 0.3rem; margin: 0.1rem 0; }
.head li.before { background: var(--before-line); }
.head li.after { background: var(--after-line); }
.head li.before .side { color: var(--before); font-weight: 600; }
.head li.after .side { color: var(--after); font-weight: 600; }
.head mark, .diff mark { color: var(--marked-ink); background: var(--marked); font-weight: 700; padding: 0 0.15em; border-radius: 0.2em; }
.head li.after mark, .diff td.after mark { color: var(--after); background: var(--after-marked); }
.views a, .steps a { margin-right: 0.8rem; }
.controls { margin: 0.2rem 0 0.8rem; }
.controls .steps { margin: 0.3rem 0 0; }

button {
  font: inherit; padding: 0.35rem 0.9rem; margin: 0.8rem 0.4rem 0.4rem 0;
  border: 1px solid var(--line); border-radius: 0.5rem; background: var(--desk); color: var(--ink); cursor: pointer;
}
button:hover { border-color: var(--red); color: var(--red); }

/* The pages: white, with rounded corners, on a light grey desk, each page
   of a song below the one before. Side by side, a page's before and after
   stand in one row. */

.pictures { background: var(--desk); padding: 1rem; border-radius: 0.6rem; }
.page { display: flex; gap: 1rem; flex-wrap: wrap; }
.page + .page { margin-top: 1rem; }
.pictures figure { margin: 0; flex: 1 1 22rem; min-width: 0; }
.pictures img { display: block; width: 100%; height: auto; background: #ffffff; overflow: hidden; }
.pictures figcaption { color: var(--soft); font-size: 0.85rem; text-align: center; margin-top: 0.3rem; }
.none { color: var(--soft); }

/* Full screen, by the key F: only the song's name, its verdict,
   the views, the controls and the pages. Each page fills the height of the
   screen, and the pages scroll below the controls. */

.full .leave { display: none; }
:root:fullscreen .full .enter { display: none; }
:root:fullscreen .full .leave { display: inline; }

:root:fullscreen .top, :root:fullscreen .songs, :root:fullscreen footer, :root:fullscreen .head ul,
:root:fullscreen .pictures + .controls, :root:fullscreen .pictures figcaption { display: none; }
:root:fullscreen .review { display: block; min-height: 0; }
:root:fullscreen .song { height: 100vh; display: flex; flex-direction: column; padding: 0.3rem 1rem 0.5rem; }
:root:fullscreen .head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; }
:root:fullscreen .head > *, :root:fullscreen .controls .steps { margin: 0; }
:root:fullscreen h1 { font-size: 1rem; }
:root:fullscreen .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
:root:fullscreen .pictures { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem; margin-top: 0.3rem; }
:root:fullscreen .page { height: 100%; flex-wrap: nowrap; justify-content: center; }
:root:fullscreen .pictures figure { flex: 0 1 auto; height: 100%; }
:root:fullscreen .pictures img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

footer {
  text-align: center; color: var(--soft); font-size: 0.85rem;
  padding: 2rem 1rem 3rem; border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .review { grid-template-columns: 1fr; }
  .songs { position: static; max-height: 14rem; border-right: 0; border-bottom: 1px solid var(--line); }
}