/* ============================================================
   /bdika/ — "תיק הבדיקה" case-file console.
   Deliberately NOT a chat thread: a question card on one side, a
   ledger that stamps each answer in on the other, and a phase rail
   instead of a question counter.
   ============================================================ */

.panel-page { background: var(--tint); min-height: 60vh; padding: 26px 0 46px; }

.pnl {
  max-width: 1020px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-2); overflow: hidden;
}

/* --- credential bar (not a chat header) --- */
.pnl__cred {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; background: var(--ink); color: #fff;
  border-bottom: 3px solid var(--amber);
}
.pnl__face {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--ink-soft);
  border: 2px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 900; font-size: 19px;
  color: var(--amber); letter-spacing: -.02em;
}
.pnl__who { min-width: 0; }
.pnl__name { font-family: var(--ff-display); font-weight: 800; font-size: 19px; line-height: 1.2; }
.pnl__role { font-size: 13px; color: rgba(255,255,255,.68); margin-top: 2px; }
.pnl__avail {
  margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #7FE0A8;
  background: rgba(127,224,168,.12); border: 1px solid rgba(127,224,168,.28);
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
}
.pnl__avail::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ED07F; animation: pulse 2s ease-in-out infinite; }
@media (max-width: 560px) { .pnl__avail span { display: none; } .pnl__cred { padding: 14px 16px; gap: 11px; } .pnl__face { width: 44px; height: 44px; } }

