/* בִּקּוֹרֶת — mobile-first, RTL. Logical properties throughout so nothing is
   hard-coded to left/right. No webfonts: the phone's own Hebrew face renders
   best and costs no request. */

:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --ink: #1a1d1a;
  --ink-soft: #5b625c;
  --line: #d9ddd6;
  --brand: #2f4534;
  --brand-ink: #f4f5f2;

  --good: #2e7d32;
  --good-bg: #e6f2e7;
  --fair: #b8860b;
  --fair-bg: #fbf3dd;
  --bad: #b3261e;
  --bad-bg: #fbe6e5;
  --muted-bg: #eceee9;

  --radius: 10px;
  --gap: 12px;
  --tap: 48px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding-block-end: env(safe-area-inset-bottom);
}

h1 { font-size: 1.35rem; margin-block: 0 .5rem; }
h2 { font-size: 1.1rem; margin-block: 1.25rem .5rem; }
h3 { font-size: 1rem; margin-block: .75rem .35rem; }
p { margin-block: 0 .75rem; }

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

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 14px;
  padding-block-start: max(10px, env(safe-area-inset-top));
  background: var(--brand);
  color: var(--brand-ink);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
}
.topbar a { color: var(--brand-ink); text-decoration: none; }
.topbar__home { font-weight: 700; letter-spacing: .02em; }
.topbar__nav { display: flex; gap: var(--gap); margin-inline-start: auto; font-size: .95rem; }
.topbar__nav a { opacity: .85; }
.topbar__nav a:hover { opacity: 1; }
.topbar__user { display: flex; align-items: center; gap: 8px; font-size: .85rem; opacity: .85; }

.page {
  max-inline-size: 780px;
  margin-inline: auto;
  padding: 14px 14px 96px;
}

.breadcrumb {
  font-size: .875rem;
  color: var(--ink-soft);
  margin-block-end: 10px;
}
.breadcrumb a { color: var(--ink-soft); }

/* ---------- surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-block-end: var(--gap);
}
.card--flush { padding: 0; overflow: hidden; }

.empty { text-align: center; color: var(--ink-soft); padding-block: 32px; }

.stack > * + * { margin-block-start: var(--gap); }

.row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}
.row--between { justify-content: space-between; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-block-start: 1px solid var(--line); }

.list__link {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 14px;
  min-block-size: var(--tap);
  text-decoration: none;
  color: inherit;
}
.list__link:active { background: var(--muted-bg); }
.list__main { flex: 1; min-inline-size: 0; }
.list__title { font-weight: 600; }
.list__meta { font-size: .85rem; color: var(--ink-soft); }
.list__chev { color: var(--ink-soft); }

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

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--muted-bg);
  color: var(--ink-soft);
}
.chip--good { background: var(--good-bg); color: var(--good); }
.chip--fair { background: var(--fair-bg); color: var(--fair); }
.chip--bad  { background: var(--bad-bg);  color: var(--bad); }

/* ---------- forms ---------- */

