/* Interface language of the system. Every screen loads this file.
 *
 * Decided with the user (2026-10-19):
 *  - Phone first: right on a small phone; on tablet/computer content keeps
 *    a comfortable width and never stretches.
 *  - Standard Hebrew right-to-left conventions (full mirroring).
 *  - Font: Rubik, served from our own server (works offline, nothing
 *    leaves the system).
 *  - Text in full black; all grays neutral (no warm or cool tint).
 *  - Message dialogs: see "Dialog" below.
 */

/* ---------- Font ---------- */
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/static/fonts/rubik-hebrew-400-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/static/fonts/rubik-hebrew-500-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/static/fonts/rubik-hebrew-600-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/static/fonts/rubik-hebrew-700-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/static/fonts/rubik-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/static/fonts/rubik-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/static/fonts/rubik-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/static/fonts/rubik-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }

/* ---------- Tokens ---------- */
:root {
  --ink: #000000;              /* all text */
  --ink-soft: #4a4a4a;         /* secondary text, hints */
  --page: #f2f2f2;             /* page background */
  --surface: #ffffff;          /* cards, dialogs */
  --gray-row: #e3e3e3;         /* dialog button row */
  --line: #9a9a9a;             /* divider lines */
  --line-soft: #cfcfcf;

  --blue: #0a64c8;   --blue-bg: #dcebfb;    /* normal, cancel */
  --green: #1a7f37;  --green-bg: #dcf2e2;   /* success, confirm */
  --red: #c62828;    --red-bg: #fbe1e1;     /* danger, destructive */
  --brand: #1f3a5f;  --accent: #e8710a;     /* system navy and orange */

  --font: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
  --text: 16px;                /* body */
  --title: 19px;               /* ~1.15x body */
  --radius: 14px;
  --content-max: 640px;        /* content never stretches wider (A4 pages excepted) */
  --dialog-width: 340px;       /* dialogs keep phone width everywhere */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The bar over a sent investigation (forms/sent-bar.js): back on the right,
   edit / other view / print on the left. Never printed. */
.sent-bar { position: sticky; top: 0; z-index: 10; padding: 10px 16px;
            background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
/* As wide as the page below it: the content column, or the A4 page (the
   report sets --bar-w to the page's shown width). */
.sent-bar-in { display: flex; gap: 8px; align-items: center; max-width: var(--bar-w, var(--content-max)); margin: 0 auto; }
.sent-bar a, .sent-bar button { font: inherit; font-size: 16px; font-weight: 600; color: var(--blue); background: none; border: 0;
                                text-decoration: none; cursor: pointer; padding: 4px 8px; }
.sent-bar a:first-child { margin-left: auto; padding-right: 0; }
.sent-bar-in > :last-child { padding-left: 0; }
@media print { .sent-bar { display: none; } }

/* Hidden means hidden, whatever display a class gives. */
[hidden] { display: none !important; }
body {
  margin: 0; direction: rtl; font-family: var(--font); font-size: var(--text);
  color: var(--ink); background: var(--page); line-height: 1.5;
}
.content { max-width: var(--content-max); margin: 0 auto; padding: 16px; }

/* ---------- Dialog ----------
 * Dimmed backdrop, centered white box, BLACK medium border, title in a
 * header band colored by type (blue normal, green success, red danger),
 * body in full black, 1-2 text buttons in a gray row split by lines:
 * confirm on the right, cancel on the left. A tap outside does not close.
 */
.dlg-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dlg {
  width: 100%; max-width: var(--dialog-width); background: var(--surface);
  border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden;
}
.dlg-head {
  padding: 12px 14px; text-align: center; font-size: var(--title); font-weight: 600;
  border-bottom: 1px solid var(--line); background: var(--blue-bg);
}
.dlg-head .ico { margin-left: 6px; color: var(--blue); }
.dlg.success .dlg-head { background: var(--green-bg); }
.dlg.success .dlg-head .ico { color: var(--green); }
.dlg.danger .dlg-head { background: var(--red-bg); }
.dlg.danger .dlg-head .ico { color: var(--red); }
.dlg-body { padding: 14px; text-align: center; overflow-wrap: anywhere; white-space: pre-line; }
.dlg-body input {
  display: block; width: 100%; margin-top: 10px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.dlg-body input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.dlg-buttons { display: flex; background: var(--gray-row); border-top: 1.5px solid var(--line); }
.dlg-buttons button {
  flex: 1; font: inherit; font-size: 17px; padding: 13px 0; min-height: 48px;
  background: none; border: 0; cursor: pointer; color: var(--blue);
}
.dlg-buttons button + button { border-right: 1.5px solid var(--line); }
.dlg-buttons button.confirm { color: var(--green); font-weight: 600; }
.dlg-buttons button.destructive { color: var(--red); font-weight: 600; }
.dlg-buttons button:active { background: rgba(0, 0, 0, .08); }

/* ---------- Form (phase-1 plain view) ---------- */
.f-section { background: var(--surface); border: 1.5px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px 6px; margin: 0 0 14px; }
.f-section h2 { font-size: var(--title); font-weight: 600; margin: 0 0 10px; }
.f-field { margin: 0 0 16px; }
.f-label { display: flex; align-items: center; gap: 6px; font-weight: 500; margin-bottom: 6px; }
.f-label .req { color: var(--red); font-weight: 700; }
.f-lock.pub { color: var(--blue); border-color: var(--blue); }
.f-lock { margin-right: auto; font-size: 13px; font-weight: 500; color: var(--ink-soft);
          border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.f-field input, .f-field select, .f-field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 48px;
}
.f-field textarea { resize: vertical; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg);
}
.f-seg, .f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-seg button, .f-chips button {
  font: inherit; min-height: 48px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
}
.f-seg button { flex: 1; }
.f-seg button.on, .f-chips button.on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.f-hint { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.f-error { display: none; color: var(--red); font-size: 14px; font-weight: 500; margin-top: 4px; }
.f-field.missing .f-error { display: block; }
.f-field.missing input, .f-field.missing select, .f-field.missing textarea,
.f-field.missing .f-seg button { border-color: var(--red); }
.f-photo-btn {
  width: 100%; min-height: 48px; font: inherit; font-weight: 500; cursor: pointer; border-radius: 10px;
  background: var(--surface); color: var(--blue); border: 1.5px dashed var(--blue);
}

/* ---------- Form being filled (.f-form) ----------
   Chapter: a tinted block with a numbered heading. Field: one frame, a
   slim label strip on top and the value below, without inner frames. */
.f-form .f-section { background: #e9edf2; border: 0; border-radius: 12px; padding: 10px 8px 2px; margin: 0 0 14px; }
.f-form .f-section h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--navy); margin: 0 2px 10px; }
.f-form .f-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff;
                 display: flex; align-items: center; justify-content: center; font-size: 14px; }
.f-form .f-field { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 14px; }
.f-form .f-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.f-form .f-label { display: flex; align-items: center; gap: 4px; margin: 0; padding: 2px 10px; line-height: 1.4;
                   background: #f4f5f7; border-bottom: 1px solid var(--line-soft); font-size: 12px; font-weight: 400; color: #444; }
.f-form .f-lock { font-size: 11px; line-height: 1.3; padding: 0 6px; font-weight: 400; }
.f-form h2 .f-lock { font-size: 12px; color: var(--ink-soft); }
.f-form .f-body { padding: 5px 10px; }
.f-form .f-body > input, .f-form .f-body > select, .f-form .f-body > textarea {
  border: 0; border-radius: 0; padding: 2px 0; min-height: 28px; font-size: 16px; box-shadow: none; background: transparent; }
.f-form .f-body > input:focus, .f-form .f-body > select:focus, .f-form .f-body > textarea:focus { box-shadow: none; }
.f-form .f-seg button, .f-form .f-chips button { min-height: 36px; }
.f-form .f-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; align-items: start; }
.f-form .f-grid > .f-field { grid-column: 1 / -1; }
.f-form .f-grid > .f-field.half { grid-column: span 3; }
.f-form .f-grid > .f-field.third { grid-column: span 2; }
.f-form .f-grid > .f-field.half.second { grid-column: 4 / span 3; }
.f-form .f-field.third .f-label { padding: 2px 6px; }
.f-form .f-field.third .f-body { padding: 5px 6px; }
.f-form .f-field.third .f-seg { gap: 4px; }
.f-form .f-field.third .f-seg button { padding: 0 4px; }
.f-form .f-static { min-height: 28px; padding: 2px 0; font-size: 16px; color: var(--ink-soft); }
.f-form .f-seg button.on.c-red { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.f-form .f-seg button.on.c-orange { background: #fde7d2; border-color: #c2570c; color: #9a3f06; }
.f-form .f-table { padding: 0; }
.f-form .f-trow { display: grid; column-gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }   /* the phone keeps it tight; the page adds room (report.css) */
.f-form .f-trow:last-child { border-bottom: 0; }
.f-form .f-trow.head { padding-top: 2px; }
.f-form .f-th { font-size: 12px; color: #444; text-align: center; }
.f-form .f-tr { font-size: 14px; line-height: 1.25; }
.f-form .f-cell { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--line); }
.f-form .f-cell button { flex: 1; font: inherit; font-size: 12px; border: 0; padding: 0; background: #fff; cursor: pointer; }
.f-form .f-cell button + button { border-right: 1.5px solid var(--line); }
.f-form .f-cell button.c-green { color: var(--green); }
.f-form .f-cell button.c-orange { color: #9a3f06; }
.f-form .f-cell button.on.c-green { background: var(--green); color: #fff; font-weight: 600; }
.f-form .f-cell button.on.c-orange { background: #e8710a; color: #fff; font-weight: 600; }
.f-form .f-na { height: 34px; border-radius: 8px; background: #eef0f3; display: flex; align-items: center; justify-content: center; color: #aaa; }
.f-form .f-group { grid-column: 1 / -1; }
.f-form .f-item { background: #d5dde7; border-radius: 12px; padding: 8px 8px 2px; margin-bottom: 12px; }
.f-form .f-item > .f-field { margin-bottom: 6px; }
.f-form .f-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.f-form .f-slot-add { width: 100%; min-height: 36px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
                      border-radius: 8px; background: #fff; color: var(--blue); border: 1.5px dashed var(--blue);
                      display: flex; align-items: center; justify-content: center; gap: 4px; }
.f-form .f-slot.full { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--line); }
.f-form .f-slot.full img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-form .f-field.missing { border-color: var(--red); }
.f-form .f-field.missing .f-label { background: var(--red-bg); }

/* ---------- Connection bar and draft pages ---------- */
.net-bar { display: none; position: sticky; top: 0; z-index: 900; background: #fff4d6; color: var(--ink);
           border-bottom: 1.5px solid #c99a00; padding: 10px 16px; font-weight: 500; text-align: center; }
.net-bar.on { display: block; }
.saved { font-size: 14px; color: var(--green); min-height: 21px; }
.btn { display: block; width: 100%; min-height: 52px; font: inherit; font-size: 17px; font-weight: 600;
       border-radius: 12px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
       cursor: pointer; text-align: center; text-decoration: none; line-height: 48px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.wait { background: #d6d6d6; border-color: #9a9a9a; color: #4a4a4a; }
.btn.danger { color: var(--red); border-color: var(--red); }
.row { display: flex; gap: 10px; margin: 10px 0; } .row > * { flex: 1; }
.list { list-style: none; padding: 0; margin: 12px 0; }
.list a { display: block; background: var(--surface); border: 1.5px solid var(--line-soft); border-radius: 12px;
          padding: 12px 14px; margin-bottom: 10px; color: var(--ink); text-decoration: none; }
.list a .when { display: block; font-size: 14px; color: var(--ink-soft); }
.empty { color: var(--ink-soft); text-align: center; padding: 24px 0; }
.f-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.f-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line); }
.f-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-thumb-x { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; border: 0;
             background: rgba(0, 0, 0, .65); color: #fff; font-size: 18px; line-height: 28px; cursor: pointer; padding: 0; }

/* ---------- Form view (read only) ---------- */
.v-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.v-row:last-child { border-bottom: 0; }
.v-label { font-size: 14px; color: var(--ink-soft); margin-bottom: 2px; }
.v-value { font-weight: 500; }
.v-value.long { white-space: pre-wrap; font-weight: 400; }
.v-empty { color: var(--ink-soft); padding: 4px 0 10px; }
button.f-thumb { padding: 0; cursor: zoom-in; background: none; }
.photo-full { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .9);
              display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 16px; }
.photo-full img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 6px; }
.photo-close { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px;
               font: inherit; font-size: 17px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .14);
               border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.meta-line { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.history { font-size: 14px; color: var(--ink-soft); }
.history li { margin-bottom: 2px; }

/* ======================================================================
 * Page template (task 2.1). Every page:
 *   fixed top block = white header (back · title · Tzomet logo → home)
 *                   + navy panel (company right · user left) with ONE
 *                     white message box that always keeps its shape,
 *                     ending in a shadow;
 *   below it the scrolling content, which runs to the screen edge.
 *   No footer. On large screens the content keeps a phone-like width
 *   in the middle; the top block spans the full width.
 * ====================================================================== */
:root { --navy: #1f3a5f; --top-h: 150px; }
body.tpl { background: #fff; }
.top { position: sticky; top: 0; z-index: 800; }
.hdr { background: #fff; }
.hdr-in, .panel-in, .page { max-width: var(--content-max); margin: 0 auto; }
.hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; padding: 0 12px; }
.hdr .back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 16px;
             font-weight: 500; color: var(--blue); background: none; border: 0; padding: 10px 4px; cursor: pointer; }
.hdr .back[hidden] { display: none; }
.hdr h1 { margin: 0; font-size: 18px; font-weight: 600; text-align: center; white-space: nowrap; }
.hdr .logo { justify-self: end; display: block; line-height: 0; padding: 6px 0; }
.hdr .logo img { height: 30px; width: auto; }
.panel { background: var(--navy); color: #fff; box-shadow: 0 5px 12px rgba(0, 0, 0, .3); }
.panel-in { padding: 4px 12px 10px; }
.ident { display: flex; justify-content: space-between; align-items: center; gap: 8px;
         font-size: 14px; padding: 2px 0 7px; min-height: 26px; }
.ident span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ident .offline { display: none; background: #e8710a; color: #fff; border-radius: 8px; padding: 0 8px;
                  font-size: 12px; font-weight: 600; white-space: nowrap; }
body.is-offline .ident .offline { display: inline-block; }
.msg { background: #fff; color: var(--ink); border-radius: 10px; min-height: 40px; padding: 6px 10px;
       display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.35; }
.msg .ico { flex: none; }
.msg.warn .ico { color: #b07b00; } .msg.ok .ico { color: var(--green); } .msg.bad .ico { color: var(--red); }
.msg .promo { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; }
.msg .promo b { color: var(--navy); font-size: 15px; font-weight: 700; }
.msg .promo span { color: #e8710a; font-size: 13px; font-weight: 500; }
.msg .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .act { flex: none; font: inherit; font-size: 16px; font-weight: 600; background: #e8710a; color: #fff;
            border: 0; border-radius: 9px; padding: 8px 18px; cursor: pointer; }
.msg .act:active { filter: brightness(.9); }
.page { min-height: calc(100dvh - var(--top-h)); display: flex; flex-direction: column; }

/* Selection screen: up to 4 full-width buttons, pinned to the bottom, and an
   optional fifth one (the manager's) pinned at the top. */
.choices-top { padding: 16px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.choices { margin-top: auto; padding: 16px 14px 22px; display: flex; flex-direction: column; gap: 12px; }
.choice { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 18px; border-radius: 14px;
          background: #fff; color: var(--ink); border: 2px solid var(--ink); font-size: 18px; font-weight: 600;
          text-decoration: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: transform .06s; }
.choice .ci { font-size: 24px; color: var(--navy); }
.choice.main { background: var(--navy); border-color: var(--navy); color: #fff; }
.choice.main .ci { color: #fff; }
.choice:active { transform: translateY(2px); box-shadow: none; }
/* Title of the buttons under it, in one button's place. */
.choices-head { min-height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
                font-size: 23px; font-weight: 700; color: var(--navy); text-align: center; }

/* List: continuous rows to the screen edge, tag + chevron, floating hint. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
          color: var(--ink); text-decoration: none; }
.rows a:active { background: #f2f2f2; }
.rows .rt { flex: 1; min-width: 0; }
.rows .rl { flex: none; width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.rows .rl b { display: block; font-weight: 600; }
.rows .rl small { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.rows .dot { flex: none; color: var(--line); font-size: 18px; }
.rows .rt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .rt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .rt small { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.rows .tag { flex: none; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 1px 8px; background: var(--blue-bg); color: var(--blue); }
.rows .tag.solid { background: var(--blue); color: #fff; }
.rows .tag.ok { background: var(--green-bg); color: var(--green); }
.rows .tag.warn { background: #fde7d2; color: #b45309; }
.rows .tag.bad { background: var(--red-bg); color: var(--red); }

/* User management: an add button, then a row per person with short buttons. */
.people-wrap { padding: 14px 0 40px; }
.people-add { width: calc(100% - 28px); margin: 0 14px 12px; font: inherit; font-size: 18px; font-weight: 600; justify-content: center; cursor: pointer; }
.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.people li { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.people .who { flex: 1; min-width: 0; }
.people .who b { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.people .who .tag { flex: none; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 0 7px; background: var(--blue-bg); color: var(--blue); }
.people .who small { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-soft); margin-top: 2px; }
.people .who input { width: 100%; font: inherit; font-size: 16px; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 9px; }
.people .who input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.people .acts { flex: none; display: flex; gap: 6px; }
.people .mini { font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; padding: 0 9px; border-radius: 9px;
                border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.people .mini.danger { border-color: var(--red); color: var(--red); }
.people .mini:active { background: #f2f2f2; }
.people li.new { background: #f6f8fb; }
/* Connected (has a device): a small green check before the name; an empty
   slot otherwise, so names stay aligned. */
.people .conn, .rows .conn { flex: none; width: 20px; display: flex; color: var(--green); }
.people .conn .icon, .rows .conn .icon { width: 20px; height: 20px; }
.people .conn svg, .rows .conn svg { stroke-width: 4; }

/* Sideways strip of choices (e.g. construction sites) above a list. */
.strip { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); container-type: inline-size; }
.strip-scroll { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto;
         scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip-scroll::-webkit-scrollbar { display: none; }
.strip-end { flex: none; }
.strip button { flex: none; width: calc((100cqw - 16px) / 3.25); min-height: 54px; padding: 6px 8px;
                scroll-snap-align: start; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25;
                color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.strip button span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strip button span.l1 { display: block; white-space: nowrap; text-overflow: ellipsis; }
.strip button span.l1 + span.l1 { font-weight: 400; }
.strip button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.strip button.icon-only { display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--navy); }
.strip button.icon-only .icon { display: inline-flex; }
.rows .chev { flex: none; width: 10px; height: 16px; color: #9a9a9a; }
.rows .empty { padding: 30px 16px; text-align: center; color: var(--ink-soft); }
.more-hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 700;
             background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 18px;
             font-size: 14px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); white-space: nowrap; pointer-events: none;
             transition: opacity .2s; }
.more-hint.off { opacity: 0; }

/* Form page content. */
.page .form-wrap { padding: 14px 14px 40px; }
/* Large screens: the selection buttons sit in the middle, not at the bottom. */
@media (min-width: 700px) and (min-height: 500px) {
  .choices { margin: auto 0; max-width: 420px; width: 100%; align-self: center; }
  .choices-top { max-width: 420px; width: 100%; align-self: center; padding-top: 24px; }
  /* A list page becomes a white card on a light gray background, so its
     lines end at a frame instead of in the air. Phones keep the list to
     the screen edge. */
  body.tpl { background: #f1f3f6; }
  .page:has(> .rows, > .people-wrap) { min-height: 0; margin: 18px auto 40px; background: #fff;
    border: 1.5px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
  .page:has(> .rows, > .people-wrap) .rows li:last-child a,
  .page:has(> .rows, > .people-wrap) .people li:last-child { border-bottom: none; }
  .page:has(> .people-wrap) .people-wrap { padding-bottom: 0; }
}

/* iPhone Safari: date and time fields ignore the set width and overflow
   their frame, and centre their text. Make them behave like other fields. */
.f-field input[type="date"], .f-field input[type="time"] {
  -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%;
  text-align: right; line-height: 24px;
}
.f-field input[type="date"]::-webkit-date-and-time-value,
.f-field input[type="time"]::-webkit-date-and-time-value { text-align: right; margin: 0; }

/* Drawn icons (icons.js): one size rule, colour from the text. */
.icon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.15em; flex: none; }
.icon svg { width: 100%; height: 100%; }

/* Page changes (transitions.js): the same short fade for every move
   between screens. Fade in on arrival; html.leaving fades out, and the
   navigation starts when that animation ends. */
body { animation: page-in 0.1s ease-out backwards; }
html.leaving body { animation: page-out 0.1s ease-in both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body, html.leaving body { animation: none; } }

/* While typing, the field's own frame turns blue; the browser's inner focus
   ring (Safari draws one on some taps) is not wanted inside it. */
.f-form .f-body input:focus, .f-form .f-body textarea:focus, .f-form .f-body select:focus {
  outline: none; -webkit-tap-highlight-color: transparent; }

/* Under a date that was refused (forms/engine.js guardDate). */
.f-date-note { color: var(--red); font-size: 13px; font-weight: 500; line-height: 1.3; padding-top: 1px; }

/* Text fields align by their writing direction (right to left here), not
   by an explicit "right": Safari on iPad puts the caret on the left of an
   empty field when both are given. */
.f-form textarea, .f-form input[type="text"] { text-align: start; }

/* A list of names (forms/engine.js namesControl): a line each, numbered
   when there is more than one. */
.f-form .f-names { display: flex; flex-direction: column; }
.f-form .f-name-row { display: flex; align-items: center; gap: 6px; }
.f-form .f-name-row + .f-name-row { border-top: 1px dashed var(--line-soft); }
.f-form .f-name-n { flex: none; min-width: 1.4em; color: var(--ink-soft); font-size: 15px; }
.f-form .f-names input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: inherit; font-size: 16px;
                         color: var(--ink); min-height: 0; height: 24px; line-height: 24px; padding: 0; text-align: start; }   /* tight lines */
.f-form .f-names input:focus { outline: none; }
/* A long-text list (findings, lessons…): each line wraps and grows. */
.f-form .f-names textarea { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: inherit; font-size: 16px;
                            color: var(--ink); min-height: 24px; line-height: 24px; padding: 0; resize: none; overflow: hidden; text-align: start; }
.f-form .f-names textarea:focus { outline: none; }
.f-form .f-name-row:has(textarea) { align-items: flex-start; }
.f-form .f-name-row:has(textarea) .f-name-n { line-height: 24px; }

.people .who .tag.mentor { background: #fde7d2; color: #9a3f06; }   /* a Tzomet mentor */
.people .who .tag.off { background: var(--red-bg); color: var(--red); }  /* a disconnected company */
.people .who.two { display: flex; flex-direction: column; gap: 6px; }    /* two fields: company, manager */
/* New user: worker or Tzomet mentor. */
.people .kinds { display: flex; gap: 6px; margin-top: 6px; }
.people .kinds .mini { flex: 1; }
.people .kinds .mini.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Follow-up mark of a recommendation (follow-up.js): a button for whoever
   created the investigation, text for everyone else. */
.fu { font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; border-radius: 8px; padding: 4px 10px;
      border: 1.5px solid currentColor; background: none; display: inline-block; }
button.fu { cursor: pointer; min-height: 34px; }
.fu.done { color: var(--green); background: var(--green-bg); border-color: var(--green-bg); }
.fu.open { color: var(--blue); }
.fu.late { color: var(--red); }
span.fu.open, span.fu.late { border: none; padding: 0; }
.v-follow { margin-top: 6px; }
@media print { .fu { border: none; background: none; padding: 0; } }
/* The approval square (A4 page): ✓ on green when done, red frame when late. */
.fu-sq { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; padding: 0;
         border: 1.5px solid #9a9a9a; border-radius: 5px; background: #fff; color: #fff; font: inherit; font-size: 15px; font-weight: 700; }
button.fu-sq { cursor: pointer; }
.fu-sq.done { background: var(--green); border-color: var(--green); }
.fu-sq.late { border-color: var(--red); border-width: 2px; }