/* Rules only the Legal offer can match, loaded by juridico.html after the kit's
   own stylesheet. The kit says a one-offer rule does not belong in it; the app
   says the same and keeps these in `pages/sales-legal/legal.css`.

   The two things this offer needs that the shared kit cannot give it. Both are
   scoped under `.sl-offer-legal`, which is the class the app's own page adds
   beside `.sl` for exactly this purpose, so no other offer page can match them.

   1. The replica's window. This offer asks for the longest menu of any offer —
      fifteen rows, because the Legal row sits under Operations and every row
      above it is in a law firm's space too — and the row that is LIT is the
      last of them. At the kit's 27px row that menu is 425px tall, while the
      kit's window leaves at most 399px for it here (the site spends 23px more
      than the app on the caption strip inside the chrome). The active row would
      sit under the fold of the illustration. The window is given the height the
      menu needs instead of shrinking the rows, so every kit metric stays as it
      is in the app. Only where the menu is actually drawn: below 641px the kit
      drops the menu from the replica, and the phone layout is left exactly as
      the kit sizes it.

   2. The three custom scenes. They are `pages/sales-legal/legal.css` carried
      over unchanged: a case number being recognised, a gazette queue waiting on
      a lawyer, and a deadline counted out loud. The kit has no block for any of
      them and the app keeps their rules in its own page stylesheet, under this
      same class. Its one other rule, the single-plan grid, is NOT here: the
      site's copy of the kit already centres a lone plan card by reading the
      cards (`.sl-plans:has(.sl-plan:only-child)`). */

/* Declared after the kit's own stylesheet so it also wins over the narrower
   story-rail height the kit sets below 1000px, where this menu would clip
   just the same. */
@media (min-width: 641px) {
  .sl-offer-legal .sl-app {
    height: clamp(510px, 40vw, 545px);
  }
}

/* ---------- the number, and the court that comes out of it ---------- */

.sl-offer-legal .sl-jr-field {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1.5px dashed rgba(0, 178, 233, 0.45);
  border-radius: 12px;
  background: rgba(0, 178, 233, 0.05);
}

.sl-offer-legal .sl-jr-field-label {
  color: var(--cyan-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tabular figures: a case number is read digit by digit, and proportional
   glyphs make two numbers of the same length look different lengths. */
.sl-offer-legal .sl-jr-number {
  color: #0f0e1d;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.sl-offer-legal .sl-jr-found {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f7a50;
  font-size: 11.5px;
  font-weight: 700;
}

.sl-offer-legal .sl-jr-tag {
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f1f5;
  color: #6e6c7e;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* The publication of a case the firm is not following yet. Warm, not red: it
   is not an error, it may be the first news the firm has of that case. */
.sl-offer-legal .sl-jr-tag.is-warn {
  background: var(--orange-tint);
  color: #a54d0e;
}

.sl-offer-legal .sl-jr .sl-avatar svg {
  color: #fff;
}

/* ---------- the gazette queue ---------- */

.sl-offer-legal .sl-jr-pub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid #e6e6ec;
  border-radius: 12px;
  background: #fff;
}

.sl-offer-legal .sl-jr-pub-text {
  display: grid;
  min-width: 0;
}

.sl-offer-legal .sl-jr-pub-text b {
  color: #0f0e1d;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sl-offer-legal .sl-jr-pub-text span {
  overflow: hidden;
  color: #6e6c7e;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-offer-legal .sl-jr-acts {
  display: inline-flex;
  grid-column: 2;
  gap: 6px;
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

/* The two paths the screen offers, and the reason they are drawn as buttons
   nobody pressed: on this screen nothing happens until a lawyer decides. */
.sl-offer-legal .sl-jr-act {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: #fff;
  color: #3a3947;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-offer-legal .sl-jr-act:first-child {
  border-color: rgba(0, 178, 233, 0.4);
  background: var(--cyan-tint);
  color: var(--cyan-deep);
}

/* ---------- the count read out loud ---------- */

.sl-offer-legal .sl-jr-trace {
  display: grid;
  gap: 6px;
}

.sl-offer-legal .sl-jr-day {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid #e6e6ec;
  border-radius: 10px;
  background: #fff;
}

.sl-offer-legal .sl-jr-day b {
  color: #0f0e1d;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sl-offer-legal .sl-jr-day > span:not(.sl-jr-skip) {
  overflow: hidden;
  color: #6e6c7e;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-offer-legal .sl-jr-skip {
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f1f5;
  color: #6e6c7e;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-offer-legal .sl-jr-due {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(22, 163, 107, 0.35);
  border-radius: 12px;
  background: var(--green-tint);
}

.sl-offer-legal .sl-jr-due-label {
  color: #0f7a50;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sl-offer-legal .sl-jr-due b {
  color: #0b5c3c;
  font-size: 14px;
}