/*
  Same palette as the verification portal and the desktop application, so the three do not
  look like three products. No framework and no build step, for the same reason as the portal:
  a page with no dependencies is a page that still works when nobody here remembers how it
  was built.
*/
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #16191d;
  --muted: #5d6470;
  --line: #e2e5ea;
  --ok: #0d7a3e;
  --ok-bg: #e8f6ee;
  --bad: #b3261e;
  --bad-bg: #fdeceb;
  --warn: #8a5a00;
  --warn-bg: #fdf3e0;
  --accent: #1d4ed8;
  --accent-bg: #eaf0fe;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101317; --card: #181c22; --ink: #e8eaed; --muted: #9aa2af;
    --line: #2a3038; --ok: #4ade80; --ok-bg: #10291b; --bad: #f87171;
    --bad-bg: #2c1614; --warn: #fbbf24; --warn-bg: #2a2110; --accent: #60a5fa;
    --accent-bg: #16233d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

button {
  font: inherit;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
button.small { padding: 4px 10px; font-size: 0.85rem; }

input, textarea, select {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 12px 0 4px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.muted { color: var(--muted); font-size: 0.87rem; }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.banner { border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; font-size: 0.9rem; }
.banner.bad  { background: var(--bad-bg);  color: var(--bad);  border: 1px solid var(--bad); }
.banner.ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }

/* ---------- Sign in ---------- */

#signin { max-width: 380px; margin: 12vh auto; padding: 0 16px; }
#signin h1 { font-size: 1.2rem; margin: 0 0 4px; }

/* ---------- Shell ---------- */

header.bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
header.bar strong { font-size: 0.98rem; }

main { padding: 20px; max-width: 1240px; margin: 0 auto; }

/* ---------- Document list ---------- */

.doc {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.doc:last-child { border-bottom: 0; }
.doc .name { font-weight: 600; }
.pill {
  font-size: 0.75rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.pill.marked { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.pill.collected { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

/* ---------- Marking ---------- */

.marking { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .marking { grid-template-columns: 1fr; } }

#pagewrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
#pageimg { display: block; max-width: 100%; height: auto; cursor: crosshair; }

/*
  Markers are positioned as percentages of the page image, which is the same 0..1 space the
  mark itself is stored in — so what is shown here cannot drift from what the signer's app
  will draw, however the image is scaled by the browser.
*/
.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1.5px dashed var(--muted);
  background: rgba(125, 125, 125, 0.10);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1.1; text-align: center;
  color: var(--muted);
  padding: 2px;
  overflow: hidden;
}
.marker.signature { border-color: var(--accent); color: var(--accent); background: rgba(29, 78, 216, 0.09); }
.marker.restricted { border-color: var(--warn); color: var(--warn); background: rgba(138, 90, 0, 0.10); }

.markitem { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.markitem .kind { font-weight: 600; font-size: 0.9rem; }
.markitem.signature .kind { color: var(--accent); }

/* ---------- The kind picker ---------- */

#picker {
  position: absolute; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 6px; min-width: 230px; line-height: 1.4;
}
#picker .group {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 8px 10px 4px;
}
#picker button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 7px 10px; border-radius: 5px; font-size: 0.9rem;
}
#picker button:hover { background: var(--accent-bg); }
#picker button .restricted { color: var(--warn); font-size: 0.78rem; }