/* SPDX-License-Identifier: GPL-3.0-or-later */

* { box-sizing: border-box; }

html {
  --fg: #222;
  --bg: #fff;
  --muted: #6b6b6b;
  --line: #ddd;
  --soft: #f4f4f4;
  --accent: #0b62c4;
  --bad: #b3261e;
  --warn: #c99700;
  --good: #2e7d32;
  /* Spacing: --step between blocks, --half between lines of one block,
     --side between columns and inside boxes. */
  --step: 0.8rem;
  --half: 0.4rem;
  --side: 1rem;
  font-family: "Courier New", Courier, monospace;
  /* 1rem from a 444px viewport, 0.8rem at 355px and below. */
  font-size: clamp(0.8rem, 3.6vw, 1rem);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --fg: #dadada;
    --bg: #1c1c1e;
    --muted: #9a9a9a;
    --line: #3a3a3c;
    --soft: #2a2a2c;
    --accent: #7ab4f5;
    --bad: #f2877f;
    --warn: #e6c34a;
    --good: #7fc98a;
    color-scheme: dark;
  }
}
html.dark {
  --fg: #dadada;
  --bg: #1c1c1e;
  --muted: #9a9a9a;
  --line: #3a3a3c;
  --soft: #2a2a2c;
  --accent: #7ab4f5;
  --bad: #f2877f;
  --warn: #e6c34a;
  --good: #7fc98a;
  color-scheme: dark;
}

body {
  min-width: 375px;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem var(--side) 3rem;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--half) var(--side);
  padding-bottom: var(--step);
  border-bottom: 1px solid var(--line);
}

/* One size and one weight; only titles are larger, only .when is bold. */
h1 { font-size: 1.5rem; line-height: 1.3; }
h2 { line-height: 1.3; }
h1, h2, b, strong { font-weight: normal; }
small { font-size: inherit; }

h1, h2, p, ul, dl { margin: 0; }
ul { padding-left: 1.3rem; padding-bottom: 1rem; }
li + li { margin-top: var(--half); }

/* Blocks of a container are one step apart. */
section > * + *,
.options > * + *,
.panel > * + *,
.stamp > * + *,
.receipt > * + *,
#receipts > * + * { margin-top: var(--step); }

.lead { margin-top: calc(2 * var(--step)); }
section { margin-top: calc(3 * var(--step)); }

a, button.link { color: var(--accent); text-decoration: none; }
a:hover, button.link:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

button.link {
  padding: 0;
  border: 0;
  font: inherit;
  background: none;
  text-align: left;
  cursor: pointer;
}
button.link:disabled { color: var(--muted); opacity: 0.5; cursor: default; text-decoration: none; }

code {
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font: inherit;
  background: var(--soft);
  overflow-wrap: anywhere;
}

.drop {
  padding: calc(3 * var(--step)) var(--side);
  border: 2px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.drop p + p { margin-top: var(--half); }
.drop:hover, .drop.dragover { border-color: var(--accent); background: var(--soft); }
.drop.busy { opacity: 0.5; cursor: progress; }

.hint, small { color: var(--muted); }
.dim { opacity: 0.5; }

.links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--half) var(--side);
}

.panel {
  padding: var(--step) var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Outcome of a result box: a tint, no border, square corners. Green, red,
   and in between yellow: valid, by another signer of a recorded CA. */
.panel.good, .panel.other-signer, .panel.bad { border-color: transparent; border-radius: 0; }
.panel.good { background: color-mix(in srgb, var(--good) 30%, var(--bg)); }
.panel.other-signer { background: color-mix(in srgb, var(--warn) 30%, var(--bg)); }
.panel.bad { background: color-mix(in srgb, var(--bad) 20%, var(--bg)); }
.panel.good .stamp, .panel.other-signer .stamp, .panel.bad .stamp { border-top-color: color-mix(in srgb, var(--fg) 25%, transparent); }

/* Tick boxes: the box in its own column, beside the first line. */
.checks { padding-left: 0; list-style: none; }
.checks label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--half);
  align-items: start;
  cursor: pointer;
}
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0.2rem;
  accent-color: var(--accent);
  cursor: pointer;
}
/* A box that cannot be ticked. */
.checks label:has(input:disabled) { opacity: 0.5; cursor: default; }
input[type="checkbox"]:disabled { cursor: default; }
/* Room for the focus ring of the boxes inside the scrolling list. */
.tsa-list {
  max-height: 16rem;
  margin-left: -5px;
  padding: 5px;
  overflow: auto;
}
/* Rows keep a width, the list scrolls sideways; a comment that does not
   fit beside the name goes below it. */
.tsa-list li { min-width: 390px; }
.tsa-list label > span { display: flex; flex-wrap: wrap; column-gap: 1ch; }
.panel > .tsa-list { margin-top: calc(var(--step) - 5px); margin-bottom: -5px; }

.status { color: var(--muted); }
/* Long file names wrap. */
.status, .verdict { overflow-wrap: anywhere; }
noscript .status { margin-top: var(--step); }
.status:empty { display: none; }
.status.error, .verdict.bad { color: var(--bad); }
.when { font-weight: bold; }
.when small { font-weight: normal; }

.stamp, .receipt { padding-top: var(--step); border-top: 1px solid var(--line); }

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 var(--side);
}
dt { color: var(--muted); }
/* pre-line: a fingerprint is two lines. */
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }

footer {
  margin-top: calc(3 * var(--step));
  padding-top: var(--step);
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

/* "verify" and "forget" stay side by side. */
.pair { display: flex; gap: var(--side); }

@media (max-width: 30rem) {
  dl { grid-template-columns: 1fr; }
  .links .pair { flex-basis: 100%; }
  dd + dt { margin-top: var(--half); }
}

/* The viewer: the whole window, a bar above the file shown. */
html:has(#viewer[open]) { overflow: hidden; }
#viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--fg);
  background: var(--bg);
}
#viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--half) var(--side);
  padding: var(--step) var(--side);
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.viewer-tools { display: flex; align-items: baseline; gap: var(--side); white-space: nowrap; }
#viewer-prev, #viewer-next { padding: 0 var(--half); }
#viewer-body {
  position: relative;
  overflow: auto;
  padding: var(--step) var(--side);
  touch-action: pan-y;
}
#viewer-body.full { touch-action: auto; }
/* The content keeps to the middle 80%: a click on either side closes. */
#viewer-body > p { width: fit-content; max-width: 80%; margin: 0 auto; text-align: center; }
#viewer-body > pre {
  width: fit-content;
  max-width: min(52rem, 80%);
  margin: 0 auto;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Fitted and centred; at its own size, scrolled, once clicked. */
#viewer-body > img {
  position: absolute;
  inset: 0;
  max-width: 80%;
  max-height: 100%;
  margin: auto;
  cursor: zoom-in;
}
#viewer-body > video {
  position: absolute;
  inset: 0;
  max-width: 80%;
  max-height: 100%;
  margin: auto;
}
#viewer-body.full > img { position: static; max-width: none; max-height: none; cursor: zoom-out; }