/* Rule Confirm (Round 2): the same calm, spacious surface as round 1, now
   with a two-pane layout (question on the left, reference on the right),
   a login screen, and confirm/open answer controls. */

:root {
  --ink: #1f2a28;
  --ink-soft: #5b6b66;
  --line: #e4e8e6;
  --bg: #f6f8f7;
  --card: #ffffff;
  --green: #2e8b62;
  --green-dark: #24714f;
  --red: #cf4b3e;
  --red-dark: #b23a2f;
  --accent: #6ea583;
  --shadow: 0 10px 30px rgba(31, 42, 40, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win. Without this, rules like
   .modal { display: flex } override the browser's [hidden] { display: none }
   because they have equal specificity, so hidden panels would still show. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }

/* --- Login / gate --- */

.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gate-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px 44px;
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.gate-title { font-size: 30px; margin: 0 0 12px; letter-spacing: -0.01em; }
.gate-lead { font-size: 17px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; }
.gate-note { font-size: 14px; color: var(--ink-soft); margin: 18px 0 0; }

/* --- Top bar --- */

.review { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-wrap: wrap;
}

.topbar-left { display: flex; align-items: center; gap: 16px; }

/* Chevron nav in the sticky top bar, so Back/Next is always reachable even when
   a long question and an open reference panel push the bottom nav-row off
   screen. Kept compact so it does not crowd the bar. */
.topnav { display: inline-flex; align-items: center; gap: 6px; }
.navchev {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.navchev:hover { border-color: var(--accent); }
.navchev:disabled { opacity: 0.35; cursor: default; }
.topnav-pos { font-size: 13px; color: var(--ink-soft); min-width: 62px; text-align: center; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 18px; }
.progress { font-size: 15px; color: var(--ink-soft); }
.who { font-size: 14px; color: var(--ink-soft); }

/* Custom section dropdown: a native <select> popup positions unpredictably
   (it can open centered and clip at the top of the browser). This one always
   opens downward, scrolls when there are many sections, and gives us full
   control of the chevron spacing. */
.section-jump { position: relative; }

.section-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--ink);
  max-width: 340px;
}
.section-jump-btn:hover { border-color: var(--accent); }
.section-jump-btn:focus { outline: none; border-color: var(--accent); }

.section-jump-current {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.section-jump-chevron { color: var(--ink-soft); font-size: 12px; line-height: 1; flex-shrink: 0; }

.section-jump-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 440px;
  max-height: 72vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 40;
  padding: 6px;
}

/* Navigator head: title + the All / Unanswered filter. Sticks to the top so
   the filter stays reachable while the question list scrolls. */
.nav-head {
  position: sticky;
  top: -6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 10px;
  margin: -6px -6px 4px;
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
.nav-head-title { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.nav-filter { display: inline-flex; background: var(--bg); border-radius: 999px; padding: 3px; }
.nav-filter-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.nav-filter-btn.is-active { background: #fff; color: var(--green-dark); box-shadow: 0 1px 3px rgba(31,42,40,0.12); }

.nav-section { margin-bottom: 6px; }
.nav-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 4px;
}
.nav-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.nav-section-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}
.nav-section-count.is-done { color: var(--green-dark); background: #e7f3ec; }
.nav-section.is-current-section .nav-section-title { color: var(--green-dark); }

.nav-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
}
.nav-q:hover { background: var(--bg); }
.nav-q.is-current { background: #e7f3ec; }

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  flex-shrink: 0;
  margin-top: 4px;
}
.nav-q.is-answered .nav-dot { background: var(--green); border-color: var(--green); }

.nav-q-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-q-code { font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }
.nav-q.is-current .nav-q-code { color: var(--green-dark); }
.nav-q-text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-q.is-answered .nav-q-text { color: var(--ink-soft); }

.nav-empty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--ink-soft); }

.btn-add { font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 999px; }
.btn-showref { font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 999px; }
.btn-logout { padding: 8px 14px; }

/* --- Two-pane layout --- */

.layout {
  flex: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.layout.has-reference .main-col { border-right: 1px solid var(--line); }

.main-col { flex: 1; min-width: 0; display: flex; }

.stage {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 48px;
  display: flex;
  flex-direction: column;
  /* Top-aligned, not centered: when the reference panel narrows this column
     the question wraps taller, and centering would push the Back/Next row off
     the bottom of the screen. Anchored to the top, the page simply scrolls and
     the nav stays reachable. */
  justify-content: flex-start;
}

/* --- Rule card --- */

.rule-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 40px 36px;
}

