/* The Cells call screen and the phone parts it is built from, as the landing hero renders it.
   Every rule is scoped under .screen, and the call under .jt-call, which pins its own dark tokens:
   nothing here reaches the page around a screen. :where() keeps each selector at the specificity
   it had in cells.css. Fonts come from tokens.css. */

/* ---------- the screen and what it expects of its host page ---------- */

.screen {
  position: relative; width: 390px; height: 844px; border-radius: 34px; overflow: hidden;
  background: var(--scr); color: var(--ink); display: flex; flex-direction: column;
  font-size: 16px; font-family: var(--font-latin); font-weight: 500; line-height: 1.5; font-kerning: normal;
}
.screen:lang(th) { font-family: var(--font-thai); }
:where(.screen) :lang(th) { font-family: var(--font-thai); line-height: inherit; }
:where(.screen) :lang(en) { font-family: var(--font-latin); }
:where(.screen) :is(p, figure) { margin: 0; padding: 0; }
:where(.screen) img { display: block; }
:where(.screen) svg { display: block; flex: none; }
:where(.screen) button { font: inherit; color: inherit; }
:where(.screen) .vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A person: one class sets the colour every mark of theirs reads. */
:where(.screen) .p-y { --pc: var(--py); --pc-on: var(--py-on); }
:where(.screen) .p-b { --pc: var(--pb); --pc-on: var(--pb-on); }
:where(.screen) .p-g { --pc: var(--pg); --pc-on: var(--pg-on); }
:where(.screen) .p-r { --pc: var(--pr); --pc-on: var(--pr-on); }

/* ---------- shared phone parts ---------- */

:where(.screen) .sbar {
  flex: none; height: 36px; padding: 0 24px 0 28px; display: flex; align-items: center;
  justify-content: space-between; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
:where(.screen) .sbar svg { width: 64px; height: 14px; fill: var(--sbar); }
/* a class, not a style attribute, so the markup passes a CSP without unsafe-inline */
:where(.screen) .sbar .bat { stroke: var(--sbar); }
:where(.screen) .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the speaker's bar: where a person's words start */
:where(.screen) .bar {
  flex: none; display: inline-block; width: 6px; height: 18px; border-radius: 2px;
  background: var(--pc); box-shadow: inset 0 0 0 1.5px var(--key);
}

/* the direction tag: two cells, each in its speaker's colour, letters in words */
:where(.screen) .dir {
  display: inline-flex; align-items: stretch; flex: none; height: 20px; border-radius: 5px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--key); font: 700 11.5px/20px var(--font-latin); letter-spacing: .06em;
  background: var(--cell); color: var(--ink);
}
:where(.screen) .dir b { padding: 0 5px; background: var(--pc); color: var(--pc-on); font-weight: 700; }
:where(.screen) .dir .ar { display: grid; place-items: center; padding: 0 3px; }
:where(.screen) .dir .ar svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- call ---------- */

