/* Biotop-Helper — Hebrew RTL, dark "field notebook" theme.
   Same family as video-prep / Time-tracker / Plant-Care: near-black ground,
   one warm accent, Rubik for headings and Heebo for body. Deliberately quiet —
   this screen is read mid-lesson on a phone held sideways over a folder. */

:root {
  --bg: #0e1412;
  --panel: #16201d;
  --panel-2: #1d2926;
  --line: #2a3a35;
  --ink: #e8f0ec;
  --ink-dim: #9db0a8;
  --accent: #4fd1a5;          /* biotope green — the one accent */
  --accent-ink: #06231a;
  --warn: #f0b429;
  --bad: #f2645a;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Heebo, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: Rubik, Heebo, sans-serif; line-height: 1.3; margin: 0 0 .4em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }

a { color: var(--accent); }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 18px; }

/* ---------- top bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(14, 20, 18, .92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Rubik, sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--ink); text-decoration: none;
}
.brand-mark {
  width: 13px; height: 13px; border-radius: 50% 50% 50% 2px;
  background: var(--accent); flex: none;
}
.code-chip {
  font-family: ui-monospace, "Courier New", monospace;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: .9rem; color: var(--ink-dim);
}
.btn-link { color: var(--ink-dim); text-decoration: none; font-size: .92rem; }
.btn-link:hover { color: var(--ink); }

/* ---------- cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 18px 0;
}
.enter-card { margin-top: 40px; }
.lede { color: var(--ink-dim); margin-top: 0; }
.members { color: var(--ink-dim); font-size: .95rem; margin-top: -.4em; }
.group-title { margin-top: 24px; }
.fineprint { color: var(--ink-dim); font-size: .86rem; }
.rubric-note { color: var(--ink-dim); font-size: .88rem; margin: 4px 2px 0; }

/* ---------- forms ---------- */
.enter-form { display: grid; gap: 8px; margin: 18px 0 8px; }
.enter-form label { font-size: .9rem; color: var(--ink-dim); }
input[type="text"], input[type="password"], .enter-form input {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: inherit; width: 100%;
}
.enter-form input:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button {
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 10px; padding: 12px 18px;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }

/* ---------- alerts ---------- */
.alert { border-radius: 10px; padding: 12px 14px; margin: 12px 0; border: 1px solid; }
.alert.compact { margin-bottom: 0; padding: 9px 12px; font-size: .9rem; }
.alert-bad  { border-color: var(--bad);    background: rgba(242,100,90,.10); }
.alert-warn { border-color: var(--warn);   background: rgba(240,180,41,.10); }
.alert-ok   { border-color: var(--accent); background: rgba(79,209,165,.10); }
.alert p:first-child { margin-top: 0; }
.alert p:last-child { margin-bottom: 0; }

.badge {
  display: inline-block; font-size: .78rem; padding: 2px 9px;
  border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--ink-dim);
}
.badge-ok   { border-color: var(--accent); color: var(--accent); }
.badge-warn { border-color: var(--warn);   color: var(--warn); }

/* ---------- the honesty card on the entry screen ---------- */
.contract { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.contract summary { cursor: pointer; color: var(--ink-dim); font-size: .93rem; }
.contract-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.contract-list li { font-size: .95rem; }
.contract-list .no { color: var(--ink-dim); }

/* ---------- research route ---------- */
.branch-buttons { display: flex; gap: 10px; margin: 6px 0 10px; }
.branch-btn {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); flex: 1;
}
.branch-btn.is-on {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* ---------- chapters + checklist ---------- */
.chapter-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.chapter-head h2 { margin: 0; }
.chapter-meta { display: flex; align-items: center; gap: 10px; }
.weight-pill {
  font-family: Rubik, sans-serif; font-size: .82rem; font-weight: 500;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; color: var(--ink-dim);
}
.count { font-size: .86rem; color: var(--ink-dim); white-space: nowrap; }

.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.item {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 8px; padding: 9px 4px; border-top: 1px solid var(--line);
  transition: background .2s;
}
.item:first-child { border-top: 0; }
.item label { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.item input[type="checkbox"] {
  /* Big enough to hit with a thumb on a phone held over a folder. */
  width: 22px; height: 22px; margin: 2px 0 0; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.item input:disabled { cursor: default; }
.item-text { flex: 1; }
.item.save-failed { background: rgba(242,100,90,.14); }

.info-btn {
  background: none; border: 0; color: var(--ink-dim);
  font-size: 1.05rem; padding: 2px 6px; line-height: 1.4;
}
.info-btn:hover { color: var(--accent); }
.source {
  grid-column: 1 / -1; margin: 2px 0 4px 0;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-dim); font-size: .88rem;
}

/* ---------- submit ---------- */
.submit-form { display: grid; gap: 14px; }
.submit-form label { font-size: .92rem; color: var(--ink-dim); display: block; margin-bottom: 4px; }
.submit-form textarea, .submit-form input[type="url"], .submit-form input[type="file"] {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font: inherit; width: 100%;
}
.submit-form textarea { min-height: 120px; resize: vertical; font-size: .95rem; }
.or-rule {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-dim); font-size: .84rem; margin: 2px 0;
}
.or-rule::before, .or-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
/* What the checker actually read back. Monospace and pre-wrap on purpose: a
   group has to be able to spot a mangled line, and a proportional font hides
   exactly the kind of damage worth spotting. */
.extract {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; max-height: 340px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: .84rem; line-height: 1.6; color: var(--ink-dim);
  direction: rtl; text-align: right;
}

/* ---------- feedback: two columns, never merged ---------- */
.legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  color: var(--ink-dim); font-size: .85rem; margin: 6px 2px 0;
}
.legend-note { opacity: .75; }