/* --- phase rail: 3 named phases, not "N questions left" --- */
.rail3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--tint-2); padding: 0; }
.rail3__seg {
  padding: 11px 8px 9px; text-align: center; background: var(--tint);
  border-bottom: 3px solid var(--rule); transition: .3s;
}
.rail3__seg.is-active { background: var(--paper); border-bottom-color: var(--amber); }
.rail3__seg.is-done { background: var(--paper); border-bottom-color: var(--ink); }
.rail3__n {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--rule); color: var(--muted); margin-inline-end: 7px;
  vertical-align: middle; transition: .3s;
}
.rail3__seg.is-active .rail3__n { background: var(--amber); color: #fff; }
.rail3__seg.is-done .rail3__n { background: var(--ink); color: #fff; }
.rail3__seg.is-done .rail3__n::before { content: '✓'; font-size: 11px; }
.rail3__seg.is-done .rail3__n span { display: none; }
.rail3__t { font-size: 13.5px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.rail3__seg.is-active .rail3__t { color: var(--ink); font-weight: 700; }
.rail3__seg.is-done .rail3__t { color: var(--ink); }
.rail3__t b { font-weight: inherit; }
.rail3__short { display: none; }
@media (max-width: 560px) {
  .rail3__t { font-size: 12.5px; }
  .rail3__n { width: 18px; height: 18px; margin-inline-end: 5px; }
  .rail3__long { display: none; }
  .rail3__short { display: inline; }
}

/* --- stage: question | ledger --- */
.pnl__stage { display: grid; grid-template-columns: minmax(0,1fr) 268px; gap: 0; align-items: stretch; }
@media (max-width: 800px) { .pnl__stage { grid-template-columns: 1fr; } }

.pnl__main { padding: 28px 30px 24px; min-width: 0; }
@media (max-width: 560px) { .pnl__main { padding: 22px 18px 20px; } }

.pnl__side {
  background: var(--tint); border-inline-start: 1px solid var(--rule);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 800px) {
  .pnl__side { border-inline-start: 0; border-top: 1px solid var(--rule); flex-direction: column-reverse; }
}

/* --- question card --- */
.q { display: none; }
.q.is-active { display: block; animation: qin .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes qin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q.is-active { animation: none; } }

.q__idx { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 8px; }
.q__title { font-family: var(--ff-display); font-size: clamp(20px, 3.4vw, 26px); font-weight: 800; color: var(--ink); line-height: 1.3; margin: 0 0 8px; }
.q__sub { font-size: 15px; color: var(--muted); margin: 0 0 20px; line-height: 1.6; }
.q__sub:empty { display: none; margin: 0; }

/* --- answer tiles (wide, icon + micro-description) --- */
.tiles { display: grid; gap: 9px; }
.tiles--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .tiles--2 { grid-template-columns: 1fr; } }

.tile {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--r);
  padding: 13px 15px; cursor: pointer; transition: .15s; color: var(--ink);
}
.tile:hover { border-color: var(--amber); background: var(--amber-wash); transform: translateX(-2px); }
.tile.is-on { border-color: var(--amber); background: var(--amber-wash); box-shadow: inset 0 0 0 1px var(--amber); }
.tile__ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r); background: var(--tint-2); color: var(--ink-soft);
  font-size: 16px; font-weight: 700; transition: .15s;
}
.tile:hover .tile__ico, .tile.is-on .tile__ico { background: var(--amber); color: #fff; }
.tile__b { min-width: 0; }
.tile__l { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.tile__d { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.tile__d:empty { display: none; }

/* --- text-ish inputs --- */
.fld { margin-bottom: 4px; }
.fld__in {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--r);
  padding: 14px 15px; transition: .15s;
}
.fld__in:focus { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201,134,27,.13); }
.fld__in::placeholder { color: #9AA8B8; }
.fld__hint { font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.fld__err { display: none; font-size: 13px; color: var(--live); font-weight: 500; margin-top: 7px; }
.fld.is-bad .fld__in { border-color: var(--live); }
.fld.is-bad .fld__err { display: block; }

/* consent checkbox */
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.consent input { width: 19px; height: 19px; flex: none; margin: 1px 0 0; accent-color: var(--amber); cursor: pointer; }
.consent a { color: var(--ink-soft); }

/* --- age slider --- */
.age { padding: 4px 0 2px; }
.age__val { text-align: center; font-family: var(--ff-display); font-weight: 900; font-size: 46px; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.age__unit { font-family: var(--ff-sans); font-size: 15px; font-weight: 500; color: var(--muted); }
.age input[type=range] { width: 100%; margin: 16px 0 6px; accent-color: var(--amber); height: 26px; }
.age__ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* --- OTP: security stamp --- */
.otp { text-align: center; }
.otp__seal {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  border: 1.5px dashed var(--amber); color: var(--amber-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  padding: 7px 14px; border-radius: 100px; background: var(--amber-wash);
}
.otp__box {
  display: flex; justify-content: center; gap: 10px; direction: ltr;
  padding: 18px; border: 1.5px solid var(--rule); border-radius: var(--r);
  background: var(--tint); max-width: 300px; margin: 0 auto;
}
.otp__d {
  width: 54px; height: 62px; text-align: center; font-family: var(--ff-display);
  font-size: 28px; font-weight: 800; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--paper);
}
.otp__d:focus { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(201,134,27,.15); }
@media (max-width: 420px) { .otp__d { width: 46px; height: 54px; font-size: 24px; } .otp__box { gap: 7px; padding: 14px; } }
.otp__box.shake { animation: shake .34s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.otp__status { font-size: 14px; margin-top: 14px; min-height: 21px; font-weight: 500; }
.otp__status--pending { color: var(--muted); }
.otp__status--ok { color: #1E8E4E; }
.otp__status--err { color: var(--live); }
.otp__resend { background: none; border: 0; color: var(--ink-soft); font-size: 13.5px; text-decoration: underline; cursor: pointer; margin-top: 9px; padding: 4px; }
.otp__resend:disabled { color: #A9B4C1; cursor: default; text-decoration: none; }

/* --- nav --- */
.pnl__nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.pnl__back {
  background: none; border: 0; color: var(--muted); font-size: 14.5px;
  cursor: pointer; padding: 10px 4px; transition: .15s;
}
.pnl__back:hover { color: var(--ink); }
.pnl__back[hidden] { display: none; }
.pnl__next { margin-inline-start: auto; min-width: 148px; }
.pnl__next:disabled { opacity: .6; cursor: default; transform: none; }

/* --- LEDGER: the case file --- */
.ledger { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.ledger__h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--ink); color: #fff; padding: 10px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
}
.ledger__n { font-family: var(--ff-display); font-size: 13px; color: var(--amber); }
.ledger__rows { margin: 0; padding: 0; list-style: none; max-height: 292px; overflow-y: auto; }
.ledger__empty { padding: 16px 13px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.ledger__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 9px 13px; border-bottom: 1px solid var(--rule-soft); font-size: 13px;
  animation: stamp .34s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes stamp { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ledger__row { animation: none; } }
.ledger__row:last-child { border-bottom: 0; }
.ledger__k { color: var(--muted); white-space: nowrap; }
.ledger__v { font-weight: 600; color: var(--ink); text-align: end; min-width: 0; overflow-wrap: anywhere; }
.ledger__ok { color: #1E8E4E; font-weight: 700; font-size: 12px; }

/* --- savings meter (range, with disclaimer) --- */
.meter { background: var(--ink); color: #fff; border-radius: var(--r); padding: 16px 15px; text-align: center; }
.meter__k { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--amber); margin-bottom: 8px; }
.meter__v { font-family: var(--ff-display); font-weight: 900; font-size: 25px; line-height: 1.15; direction: ltr; }
.meter__v.is-idle { font-size: 17px; color: rgba(255,255,255,.5); font-weight: 700; }
.meter__bar { height: 5px; background: rgba(255,255,255,.15); border-radius: 100px; margin: 12px 0 9px; overflow: hidden; }
.meter__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), #E8B454); border-radius: 100px; transition: width .6s cubic-bezier(.3,.8,.3,1); }
.meter__note { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.45; margin: 0; }

/* --- trust strip --- */
.pnl__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin: 20px auto 0; max-width: 1020px; padding: 0 4px;
  font-size: 13px; color: var(--muted);
}
.pnl__trust li { list-style: none; display: flex; align-items: center; gap: 6px; }
.pnl__trust li::before { content: '✓'; color: #1E8E4E; font-weight: 700; }

/* --- done card --- */
.pnl__done { display: none; padding: 46px 30px; text-align: center; }
.pnl__done.is-shown { display: block; }
.pnl__done h2 { font-size: 27px; margin-bottom: 10px; }
.pnl__done p { color: var(--muted); max-width: 46ch; margin-inline: auto; }