/*
Filename: review.css
Description: The look of jantra's site: the colours and the font of the typography folder, the emblem, 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-12 Thu 17:40
Update #: 14
*/

/* The look follows typography.org in the typography folder of the SCS
   Foundation. Each page loads colours.css first, then fonts.css, then this
   file. colours.css holds the named colours as variables, such as
   var(--plenitude-blue). fonts.css holds the font list as var(--font-text)
   and var(--font-code). The variables below give each colour the name of
   its job here.
   Text is black, and light in dark mode. Titles, headings and links in
   running text are Plenitude blue. Buttons are Leaf green with white text.
   The current item is Mother Kali red. The one grey ground is the desk
   behind the score pages. The golden yellow of the buttons Previous song
   and Next song is SCS's choice (2026-11-05). It is not a colour of
   colours.css, and typography.org has no rule for those two links. */

:root {
  --red: var(--kali-red);
  --title: var(--plenitude-blue);
  --link: var(--plenitude-blue);
  --green: var(--leaf-green);
  --ink: #000000;
  --soft: var(--footer-grey);
  --paper: #ffffff;
  --line: var(--footer-line);
  --field: var(--field-line);
  --desk: #f0f0f0;
  --before: #d11a1a;
  --after: #1f4fd1;
  --before-line: #fdeeee;
  --after-line: #edf2fd;
  --marked: #ffd2d5;
  --marked-ink: var(--kali-red);
  --after-marked: #d3defc;
  --gold: #f0b400;
  --gold-hover: #d29d00;
  --green-text: var(--leaf-green);
}

/* In dark mode titles and links take the colour of the text, as on
   sangitadm's site. */

@media (prefers-color-scheme: dark) {
  :root {
    --title: #ece9e3;
    --link: #ece9e3;
    --ink: #ece9e3;
    --soft: var(--footer-grey-dark);
    --paper: #17171a;
    --line: var(--footer-line-dark);
    --field: var(--footer-line-dark);
    --desk: #26262b;
    --before: #ff8a8a;
    --after: #8fb0ff;
    --before-line: #351f21;
    --after-line: #1d2638;
    --marked: #5c1d22;
    --marked-ink: #ff9aa0;
    --after-marked: #22345c;
    --green-text: #7dd393;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--font-text);
}

a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a.current { color: var(--red); font-weight: 600; }

h1, h2 { color: var(--title); }
h1 { 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; }
.bar .name { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.15rem; color: var(--title); text-decoration: none; }
.bar a { color: var(--ink); }
/* 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; }
.bar .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 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 { margin: 0 0 0.6rem; }
.actions button { margin: 0; }
.actions .hint { margin: 0.2rem 0 0; color: var(--soft); font-size: 0.85rem; }
.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. They
   stand on white, with the thin field line around them. The output of a job
   is in the fixed-width font of the device. */

.text, .log { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--field); padding: 0.8rem 1rem; border-radius: 0.6rem; margin: 0; }
.text { max-width: 48rem; }
.log { font: 0.85rem/1.45 var(--font-code); }

/* The LilyPond code, before and after, side by side, on white and in the
   fixed-width font of the device: 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 var(--font-code); }
.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); }

/* 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. A field has
   the thin field line, and a field with the focus an outline of Plenitude
   blue. */

.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(--field); border-radius: 0.6rem; padding: 0.5rem 0.7rem; }
.login input:focus { outline: 2px solid var(--plenitude-blue); 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; }
.changes form { margin: 0.4rem 0 0; }

/* The warning below the top bar of every page but the login page. It has a
   white ground and a line of Mother Kali red at its left. Full screen hides
   it. */

.warning { margin: 0; padding: 0.5rem 1.2rem; border-bottom: 1px solid var(--line); border-left: 4px solid var(--red); }

.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); }

/* The links of the views, and Full screen, are Leaf green buttons with white
   text, a little darker under the mouse. The view that the page shows is
   Mother Kali red, as typography.org says for the current item. The links
   Previous song and Next song are golden yellow buttons with dark text. The
   navigation stands out, as SCS decided on 5 November 2026. typography.org
   has no rule for these two links, so this choice is made here. The colours
   are the same in dark mode. They are still plain links, which only these
   rules style as buttons. */

.views a, .steps a {
  display: inline-block; margin: 0 0.4rem 0.4rem 0; padding: 0.3rem 0.8rem;
  border-radius: 0.5rem; text-decoration: none; white-space: nowrap;
}
.views a { background: var(--green); color: #ffffff; }
.views a:hover { filter: brightness(0.88); }
.views a.current { background: var(--red); color: #ffffff; }
.steps a { background: var(--gold); color: #1f1f1f; }
.steps a:hover { background: var(--gold-hover); color: #1f1f1f; }
/* The place of the song in its list, such as Song 1 of 35, in Leaf green,
   lighter in dark mode (SCS, 2026-11-05). */
.place { color: var(--green-text); font-weight: 600; }
.controls { margin: 0.2rem 0 0.8rem; }
.controls .steps { margin: 0.3rem 0 0; }

/* Every button is Leaf green with white text, and a little darker under the
   mouse. */

button {
  font: inherit; padding: 0.35rem 0.9rem; margin: 0.8rem 0.4rem 0.4rem 0;
  border: 0; border-radius: 0.5rem; background: var(--green); color: #ffffff; cursor: pointer;
}
button:hover { filter: brightness(0.88); }

/* The pages: white, with rounded corners, on a light grey desk, each page
   of a song below the one before. The desk is the one grey ground of the
   site, as Score pages on the web in typography.org says. 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 .warning, :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; }

/* The footer takes the footer grey and the footer line of colours.css. */

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); }
}

/* The dictionary: the letters stay in sight above the words, but not on a
   phone, where they would take too much of the screen. */

.dictionary { padding: 1rem; max-width: 60rem; margin: 0 auto; }
.dictionary .tip { color: var(--soft); }
.letters { position: sticky; top: 0; background: var(--paper); padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.letters a { display: inline-block; min-width: 1.5rem; text-align: center; text-decoration: none; font-weight: 600; }
.dictionary h2 { font-size: 1.3rem; font-weight: 600; margin: 1.2rem 0 0.3rem; scroll-margin-top: 3.5rem; }
.glossary { list-style: none; margin: 0; padding: 0; }
.glossary li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.glossary span { font-size: 1.05rem; margin: 0 0.4rem; }

@media (max-width: 40rem) {
  .letters { position: static; }
  .dictionary h2 { scroll-margin-top: 0; }
}