/* style.css - large, calm, little colour. The people using this page are
   children and parents, often on an unfamiliar computer and in a hurry. */

:root {
  --bg:      #fbfaf7;
  --card:    #ffffff;
  --ink:     #23201c;
  --quiet:   #6b6559;
  --rule:    #e2ddd2;
  --blue:    #2c5d9b;
  --blue-l:  #1067d5;   /* heller und kraeftiger - nur fuer Links unter dem Zeiger */
  --green:   #2f7a45;
  --red:     #a33028;
  --amber:   #8a6d1f;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  max-width: 44rem;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.9rem; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .55rem; }
p  { margin: 0 0 .8rem; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; }

.lead { color: var(--quiet); margin-bottom: 1.6rem; }
.small { font-size: .87rem; color: var(--quiet); }

.step {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .95rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- links ---------------------------------------------------------------
   Ohne diese Regeln nimmt der Browser sein eigenes Blau (#0000EE) und sein
   eigenes Violett fuer besuchte Links. Beides ist grell und kalt und passt
   nicht zu der warmen, blassen Palette hier - es sieht aus wie ein Fehler,
   nicht wie eine Entscheidung.

   Unterstrichen sind Links in BEIDEN Zustaenden, gleich dick. Der Hover
   steckt allein in der Farbe: --blue wird zu --blue-l, also heller und
   kraeftiger, als wuerde der Link angehen.

   Zwei Messungen, beide noetig:

   * Lesbarkeit gegen den Hintergrund. Heller heisst auf hellem Grund immer
     weniger Kontrast, deshalb ist --blue-l die Grenze: 5.13:1 auf --bg und
     5.35:1 auf einer Karte, noch ueber den 4.5:1 fuer Fliesstext (WCAG AA).
     --blue selbst liegt bei 6.39:1. Noch heller ginge, aber dann rutscht der
     Hover unter die 4.5:1.
   Beide Zahlen gelten fuer das helle Thema. **Es gibt weiter unten ein
   dunkles** (@media prefers-color-scheme: dark), das --blue umdefiniert -
   jede neue Farbe hier braucht dort ihr Gegenstueck, sonst steht sie
   ungeprueft auf fast schwarzem Grund.

   * Der Abstand der beiden Zustaende zueinander - der wird leicht vergessen
     und war hier zweimal das eigentliche Problem. Ein frueherer Versuch, den
     Hover nur etwas dunkler zu machen, lag bei ΔE 4.2 zum vorigen Versuch,
     ungefaehr die Schwelle, ab der ein Mensch ueberhaupt etwas bemerkt - und
     war schlicht nicht zu sehen. --blue -> --blue-l sind ΔE 28.5. Das faellt
     auf. */
a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:visited { color: var(--blue); }
a:hover { color: var(--blue-l); }
/* Tastatur-Fokus: dieselbe helle Farbe, dazu ein sichtbarer Rahmen. */
a:focus-visible {
  color: var(--blue-l);
  outline: 2px solid var(--blue-l);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- cards --------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1rem;
}
.card[hidden] { display: none; }
.card.warning { border-color: #d9c98a; background: #fdf8e8; }
.card.ok      { border-color: #a9cdb4; background: #f1f8f2; }
.card.bad     { border-color: #dcaaa4; background: #fdf2f0; }
.card.ok h2      { color: var(--green); }
.card.bad h2     { color: var(--red); }
.card.warning h2 { color: var(--amber); }

/* --- buttons ------------------------------------------------------------- */
button {
  font: inherit;
  border: 0; border-radius: 9px;
  background: var(--blue); color: #fff;
  cursor: pointer;
}
button.big { display: block; width: 100%; padding: .85rem; font-size: 1.1rem; font-weight: 600; margin-top: 1rem; }
button.small-button { padding: .5rem .9rem; font-size: .95rem; margin-top: .4rem; }
button:hover:not(:disabled) { filter: brightness(1.1); }
button:disabled { background: #b9b4aa; cursor: default; }
button:focus-visible { outline: 3px solid #9dc0ea; outline-offset: 2px; }

.checkline {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .7rem; font-size: .87rem; color: var(--quiet);
}

/* --- the two versions side by side --------------------------------------- */
.compare {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1rem; margin-bottom: 1rem;
  background: var(--bg); border-radius: 9px;
}
.side { flex: 1; text-align: center; }
.label { font-size: .8rem; color: var(--quiet); text-transform: uppercase; letter-spacing: .04em; }
.version { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.arrow { font-size: 1.5rem; color: var(--quiet); }

.verdict { font-size: 1.05rem; font-weight: 600; }
.verdict.settled { color: var(--green); }

.summary { margin: 0 0 1rem; padding-left: 1.2rem; }
.summary li { margin-bottom: .2rem; }

/* --- file list ----------------------------------------------------------- */
details { margin-bottom: .7rem; }
summary { cursor: pointer; padding: .2rem 0; }
.files { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: .5rem; }
.files td { padding: .16rem .4rem; border-bottom: 1px solid var(--rule); }
.files td:first-child { font-family: ui-monospace, Menlo, Consolas, monospace; }
.files td:last-child { text-align: right; white-space: nowrap; color: var(--quiet); }
.tag { font-weight: 600; }
.tag.added     { color: var(--blue); }
.tag.updated   { color: var(--amber); }
.tag.removed   { color: var(--red); }
.tag.unchanged { color: var(--quiet); font-weight: 400; }

/* --- progress ------------------------------------------------------------ */
.bar { height: 12px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--blue); transition: width .12s linear; }
.caution { color: var(--amber); font-weight: 600; font-size: .9rem; margin: 0; }

/* --- WLAN ---------------------------------------------------------------- */
#wlan-box label { display: block; margin-bottom: .6rem; font-size: .9rem; color: var(--quiet); }
#wlan-box input {
  display: block; width: 100%; margin-top: .2rem; padding: .5rem .6rem;
  font: inherit; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 7px; background: #fff;
}

/* --- log ----------------------------------------------------------------- */
#log {
  max-height: 16rem; overflow: auto; margin: .5rem 0 0;
  padding: .6rem .7rem; background: #f3f1ec; border-radius: 7px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}

footer { margin-top: 2rem; text-align: center; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a17; --card: #232220; --ink: #ece8e0; --quiet: #a09a8e;
    --rule: #3a3833; --blue: #6fa2df; --green: #79c48f; --red: #e08b81; --amber: #d6b95f;
    /* Auch --blue-l muss hier stehen. "Heller beim Hovern" heisst auf
       dunklem Grund die andere Richtung als auf hellem: --blue-l ist im
       Hellen dunkler und kraeftiger als --blue, im Dunkeln heller. Ohne
       diese Zeile behaelt der Hover den hellen Wert von oben - ein dunkles
       Blau auf fast schwarzem Grund, 3.25:1 und praktisch nicht zu lesen.
       So sind es 9.59:1 auf --bg und 8.76:1 auf einer Karte, ΔE 16.6 zu
       --blue. */
    --blue-l: #9dc4ef;
  }
  button { color: #16202c; font-weight: 600; }
  .card.warning { background: #2b2618; border-color: #5a4d26; }
  .card.ok      { background: #1c2a20; border-color: #33523c; }
  .card.bad     { background: #2c1e1c; border-color: #5c3733; }
  #log { background: #191817; }
  #wlan-box input { background: #1b1a17; }
}