/* Video is dark in every theme, so the call pins the night register whatever the page shows. */
.screen.jt-call {
  background: #0f0e0c;
  --ink: #f6f3ec; --ink-2: #d4cfc4; --cell: #252320; --panel: rgba(37, 35, 32, .86); --hair: rgba(246, 243, 236, .16);
  --chip: #efece5; --on-chip: #16130e; --focus: #f4bd36; --end: #c4381f; --on-end: #ffffff; --key: transparent;
  --py: #f4bd36; --py-on: #16130e; --pb: #7f9ff3; --pb-on: #16130e; --pg: #3dab6a; --pg-on: #16130e; --pr: #ef5638; --pr-on: #16130e;
  /* The backing behind each caption line. Measured against a white frame, the worst case. */
  --hl: rgba(14, 13, 11, .72);
  --sbar: #efece5;
  color: var(--ink);
}
.jt-call .sbar { background: transparent; color: #f6f3ec; position: absolute; inset: 0 0 auto 0; z-index: 3; }
.jt-call .sbar svg { fill: #f6f3ec; }
:where(.jt-call) .stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
:where(.jt-call) .remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Two static gradients, painted once: legibility at the top for the status and name, and a floor
   under the captions and the dock. Never a filter. */
:where(.jt-call) .stage::before, :where(.jt-call) .stage::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
/* ::before comes first in the stage, so without a z-index the photo would paint over it. */
:where(.jt-call) .stage::before { z-index: 1; top: 0; height: 132px; background: linear-gradient(rgba(10, 9, 8, .74), rgba(10, 9, 8, .5) 36px, rgba(10, 9, 8, 0)); }
:where(.jt-call) .stage::after { bottom: 0; height: 52%; background: linear-gradient(rgba(10, 9, 8, 0), rgba(10, 9, 8, .38) 40%, rgba(10, 9, 8, .82)); }

:where(.jt-call) .ctop { position: absolute; left: 10px; top: 44px; max-width: 266px; display: grid; gap: 5px; z-index: 2; padding: 7px 10px 8px; border-radius: 8px; background: var(--hl); }
:where(.jt-call) .ctop .r1 { display: flex; align-items: center; gap: 8px; }
:where(.jt-call) .ctop .r1 b { font-size: 19px; font-weight: 700; line-height: 1.2; }
:where(.jt-call) .ctop .r1 time { font-size: 15px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
:where(.jt-call) .ctop .r2 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
:where(.jt-call) .ctop .r2 .ic { width: 16px; height: 16px; color: var(--ink); }
:where(.jt-call) .ctop .state { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

:where(.jt-call) .selfv {
  position: absolute; right: 10px; top: 44px; width: 96px; height: 136px; border-radius: 10px; overflow: hidden; z-index: 2;
  border: 3px solid var(--pc); background: #0f0e0c;
}
:where(.jt-call) .selfv img { width: 100%; height: 100%; object-fit: cover; }
:where(.jt-call) .selfv .tag {
  position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: var(--pc); color: var(--pc-on);
  font-size: 12.5px; font-weight: 700; line-height: 18px;
}
:where(.jt-call) .selfv .swap {
  position: absolute; right: 2px; bottom: 2px; width: 44px; height: 44px; border: 0; background: none; padding: 0;
  display: grid; place-items: center; cursor: pointer;
}
:where(.jt-call) .selfv .swap span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--cell); color: var(--ink); }
:where(.jt-call) .selfv .swap .ic { width: 18px; height: 18px; }

/* Captions, on video: no card. Each wrapped line carries its own backing, so the frame shows
   between and around the lines. Theirs is the one to read and is largest; your own words are a
   quieter check that you were heard right; an interim is quieter still. */
:where(.jt-call) .caps { position: absolute; left: 12px; right: 12px; bottom: 100px; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
:where(.jt-call) .cap { display: grid; gap: 3px; }
:where(.jt-call) .chd { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; min-height: 22px; }
:where(.jt-call) .chd .nm, :where(.jt-call) .chd .hearing { background: var(--hl); padding: 1px 7px; border-radius: 4px; line-height: 20px; }
:where(.jt-call) .chd .hearing { font-weight: 600; color: var(--ink-2); }
:where(.jt-call) .hl { background: var(--hl); padding: 2px 8px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:where(.jt-call) .ctr { font-size: 19px; font-weight: 600; line-height: 1.62; }
:where(.jt-call) .ctr:lang(th) { font-size: 18px; line-height: 1.72; font-weight: 500; }
:where(.jt-call) .corg { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
:where(.jt-call) .corg .rom { display: none; font-size: 13.5px; }
:where(.jt-call) .cap.mine .ctr, :where(.jt-call) .cap.interim .ctr { font-size: 15.5px; font-weight: 500; line-height: 1.66; color: var(--ink-2); }
:where(.jt-call) .cap.mine .ctr:lang(th), :where(.jt-call) .cap.interim .ctr:lang(th) { font-size: 15.5px; }
:where(.jt-call) .cap.interim .ctr { font-style: normal; }

/* Captions in their own pane: the video keeps the top half untouched and the captions get a solid
   ground with the romanization the overlay leaves out. */
:where(.jt-call) .caps-pane .remote { height: calc(50% - 6px); }
:where(.jt-call) .caps-pane::after { display: none; }
:where(.jt-call) .caps-pane .caps {
  top: 50%; bottom: 88px; left: 0; right: 0; padding: 14px 14px 12px; background: #161512; gap: 14px; overflow: hidden;
  border-top: 1px solid var(--hair);
}
:where(.jt-call) .caps-pane .hl { background: none; padding: 0; }
:where(.jt-call) .caps-pane .chd .nm, :where(.jt-call) .caps-pane .chd .hearing { background: none; padding: 0; }
:where(.jt-call) .caps-pane .corg { padding-top: 5px; border-top: 1px solid var(--hair); }
:where(.jt-call) .caps-pane .corg .rom { display: block; }

:where(.jt-call) .dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-start; gap: 6px;
  padding: 10px 10px 22px;
}
:where(.jt-call) .caps-pane .dock { background: #161512; }
:where(.jt-call) .dk {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; min-height: 64px; padding: 0;
  border: 0; background: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  white-space: nowrap;
}
:where(.jt-call) .dk .k { display: grid; place-items: center; width: 52px; height: 44px; border-radius: 8px; background: var(--panel); color: var(--ink); }
:where(.jt-call) .dk[aria-pressed="false"] .k { background: var(--chip); color: var(--on-chip); }
:where(.jt-call) .end {
  margin-left: auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 108px;
  height: 48px; padding: 0 14px; white-space: nowrap; flex: none; border: 0; border-radius: 24px; background: var(--end); color: var(--on-end);
  font-size: 16px; font-weight: 700; cursor: pointer;
}
:where(.jt-call) .end:lang(th) { font-size: 16px; }