/* Litmus stand demo. Same component language as the dossier's phone screens (dossier/dossier.css .ph):
   black ground, SF Pro, SF Mono payloads, red for what leaks. */
:root {
  --bg: #000; --card: #111113; --line: #2c2c2e; --ink: #fff; --grey: #8e8e93; --grey2: #a1a1a6;
  --red: #ff5147; --blue: #4da2ff; --field: #1c1c1e;
  --sans: -apple-system, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --display: -apple-system, "SF Pro Display", "SF Pro", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "New York", ui-serif, Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.45 var(--sans); }
main { max-width: 440px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 18px 40px; }
[hidden] { display: none !important; }

.top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.brand { font: 700 19px/1 var(--display); letter-spacing: -0.03em; }
.where { font: 500 11px/1 var(--sans); color: var(--grey); }
h1 { font: 700 38px/1.02 var(--display); letter-spacing: -0.035em; margin-bottom: 14px; }
.lede { color: var(--grey2); font-size: 15.5px; }
.how { margin: 12px 0 22px; color: var(--grey2); font-size: 14.5px; }
.how summary { color: var(--blue); cursor: pointer; list-style: none; font-weight: 500; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: " ›"; }
.how[open] summary::after { content: " ⌄"; }
.how p { margin-top: 8px; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--field); border-radius: 10px;
       padding: 3px; margin-bottom: 14px; }
.seg button { border: 0; background: transparent; color: var(--grey2); font: 600 14px/1 var(--sans);
              padding: 9px 0; border-radius: 8px; cursor: pointer; }
.seg button.on { background: #3a3a3c; color: var(--ink); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
        margin-bottom: 12px; }
.step { display: flex; align-items: center; gap: 9px; font: 600 15px/1.2 var(--sans); margin-bottom: 12px; }
.step span { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #000;
             display: inline-grid; place-items: center; font: 700 12px/1 var(--sans); }
.step em { font-style: normal; }

textarea, input[type=number] { width: 100%; background: var(--field); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; font: 400 19px/1.3 var(--serif); padding: 12px 14px; resize: none; outline: none; }
textarea:focus, input:focus { border-color: #48484a; }
.hint { color: var(--grey); font-size: 12.5px; margin-top: 6px; }
.agebox { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; }
.agebox input { text-align: center; font: 700 34px/1.1 var(--display); }
.step-btn { background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
            font: 400 26px/1 var(--sans); cursor: pointer; }
.picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 216px; overflow-y: auto;
          font: 25px/1.5 "Apple Color Emoji", sans-serif; text-align: center; }
.picker button { background: none; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.picker button.sel { background: #3a3a3c; }

.primary, .secondary { width: 100%; margin-top: 14px; border: 0; border-radius: 12px; padding: 13px;
  font: 600 16px/1 var(--sans); cursor: pointer; }
.primary { background: var(--ink); color: #000; }
.primary:disabled { opacity: .45; }
.secondary { background: var(--field); color: var(--ink); }

/* The payload: key / parameters / records, one line each, as Apple printed it in 2017. */
.json { font: 400 11.2px/1.65 var(--mono); color: var(--grey2); background: #000; border-radius: 10px;
        padding: 10px 12px; overflow: hidden; }
.json .ln { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.json .v { color: var(--ink); }
.json .r { color: var(--red); }
.note { color: var(--grey2); font-size: 13.5px; margin-top: 10px; }
.rate { color: var(--grey); font-size: 12.5px; margin-top: 8px; }
.rate b { color: var(--red); font-weight: 600; }

/* Decoded */
.words { font: 400 24px/1.35 var(--serif); }
.words .w { transition: color .3s; }
.words .unsure { color: var(--grey); border-bottom: 1.5px dotted var(--grey); }
.words .oov { color: #48484a; }
.alts { color: var(--grey); font-size: 13px; margin-top: 8px; }
.alts b { color: var(--ink); font-weight: 500; }
.big-emoji { font: 72px/1.1 "Apple Color Emoji"; text-align: center; }
.ages { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; font: 500 11px/22px var(--sans); text-align: center; }
.ages span { color: #3a3a3c; border-radius: 5px; transition: color .15s; }
.ages span.x { text-decoration: line-through; color: #48484a; }
.ages span.hit { background: var(--red); color: #fff; font-weight: 700; text-decoration: none; }
.age-read { font: 700 44px/1.1 var(--display); text-align: center; margin-bottom: 10px; }

footer { margin-top: 26px; color: var(--grey); font-size: 13px; }
footer p + p { margin-top: 8px; }
footer .small { font-size: 12px; }

/* Screenshot mode for the dossier: no chrome, the finished state of one round. */
body.shot .top, body.shot h1, body.shot .lede, body.shot .how, body.shot footer, body.shot .seg, body.shot #again,
body.shot #send, body.shot #decode, body.shot .hint, body.shot .rate { display: none !important; }
body.shot main { padding-top: 0; }
.picked { display: none; }
body.shot .picker { display: none; }
body.shot .picked { display: block; font: 52px/1.2 "Apple Color Emoji"; text-align: center; }
body.shot .ages { font-size: 10px; line-height: 17px; gap: 2px; }
body.shot .age-read { font-size: 38px; margin-bottom: 6px; }
body.shot.chrome .top, body.shot.chrome h1, body.shot.chrome .seg { display: revert !important; }
body.shot.chrome .seg { display: grid !important; }
body.shot.chrome .top { display: flex !important; }
body.shot.chrome main { padding-top: 16px; }
/* Screenshot mode: a status-bar strip, as on a real iPhone screen (393 x 852 pt, 54 pt top inset). */
body.shot::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 54px; background: #000; z-index: 10; }
body.shot main { padding-top: 62px; }

.show { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13.5px; color:var(--grey2); }
.show input { width:18px; height:18px; accent-color: var(--blue); }
body.shot .show { display:none; }

/* Mirror mode: the phone UI on the stand's big screen, played by itself. */
.who { display: none; }
body.mirror .who { display: block; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey); margin: 2px 0 12px; }
body.mirror .who.visitor { color: var(--red); }
body.mirror .hint, body.mirror #send, body.mirror #decode, body.mirror #again, body.mirror .show, body.mirror .picker
  { display: none !important; }
body.mirror { padding-top: 54px; }   /* room for the status bar and Dynamic Island drawn by the stand page */
body.mirror .picked { display: block; font: 52px/1.2 "Apple Color Emoji"; text-align: center; }