/* Page styles for the lawyer role screens (lw-*): home, profile, new session, live session, history.
   Tokens only (tokens.css) — dark mode, high contrast and reduced motion come for free. */

/* ---- Shared ----------------------------------------------------------- */
.lw-footnote {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-relaxed);
}
.lw-footnote .icon { flex-shrink: 0; margin-top: 2px; }
.lw-center { justify-content: center; text-align: center; }

.lw-live {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--success-text);
}
.lw-live.is-off { color: var(--warning-text); }
.lw-live__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lw-live.is-live .lw-live__dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor;
  animation: lw-ping 1.8s var(--ease-out) infinite;
}
@keyframes lw-ping { 0% { transform: scale(0.6); opacity: 0.8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Stamp + signature on light "paper" (as printed on the affidavit; stays light in dark mode). */
.lw-paper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg); background: var(--paper);
  border: 1px solid var(--paper-line); color: var(--paper-ink);
  box-shadow: var(--shadow-inset);
  background-image: linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, var(--paper-line) 35%, transparent) 0);
  background-size: 100% 28px;
}
.lw-paper__slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); min-height: 120px; }
.lw-paper__stamp { width: 100%; max-width: 240px; height: auto; }
.lw-paper__sig { max-width: 100%; max-height: 96px; object-fit: contain; }
.lw-paper__caption {
  align-self: stretch; text-align: center; padding-top: var(--space-1); border-top: 1px solid var(--paper-line);
  font-size: var(--fs-xs); color: color-mix(in srgb, var(--paper-ink) 70%, transparent);
}
.lw-paper__missing {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: auto 0;
  font-size: var(--fs-sm); color: color-mix(in srgb, var(--paper-ink) 65%, transparent);
}
.lw-paper--compact { padding: var(--space-4); gap: var(--space-3); background-size: 100% 22px; }
.lw-paper--compact .lw-paper__slot { min-height: 84px; }
.lw-paper--compact .lw-paper__stamp { max-width: 170px; }
.lw-paper--compact .lw-paper__sig { max-height: 64px; }

/* ---- Home ------------------------------------------------------------- */
.lw-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.9fr); gap: var(--space-8); align-items: center;
  padding: var(--space-8); margin-bottom: var(--space-6);
  background: radial-gradient(120% 140% at 100% 0%, var(--ink-3) 0%, var(--ink) 62%);
  color: var(--ink-text); border-color: transparent; box-shadow: var(--shadow-lg);
}
.lw-hero::after {
  content: ''; position: absolute; inset-inline-end: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid var(--ink-border); box-shadow: 0 0 0 40px var(--ink-hover), 0 0 0 80px var(--ink-hover); pointer-events: none;
}
.lw-hero--skeleton { display: block; }
.lw-hero__text { position: relative; z-index: 1; }
.lw-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--ink-muted);
}
.lw-hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink-text); margin: 0; }
.lw-hero__lead { margin-top: var(--space-3); max-width: 46ch; color: var(--ink-muted); line-height: var(--lh-relaxed); }
.lw-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-6); }
.lw-hero__note { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-xs); color: var(--ink-muted); }
.lw-hero__stamp { position: relative; z-index: 1; transform: rotate(-1.5deg); }
.lw-hero__stamp .lw-paper { box-shadow: var(--shadow-xl); }
.lw-hero__stamp-note { margin-top: var(--space-2); text-align: center; font-size: var(--fs-xs); color: var(--ink-muted); transform: rotate(1.5deg); }

.lw-active {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: linear-gradient(90deg, var(--success-soft), var(--surface) 70%);
}
.lw-active__pulse { position: relative; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--success); }
.lw-active__pulse::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--success);
  animation: lw-ping 2s var(--ease-out) infinite;
}
.lw-active__body { flex: 1; min-width: 0; }
.lw-active__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.lw-active__text { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); }
.lw-active__cta { flex-shrink: 0; }

.lw-home .section { margin-bottom: var(--space-6); }