.v { font-size: 1.05rem; line-height: 1; }
.v-present { color: var(--accent); }
.v-partial { color: var(--warn); }
.v-missing { color: var(--ink-dim); }

.fbrow { padding: 14px 0; border-top: 1px solid var(--line); }
.fbrow:first-of-type { border-top: 0; }
.fbrow-head {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: 10px; align-items: start;
}
/* The students' own tick, kept visually distinct from the checker's verdict —
   they are two different claims and merging them would destroy the one screen
   that teaches the most. */
.claim { color: var(--ink-dim); font-size: 1.05rem; line-height: 1; }
.crit { margin: 0; font-weight: 500; }

.verdict { margin: 8px 0 0; }
.gap { margin: 6px 0 0; color: var(--ink-dim); }
/* The students' own words, quoted back as evidence — the one thing on this
   screen that must be unmistakably distinct from our commentary.
   It carries that on a recessed panel plus the ״…״ marks the template already
   wraps it in. It used to also have a 3px accent rail, which was redundant with
   both, and left accent-green doing three unrelated jobs on one page (this, the
   "next step" tag, and the quiet-win note). One meaning per colour. */
.quote {
  margin: 8px 0 0; padding: 9px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: .93rem;
}
.improve { margin: 8px 0 0; }
.improve-tag {
  display: inline-block; font-size: .74rem; font-weight: 500;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 1px 9px; margin-inline-end: 6px;
  vertical-align: 1px;
}
.flag { color: var(--warn); }
.win-note { color: var(--accent); }

/* The dispute — still the loudest thing on the page, but carried by the tint
   and by the bolded callout inside the row, not by an accent rail.
   The rails that used to be here encoded state by COLOUR ALONE, which the row
   already states in three non-chromatic ways: the ☑/○ pair, the ✅/◐/○ glyph,
   and a full sentence. So they were redundant — and a green-vs-amber stripe is
   exactly the distinction that fails for a colourblind reader. */
.fbrow.is-dispute {
  background: rgba(240,180,41,.07);
  padding: 14px 12px; border-radius: 10px;
}
/* is-win needs no treatment at all: a green ✅ and the line "לא סימנתם את זה,
   אבל זה שם" already say it, and a whole rail over-signals a minor positive. */
.dispute { margin-top: 10px; }
.dispute-form { display: grid; gap: 8px; margin-top: 8px; }
.dispute-form textarea {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .94rem;
  resize: vertical;
}
.dispute-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dispute-actions button { font-size: .9rem; padding: 9px 14px; }
.dispute-msg { margin: 0; font-size: .9rem; }
.dispute-msg.is-ok { color: var(--accent); }
.dispute-msg.is-bad { color: var(--bad); }

/* ---------- teacher table ---------- */
.table-scroll { overflow-x: auto; }
.groups { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
.groups th, .groups td {
  text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line);
}
.groups th { color: var(--ink-dim); font-weight: 500; font-size: .86rem; }
.groups code { font-family: ui-monospace, "Courier New", monospace; }
.rubric-status { color: var(--ink-dim); }

/* ---------- footer ---------- */
.foot {
  color: var(--ink-dim); font-size: .85rem;
  border-top: 1px solid var(--line); margin-top: 34px; padding-top: 14px;
  padding-bottom: 34px;
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .card { padding: 15px 15px; }
  h1 { font-size: 1.4rem; }
}