.rule-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.rule-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.rule-label.is-open { color: #b7791f; }

.rule-meta { font-size: 14px; color: var(--ink-soft); }

.rule-statement {
  font-size: 24px;
  line-height: 1.42;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

.rule-answered {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-block;
}
.rule-answered.is-yes { background: #e7f3ec; color: var(--green-dark); }
.rule-answered.is-no { background: #fbe9e7; color: var(--red-dark); }

/* --- Answer buttons (confirm) --- */

.answer-row { display: flex; gap: 18px; margin-top: 26px; }

.btn-answer {
  flex: 1;
  border: none;
  border-radius: var(--radius);
  padding: 22px 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.btn-answer:hover { filter: brightness(1.05); }
.btn-answer:active { transform: translateY(1px); }
.btn-answer.is-chosen { outline: 3px solid rgba(31, 42, 40, 0.18); outline-offset: 2px; }
.answer-word { font-size: 24px; font-weight: 700; }
.answer-sub { font-size: 14px; opacity: 0.9; }

.btn-no { background: var(--red); order: 1; }
.btn-yes { background: var(--green); order: 2; }

/* --- Inline note / open answer actions --- */

.inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.save-hint { font-size: 13px; color: var(--ink-soft); margin-right: auto; }
.save-hint.is-saved { color: var(--green-dark); }

/* --- Nav --- */

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.nav-hint { font-size: 14px; color: var(--ink-soft); }

.btn-quiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
}
.btn-quiet:hover { border-color: var(--accent); color: var(--ink); }
.btn-quiet:disabled { opacity: 0.4; cursor: default; }

.done-banner {
  margin: 28px auto 0;
  padding: 16px 22px;
  background: #e7f3ec;
  color: var(--green-dark);
  border-radius: 14px;
  font-size: 16px;
  text-align: center;
}

/* --- Reference panel --- */

.ref-col {
  width: 420px;
  flex-shrink: 0;
  background: var(--card);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 58px);
  position: sticky;
  top: 58px;
}

/* The head stays put; only the body scrolls, so a long table never pushes the
   Hide control out of reach and the whole panel is always navigable. */
.ref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ref-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 32px;
}
.ref-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.ref-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}
.ref-close:hover { border-color: var(--accent); color: var(--ink); }

.ref-block { margin-bottom: 22px; }
.ref-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.ref-item-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-dark);
  background: #e7f3ec;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.ref-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ref-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ref-table th, .ref-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ref-table th {
  background: #f0f4f2;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.ref-table tr:last-child td { border-bottom: none; }

.ref-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.ref-note { font-size: 14px; line-height: 1.55; color: var(--ink); }
.ref-truncated { font-size: 12px; color: var(--ink-soft); margin-top: 8px; font-style: italic; }

/* --- Buttons (shared) --- */

.btn-primary {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}
.btn-primary:hover { background: var(--green-dark); }

.btn-ghost { background: #eef4f1; border: none; color: var(--green-dark); }
.btn-ghost:hover { background: #e2ede7; }

.btn-block { width: 100%; margin-top: 8px; }

/* --- Inputs --- */

.field-label {
  display: block;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 18px 0 8px;
}

.text-input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.text-input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
}
.textarea { resize: vertical; }

/* --- Modals --- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 40, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 20;
}

.modal-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 34px 28px;
  width: 100%;
  max-width: 520px;
}

.modal-title { font-size: 22px; margin: 0 0 8px; }
.modal-lead { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 18px; }
.modal-error { color: var(--red-dark); font-size: 14px; margin: 12px 0 0; text-align: left; }

.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* --- Classification chips --- */

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.chip:hover { border-color: var(--accent); }
.chip.is-active { background: var(--green); color: #fff; border-color: var(--green); }

/* --- Toast --- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  z-index: 30;
  box-shadow: var(--shadow);
}

/* --- Narrow screens: stack the reference panel under the question --- */

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .layout.has-reference .main-col { border-right: none; }
  .ref-col {
    width: 100%;
    position: static;
    max-height: none;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .rule-statement { font-size: 21px; }
  .stage { padding: 28px 16px; }
  .rule-card { padding: 28px 22px; }
  .topbar { padding: 12px 16px; }
  .brand { display: none; }
  .section-jump { max-width: 180px; }
}