.lw-recent { list-style: none; margin: 0; padding: 0; }
.lw-recent__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle);
}
.lw-recent__item:first-child { border-top: 0; }
.lw-recent__icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--success-soft); color: var(--success-text);
}
.lw-recent__title { font-weight: var(--fw-semibold); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lw-recent__id { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-subtle); font-family: var(--font-mono); }
.lw-recent__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); min-width: 0; }
.lw-recent__meta > span { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.lw-recent__when { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* ---- Profile ---------------------------------------------------------- */
.lw-profile { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.lw-sigframe {
  position: relative; display: grid; place-items: center; min-height: 180px; padding: var(--space-6);
  border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--paper-line);
}
.lw-sigframe__img { max-width: min(100%, 420px); max-height: 140px; object-fit: contain; position: relative; z-index: 1; }
.lw-sigframe__line { position: absolute; inset-inline: 12%; bottom: 36px; border-bottom: 1.5px dashed var(--paper-line); }
.lw-dl { display: grid; gap: 0; margin: 0; }
.lw-dl__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.lw-dl__row:first-child { border-top: 0; padding-top: 0; }
.lw-dl dt { font-size: var(--fs-sm); color: var(--text-muted); }
.lw-dl dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* ---- New session ------------------------------------------------------ */
.lw-new__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.lw-new__card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.lw-new__card .wizard__nav { margin-top: 0; }

.lw-legal { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lw-legal__legend { font-weight: var(--fw-semibold); padding: 0; margin-bottom: var(--space-1); }
.lw-legal__lead { font-size: var(--fs-sm); color: var(--text-muted); margin-top: calc(-1 * var(--space-2)); }
.lw-legal__item {
  padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.lw-legal__item.is-checked { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: var(--success-soft); }
.lw-legal__item .checkbox__label, .lw-legal__item label { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: var(--fw-medium); }

.lw-summary {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border);
}
.lw-summary__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--success-soft); color: var(--success-text); flex-shrink: 0; }
.lw-summary__label { font-size: var(--fs-xs); color: var(--text-muted); }
.lw-summary__value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.lw-summary__checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-xs); color: var(--success-text); margin-top: 2px; }
.lw-otp-step__otp { align-items: center; text-align: center; padding: var(--space-4) 0; }
.lw-geo { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); }
.lw-geo .icon { flex-shrink: 0; margin-top: 1px; }
.lw-geo--ok { color: var(--success-text); }
.lw-geo--error { color: var(--warning-text); }

.lw-process { padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface-2); border: 1px solid var(--border); position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
.lw-process__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); }
.lw-process__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.lw-process__step { display: flex; gap: var(--space-3); position: relative; }
.lw-process__step:not(:last-child)::before {
  content: ''; position: absolute; inset-inline-start: 17px; top: 38px; bottom: calc(-1 * var(--space-4) + 2px); border-inline-start: 2px dotted var(--border-strong);
}
.lw-process__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-text); }
.lw-process__step-title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.lw-process__step-text { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-relaxed); margin-top: 2px; }
.lw-process__foot { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- Live session ----------------------------------------------------- */
.lw-code {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center;
  padding: var(--space-8); margin-bottom: var(--space-6);
  background: radial-gradient(130% 160% at 0% 0%, var(--ink-3) 0%, var(--ink) 60%); color: var(--ink-text);
  border-color: transparent; box-shadow: var(--shadow-lg);
}
.lw-code__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.lw-code__digits { display: flex; align-items: center; gap: var(--space-2); direction: ltr; justify-content: flex-end; flex-wrap: nowrap; }
.lw-code__digits--missing { min-height: 96px; justify-content: center; }
.lw-code__digit {
  display: grid; place-items: center; width: clamp(44px, 7vw, 84px); height: clamp(60px, 9.5vw, 108px);
  border-radius: 16px; background: var(--ink-active); border: 1px solid var(--ink-border);
  font-family: var(--font-mono); font-size: clamp(2.2rem, 5.6vw, 4.4rem); font-weight: var(--fw-bold); color: var(--ink-text);
  font-variant-numeric: tabular-nums; box-shadow: inset 0 -3px 0 var(--ink-border);
  animation: lw-digit-in var(--dur-4) var(--ease-out) both;
}
.lw-code__digit:nth-child(2) { animation-delay: 40ms; } .lw-code__digit:nth-child(3) { animation-delay: 80ms; }
.lw-code__digit:nth-child(5) { animation-delay: 140ms; } .lw-code__digit:nth-child(6) { animation-delay: 180ms; }
.lw-code__digit:nth-child(7) { animation-delay: 220ms; }
@keyframes lw-digit-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lw-code__gap { width: clamp(8px, 1.6vw, 22px); }
.lw-code__how { margin: var(--space-5) 0 0; padding-inline-start: var(--space-5); color: var(--ink-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.lw-code__how strong { color: var(--ink-text); font-weight: var(--fw-semibold); }
.lw-code__timer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.lw-code__timer .countdown__value, .lw-code__timer .countdown__label { color: var(--ink-text); }
.lw-code__timer .countdown__track { stroke: var(--ink-active); }
.lw-code__timer-note { font-size: var(--fs-xs); color: var(--ink-muted); text-align: center; max-width: 16ch; }

.lw-identity { padding: var(--space-5); }
.lw-identity__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); margin: 0 0 var(--space-3); }
.lw-identity__who { display: flex; align-items: center; gap: var(--space-3); }
.lw-identity__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.lw-identity__id { font-size: var(--fs-md); color: var(--text); margin-top: 2px; }
.lw-identity__id .ltr { font-family: var(--font-mono); font-weight: var(--fw-semibold); letter-spacing: 0.04em; }
.lw-identity__facts { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-2); }
.lw-identity__facts li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.lw-identity__facts li .icon { flex-shrink: 0; margin-top: 3px; }
.lw-identity__facts li.is-danger { color: var(--danger-text); font-weight: var(--fw-medium); }
.lw-identity__facts li.is-muted { color: var(--text-subtle); }

.lw-side-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.lw-side-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-relaxed); padding-inline: var(--space-1); }
.lw-side-note .icon { flex-shrink: 0; margin-top: 2px; }
.lw-progress { display: flex; flex-direction: column; gap: var(--space-3); }
.lw-progress__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lw-progress__legend li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.lw-progress__legend li + li { padding-top: var(--space-2); border-top: 1px dashed var(--border-subtle); }