label { display: block; font-size: .9rem; font-weight: 600; margin-block-end: 4px; }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea { min-block-size: 84px; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.field + .field { margin-block-start: var(--gap); }
.field__hint { font-size: .8rem; color: var(--ink-soft); font-weight: 400; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: var(--tap);
  padding-inline: 18px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--ghost { background: transparent; color: var(--brand); }
.btn--block { inline-size: 100%; }
.btn--danger { background: var(--bad); border-color: var(--bad); }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- the checklist ---------- */

/* Deliberately NOT sticky: inside an overflow:hidden card a sticky header lands on
   top of the section's first item, and these sections are short enough that the
   heading stays in view anyway. */
.section__head {
  background: var(--brand);
  color: var(--brand-ink);
  padding: 8px 14px;
  font-weight: 700;
  font-size: .95rem;
}

/* .item is a <form> — see checks/_item.html.j2 — so reset the UA margin. */
.item { padding: 12px 14px; margin: 0; }
.item + .item { border-block-start: 1px solid var(--line); }
.item__label { font-weight: 500; margin-block-end: 8px; }
.item__help { font-size: .82rem; color: var(--ink-soft); }

/* Segmented three-state control. Radios are the real input — the label is the
   tap target — so it works with no JS and stays accessible. */
.seg { display: flex; gap: 6px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1;
  margin: 0;
  min-block-size: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.seg input:checked + label.seg--good { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.seg input:checked + label.seg--bad  { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad); }
.seg input:checked + label.seg--fair { background: var(--fair-bg); border-color: var(--fair); color: var(--fair); }
.seg input:checked + label.seg--muted { background: var(--muted-bg); border-color: var(--ink-soft); color: var(--ink); }
.seg input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 1px; }

.item__note { margin-block-start: 8px; }
.item__note textarea { min-block-size: 56px; }
/* A finding with no explanation is useless to the commander who has to close it. */
.item--finding { background: var(--bad-bg); }
.item--finding .item__note textarea { border-color: var(--bad); }

/* ---------- photo evidence ---------- */

.item__photos { margin-block-start: 10px; }

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 8px;
}
.thumb { position: relative; margin: 0; }
.thumbs img {
  inline-size: 84px;
  block-size: 84px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
}
.thumbs--sm img { inline-size: 56px; block-size: 56px; }

.thumb__x {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--bad);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* The native file input is unusable on a phone, so the label is the button and the
   input itself is visually hidden but still focusable and keyboard-operable. */
.photobtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 42px;
  padding-inline: 16px;
  margin: 0;
  border: 1px dashed var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.photobtn::before { content: "📷"; }
.photobtn input[type="file"] {
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  position: absolute;
}
.photobtn:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

.findinglist { margin: 0; padding-inline-start: 18px; }
.findinglist > li + li { margin-block-start: 6px; }

.savebar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 10px 14px;
  padding-block-end: max(10px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-block-start: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--gap);
  z-index: 20;
}
.savebar .btn { flex: 1; }
.saveflag { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.saveflag--ok { color: var(--good); }

.htmx-request .saveflag { opacity: .5; }

/* ---------- the נספח א' report ---------- */

.legend { display: flex; gap: 6px; margin-block-end: var(--gap); }
.legend > * { flex: 1; text-align: center; padding: 6px; border-radius: var(--radius); font-weight: 700; font-size: .85rem; }
.legend__good { background: var(--good-bg); color: var(--good); }
.legend__fair { background: var(--fair-bg); color: var(--fair); }
.legend__bad  { background: var(--bad-bg);  color: var(--bad); }

.report__banner {
  background: var(--fair-bg);
  color: var(--fair);
  border: 1px solid var(--fair);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-weight: 600;
  margin-block-end: var(--gap);
}

.tablewrap { overflow-x: auto; }

table.report {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
table.report th, table.report td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: start;
  vertical-align: top;
}
table.report thead th { background: var(--muted-bg); font-size: .85rem; }
table.report .actgroup { background: var(--brand); color: var(--brand-ink); font-weight: 700; writing-mode: horizontal-tb; }
table.report tr.tone-good td:first-child { border-inline-start: 4px solid var(--good); }
table.report tr.tone-fair td:first-child { border-inline-start: 4px solid var(--fair); }
table.report tr.tone-bad  td:first-child { border-inline-start: 4px solid var(--bad); }

.stat { display: flex; gap: var(--gap); flex-wrap: wrap; }
.stat__cell { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.stat__num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.stat__cap { font-size: .8rem; color: var(--ink-soft); }

.bar { display: flex; block-size: 10px; border-radius: 999px; overflow: hidden; background: var(--muted-bg); }
.bar__good { background: var(--good); }
.bar__fair { background: var(--fair); }
.bar__bad  { background: var(--bad); }

/* ---------- print: this is how the report leaves the building ---------- */

.printonly { display: none; }

@media print {
  .topbar, .savebar, .noprint, .btn, .photobtn, .thumb__x { display: none !important; }
  .printonly { display: block; }
  /* Photo evidence must survive into the printed report. */
  .thumbs img { inline-size: 90px; block-size: 90px; }
  body { background: #fff; font-size: 11pt; }
  .page { max-inline-size: none; padding: 0; }
  .card { border: 0; padding: 0; margin-block-end: 8pt; }
  .tablewrap { overflow: visible; }
  table.report { font-size: 9.5pt; }
  table.report th, table.report td { border: 1px solid #666; }
  table.report .actgroup { background: #ddd !important; color: #000 !important; }
  .legend__good, .legend__fair, .legend__bad,
  .chip--good, .chip--fair, .chip--bad,
  table.report thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  tr, .card { break-inside: avoid; }
}