/* iPhone и iPad как планшет — то, что видно на МАКЕ (ПЛАНШЕТ.md): значок в
 * строке состояния, окно приёма, просьба о знакомстве, курсор iPhone на
 * холсте. Сам планшет оформлен в pad.css — это другая страница. */

/* Значок в строке состояния: точка — состояние связи. */
.знак-планшета {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px;
  border: 1px solid var(--край); border-radius: 999px; background: none;
  color: var(--текст-тише); font: inherit; cursor: pointer;
}
.знак-планшета::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--текст-совсем-тихо);
}
.знак-планшета[data-состояние="есть"]::before { background: var(--добро); }
.знак-планшета[data-состояние="неустойчиво"]::before { background: var(--внимание); }
.знак-планшета:hover { color: var(--текст); border-color: var(--край-ярче); }

.окно-планшета .подпись { font-size: var(--кегль-мелкий); color: var(--текст-тише);
  text-transform: none; margin-top: 4px; }
.окно-планшета p { margin: 0; line-height: 1.45; }
.окно-планшета .тихо, .просьба-планшета .тихо { color: var(--текст-тише); }
.ряд-планшета, .кто-планшет { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.ряд-планшета .растяжка, .кто-планшет .растяжка { flex: 1; }
.выключатель-планшета { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.точка-связи { width: 9px; height: 9px; border-radius: 50%; background: var(--текст-совсем-тихо); }
.точка-связи.есть { background: var(--добро); }
.точка-связи.неустойчиво { background: var(--внимание); }
.беда-планшета { color: var(--беда); }
.добро-планшета { color: var(--добро); }
.замеры-планшета {
  display: grid; grid-template-columns: max-content max-content max-content max-content;
  gap: 4px 14px; font-size: var(--кегль-мелкий); padding: 6px 0 2px;
}
.замеры-планшета .значение { font-family: var(--шрифт-цифр); color: var(--текст); }

/* Код знакомства — крупно и цифрами одной ширины: его сверяют глазами с
 * экраном телефона, и «3» не должна прятаться за «8». */
.код-знакомства {
  font-family: var(--шрифт-цифр); font-size: 34px; font-weight: 700; letter-spacing: 0.08em;
  text-align: center; padding: 8px 0; color: var(--текст);
}
.просьба-планшета { z-index: 90; }

/* Курсор iPhone на холсте Мака: кольцо размером с кисть там, где сейчас палец
 * или перо. Середина кольца — в точке: отсюда отрицательные поля. */
.курсор-планшета {
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none;
  border: 1.5px solid var(--акцент); border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  translate: -50% -50%;
}
.курсор-планшета[data-рисует="1"] { border-color: var(--добро); }
.курсор-планшета > span {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px;
  border-radius: 50%; background: var(--акцент);
}