.lw-list { list-style: none; margin: 0; padding: 0; }
.lw-list.is-waiting .lw-item { opacity: 0.78; }
.lw-list__hint { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px solid var(--border-subtle); }

.lw-item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: start;
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle);
  transition: background-color var(--dur-3) var(--ease-out);
}
.lw-item:first-child { border-top: 0; }
.lw-item__num {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; margin-top: 2px;
  background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.lw-item.is-signed { background: color-mix(in srgb, var(--info-soft) 55%, transparent); }
.lw-item.is-signed .lw-item__num { background: var(--info-soft); color: var(--info-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 35%, transparent); }
.lw-item.is-certified .lw-item__num { background: var(--success); color: var(--on-primary); }
.lw-item.is-blocked .lw-item__num { background: var(--danger-soft); color: var(--danger-text); }
.lw-item.is-fresh-signed { animation: lw-flash 2.4s var(--ease-out); }
.lw-item.is-fresh-certified { animation: lw-flash-ok 2.4s var(--ease-out); }
@keyframes lw-flash { 0%, 30% { background: var(--info-soft); } 100% { background: color-mix(in srgb, var(--info-soft) 55%, transparent); } }
@keyframes lw-flash-ok { 0%, 30% { background: var(--success-soft); } 100% { background: transparent; } }
.lw-item__main { min-width: 0; }
.lw-item__title { font-weight: var(--fw-semibold); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.lw-item__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-subtle); font-weight: var(--fw-regular); }
.lw-item__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.lw-item__meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.lw-item__when { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--info-text); font-weight: var(--fw-medium); }
.lw-item__when.is-success { color: var(--success-text); }
.lw-item__when.is-danger { color: var(--danger-text); }
.lw-item__error, .lw-item__note {
  display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--fs-xs); line-height: var(--lh-snug);
}
.lw-item__error { background: var(--danger-soft); color: var(--danger-text); font-weight: var(--fw-medium); }
.lw-item__note { background: var(--warning-soft); color: var(--warning-text); }
.lw-item__error .icon, .lw-item__note .icon { flex-shrink: 0; margin-top: 1px; }
.lw-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.lw-item__chip { display: inline-flex; perspective: 400px; }
.lw-item__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
/* The stamp sits under the actions, in its own space — never over the item's text. */
.lw-item__seal {
  width: 104px; height: 48px; margin-top: var(--space-1); pointer-events: none;
  display: grid; place-items: center; opacity: 0.85; transform: rotate(-6deg);
}
.lw-item__seal img { width: 100%; height: 100%; object-fit: contain; filter: saturate(1.1); }
/* Dark mode: the stamp stays as printed (blue ink on its own light card), like the paper previews — an inverted stamp
   turned into a muddy grey box, and the bare blue ink is too faint on the dark card. */
:root[data-theme="dark"] .lw-item__seal img { background: var(--paper); border-radius: 6px; padding: 3px 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lw-item__seal img { background: var(--paper); border-radius: 6px; padding: 3px 4px; } }

/* Padding: the affidavit HTML is laid out for print (page margins), so on screen it would touch the frame. */
.lw-preview { position: relative; min-height: 60vh; border-radius: var(--radius-md); overflow: hidden; background: var(--paper); border: 1px solid var(--border); }
.lw-preview__frame { display: block; width: 100%; height: 68vh; border: 0; background: var(--paper); }
.lw-preview__loading { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---- History ---------------------------------------------------------- */
.lw-when { display: inline-flex; flex-direction: column; line-height: 1.3; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .lw-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
  .lw-hero__stamp { max-width: 420px; }
  .lw-profile, .lw-new__grid { grid-template-columns: minmax(0, 1fr); }
  .lw-process { position: static; }
  .lw-code { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
  .lw-code__digits { justify-content: center; }
}
@media (max-width: 767.98px) {
  .lw-hero { padding: var(--space-5); }
  .lw-hero__title { font-size: var(--fs-2xl); }
  .lw-hero__actions .btn { width: 100%; }
  .lw-active { flex-wrap: wrap; padding: var(--space-4); gap: var(--space-3); }
  .lw-active__cta { width: 100%; }
  .lw-recent__item { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .lw-recent__when { display: none; }
  .lw-new__card { padding: var(--space-4); }
  .lw-legal__item { padding: var(--space-3); }
  .lw-code { padding: var(--space-5) var(--space-4); }
  .lw-code__digit { border-radius: 12px; }
  .lw-item { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); gap: var(--space-3); }
  .lw-item__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-inline-start: calc(32px + var(--space-3)); }
  .lw-item__seal { display: none; }
  .lw-dl__row { grid-template-columns: 8rem minmax(0, 1fr); }
  .lw-paper { padding: var(--space-4); gap: var(--space-3); }
  .lw-preview__frame { height: 62vh; }
}

/* "ספרת הביקורת תקינה" with its icon on the same line, icon first (start side). */
.lw-hint-ok { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--success-text); }
.lw-hint-ok .icon { flex-shrink: 0; }