/*
 * Mobile first. Everything is sized for one thumb: 44px minimum tap targets,
 * a single column, and no horizontal scrolling anywhere.
 */
:root {
  --blue: #2c6aa0;
  --ink: #2b3a47;
  --muted: #7a8996;
  --line: #dfe5ea;
  --bg: #f2f5f8;
  --right-bg: #dff3e4;
  --right-line: #4a9c68;
  --wrong-bg: #fbe3e1;
  --wrong-line: #c0554b;
  --red: #b3372e;
  --tap: 44px;
}

/*
 * `element.hidden = true` leans on the user-agent stylesheet's
 * `[hidden] { display: none }`. Author declarations outrank the user-agent
 * origin whatever their specificity, so any rule setting `display` on such an
 * element silently defeats hiding it. This makes hiding win.
 */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overscroll-behavior-y: contain;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: calc(var(--tap) + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--blue);
  color: #fff;
}

.topbar h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

main {
  padding: 12px;
}

.lead {
  margin: 24px 0 16px;
  text-align: center;
  color: var(--muted);
}

.file-button {
  display: block;
  min-height: var(--tap);
  padding: 12px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.bar {
  height: 6px;
  margin: 12px 0 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.15s linear;
}

.hint {
  font-size: 13px;
  color: var(--muted);
}

.status {
  min-height: 20px;
  font-size: 14px;
}

.status.ok {
  color: var(--right-line);
}

.status.error {
  color: var(--red);
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  border-top: 1px solid var(--line);
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
}

.tab.is-active {
  color: var(--blue);
  font-weight: 600;
}

/* Lists -------------------------------------------------------------- */

.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
}

.row-glyph {
  flex: none;
  width: 1.2em;
  color: var(--blue);
  text-align: center;
}

.row-text {
  flex: 1;
  /* Official subcategory names run to several lines; let them. */
  overflow-wrap: anywhere;
}

.row-count {
  flex: none;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Question card ------------------------------------------------------ */

.card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.position {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}

.mark-button {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.mark-button.is-marked {
  border-color: var(--blue);
  color: var(--blue);
}

.qtext {
  margin: 0 0 12px;
  font-size: 17px;
}

.qimage {
  display: block;
  width: 100%;
  max-height: 45vh;
  margin: 0 0 12px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.required {
  margin: -6px 0 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--blue);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.choice input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
}

.choice.is-right {
  background: var(--right-bg);
  border-color: var(--right-line);
}

.choice.is-wrong {
  background: var(--wrong-bg);
  border-color: var(--wrong-line);
}

.explanation {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.explanation-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #eef3f7;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}

.explanation-body {
  padding: 10px 12px;
  font-size: 15px;
}

.explanation-body.is-missing {
  color: var(--muted);
  font-style: italic;
}

.actions {
  margin-top: 14px;
}

.actions button {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--blue);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}

.actions button.primary {
  background: var(--blue);
  color: #fff;
}

/* Filter chips ------------------------------------------------------- */

.chips {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chip {
  flex: 1;
  min-height: var(--tap);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
}

.chip.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

.section-head {
  margin: 28px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}