/* The web player on the home page (index.html, js/run.js). Cloudflare caches .css for 4 h:
   bump run.css?v= in index.html on every change. */

[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ic.big { width: 42px; height: 42px; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.err { color: #d93838; }
.linkish { background: none; border: 0; padding: 4px; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
button.btn { font: inherit; font-weight: 600; cursor: pointer; }
.btn.wide { width: 100%; }

/* Fine pointer (mouse) vs touch: "Drop" and screenshots on computers, the keyboard on phones. */
@media (hover: hover) and (pointer: fine) { .touch { display: none !important; } }
@media not ((hover: hover) and (pointer: fine)) { .desk { display: none !important; } }

/* header account */
.top nav a.btn.ghost { color: var(--fg); }
.top nav [hidden] { display: none !important; }
.account[hidden] { display: none; }
.account { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.account .time { font-weight: 600; font-variant-numeric: tabular-nums; }
.account .email { color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .account .email { display: none; } .top nav a.btn { display: inline-flex; } }

/* hero: the stage on the right on computers, under the title on phones */
.hero.run { padding: 48px 0 40px; }
.hero.run .wrap { grid-template-areas: "top stage" "bottom stage"; grid-template-rows: 1fr 1fr; row-gap: 0; }
/* The two halves meet in the middle, beside the phone. */
.copy-top { grid-area: top; align-self: end; }
.copy-bottom { grid-area: bottom; align-self: start; }
.stage { grid-area: stage; }
@media (max-width: 820px) {
  .hero.run { padding-top: 28px; }
  .hero.run .wrap { grid-template-areas: "top" "stage" "bottom"; grid-template-rows: auto; row-gap: 24px; }
  .hero.run .lead { margin-bottom: 0; }
}
.opts { margin: 0 0 22px; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.chip:hover:not(:disabled) { border-color: var(--accent); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip:disabled { opacity: .45; cursor: not-allowed; }

/* the phone and its steps */
.stage { justify-self: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
.phone-frame { width: min(310px, 100%); height: 610px; border: 10px solid #1d2030; border-radius: 42px;
  background: var(--panel); box-shadow: var(--shadow); display: flex; overflow: hidden; position: relative; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px 20px; text-align: center; min-width: 0; }
.step[hidden] { display: none; }
.step strong { font-size: 18px; line-height: 1.3; }
.step.drop { margin: 12px; padding: 20px 14px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 28px; transition: background .15s, border-color .15s; }
.stage.over .step.drop { background: var(--accent-soft); border-color: var(--accent); }
.apk { display: flex; flex-direction: column; gap: 4px; word-break: break-word; }
.checks { list-style: none; padding: 0; margin: 4px 0; text-align: left; font-size: 14px; width: 100%; }
.checks li { position: relative; padding-left: 24px; margin: 8px 0; }
.checks li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.checks .good::before { content: "✓"; color: #1f8a4c; }
.checks .warn::before { content: "!"; color: #c27a00; left: 5px; }
.checks .bad::before { content: "✕"; color: #d93838; }
.checks .bad { font-weight: 600; }
.google { min-height: 44px; display: flex; justify-content: center; width: 100%; }
/* Google's button is an iframe with a light page: under the dark theme's color-scheme Safari and
   Chrome paint the iframe opaque white, a white box around the blue pill. Matching schemes keeps it clear. */
.google { color-scheme: light; }
.bar { width: 100%; height: 6px; border-radius: 9px; background: var(--accent-soft); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.bar.busy i { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.tip { margin-top: 8px; font-size: 13px; }

/* Add to the home screen, on the "Session ended" screen: the phone's browser bars gone, the
   device gets the whole screen (js/run.js). */
.install-tip { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; font-size: 13px; line-height: 1.4; text-align: left; }
.install-tip[hidden] { display: none; }
.install-tip img { border-radius: 9px; flex: none; }
.install-tip > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.install-tip strong { font-size: 14px; }
.install-tip .btn { padding: 7px 12px; font-size: 14px; }
.install-tip .linkish { align-self: flex-start; padding: 0 2px; color: var(--muted); }
.install-tip .share { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- live: the device, laid out as the extension's tab (extension/src/app.css) ----
   tools | phone | (logcat or a spacer that keeps the phone centred) */
.step.live { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; gap: 18px; padding: 0;
  align-items: stretch; justify-items: stretch; text-align: left; }
.step.live.logs { grid-template-columns: 170px minmax(0, 1fr) minmax(320px, 520px); }
.tools { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding-top: 4px; }
.tools .group { display: flex; flex-direction: column; gap: 6px; }
.tools .group-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 -8px 2px; }
.tools button { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 14px;
  color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.tools button:hover { border-color: var(--accent); }
.tools .ic { width: 16px; height: 16px; }
/* Android's buttons: a captioned grid of three. */
.tools .nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tools .nav button { flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; font-size: 11px; color: var(--muted); }
.tools .nav .ic { width: 100%; height: 38px; padding: 10px 0; box-sizing: border-box; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--fg); }
.tools .nav button:hover .ic { border-color: var(--accent); }
#recBtn .ic { color: #d93838; }
#recBtn.recording, #logsBtn.active, #soundBtn.active { border-color: var(--accent); background: var(--accent-soft); }
#recBtn.recording { border-color: #d93838; background: color-mix(in srgb, #d93838 12%, var(--panel)); }
.tools .meta { margin-top: auto; font-size: 13px; overflow-wrap: anywhere; }
.tools .end { color: #d93838; }
.time { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.phone-col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 0; }
.screen-box { flex: 1; align-self: stretch; min-height: 0; display: flex; align-items: center; justify-content: center;
  position: relative; padding: 9px; }
#screen { display: block; border-radius: 22px; background: #000; box-shadow: 0 0 0 8px #20232f, var(--shadow);
  touch-action: none; outline: none; cursor: pointer; }
#screen:focus { box-shadow: 0 0 0 8px var(--accent), var(--shadow); }
.stats { font-size: 12px; font-variant-numeric: tabular-nums; }
.connecting { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: #cfd3ea; font-size: 14px; pointer-events: none; }
.spin { width: 28px; height: 28px; border: 3px solid #3a3f5c; border-top-color: #8c9eff; border-radius: 50%;
  animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.idle { background: #fff4e5; color: #8a4b00; border-radius: 10px; padding: 6px 12px; font-size: 13px; text-align: center; }
.kbd { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
  font-size: 16px; /* iOS zooms into smaller fields */ }
.turn-hint { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #23263a; color: #e6e8f2; border: 1px solid #3a3f5c; border-radius: 999px; padding: 6px 14px; font-size: 13px;
  white-space: nowrap; pointer-events: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: min(460px, calc(100% - 32px));
  background: #1b1d29; color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 14px; box-shadow: var(--shadow); text-align: center; }

.logcat { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; }
.log-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.log-head input:not([type]), .log-head select { font: inherit; color: inherit; border: 1px solid var(--line); background: var(--bg);
  border-radius: 8px; padding: 4px 8px; }
.log-head input:not([type]) { flex: 1; min-width: 80px; }
.log-head label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.log-head input[type=checkbox] { accent-color: var(--accent); margin: 0; }
#log { flex: 1; overflow: auto; margin: 8px 0 0; font: 11.5px/1.35 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.lv-E, .lv-F { color: #d93838; } .lv-W { color: #b26a00; } .lv-V, .lv-D { color: var(--muted); }

/* Computers: the page becomes the device, as tall as the window allows. */
body.live .hero.run { padding: 16px 0 20px; }
body.live .hero.run .wrap { grid-template-columns: 1fr; grid-template-areas: "stage"; max-width: 1500px; }
body.live .copy { display: none; }
body.live .phone-frame { width: 100%; height: calc(100vh - 64px - 36px); height: calc(100dvh - 64px - 36px);
  min-height: 460px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body.live #how, body.live #how ~ section { display: none; }
body.live footer { display: none; }
@media (max-width: 900px) {
  .step.live, .step.live.logs { grid-template-columns: 150px minmax(0, 1fr); }
  .step.live .logcat { grid-column: 1 / -1; height: 320px; }
}

/* Phones and tablets: the device takes the whole screen, the buttons a strip on top. */
@media not ((hover: hover) and (pointer: fine)), (max-width: 640px) {
  body.live { overflow: hidden; }
  body.live .stage { position: fixed; inset: 0; z-index: 50; background: #0f111a; }
  body.live .phone-frame { width: 100%; height: 100%; min-height: 0; }
  .step.live, .step.live.logs { display: flex; flex-direction: column; gap: 0; }
  .tools { flex-direction: row; align-items: center; gap: 4px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top));
    background: #171a26; color: #cfd3ea; }
  .tools .group-title, .tools .meta, .tools .label { display: none; }
  .tools .group, .tools .nav { display: flex; flex-direction: row; gap: 4px; }
  .tools .time { min-width: 44px; margin-right: auto; }
  .tools button, .tools .nav .ic { width: 38px; height: 36px; padding: 0; justify-content: center; border-color: #2c3046;
    background: #23263a; color: #e6e8f2; }
  .tools .nav button { width: auto; height: auto; }
  .tools .nav .ic { padding: 9px; }
  .tools .end { width: auto; padding: 0 10px; color: #ff8a8a; }
  .tools .end .label { display: inline; }
  .phone-col { flex: 1; gap: 0; }
  .screen-box { padding: 0 0 env(safe-area-inset-bottom); }
  .stats, .logcat { display: none !important; }
  #screen, #screen:focus { border-radius: 0; box-shadow: none; }
  .idle { position: absolute; left: 12px; right: 12px; top: 60px; z-index: 2; }
  .phone-col { position: relative; }
}
/* A phone on its side: the strip of buttons on top ate a quarter of the height (Safari's bars
   take another), so it becomes a column on the left and the picture gets the full height. */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  .step.live, .step.live.logs { flex-direction: row; }
  .tools { flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 6px;
    padding-left: max(6px, env(safe-area-inset-left)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .tools .group, .tools .nav { display: contents; }
  .tools .time { min-width: 0; margin: 0; width: 38px; text-align: center; }
  .tools .end { width: 38px; padding: 0; }
  .tools .end .label { display: none; }
  .screen-box { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0; }
  .idle { top: 12px; }
}
@media (max-width: 820px) { .phone-frame { height: 440px; } }

/* pricing: four cards whose rows line up (subgrid), then the pay dialog (as the extension's,
   extension/src/app.css). Scoped to #pricing: style.css's .plan also draws /chrome-extension. */
.pricing-head { text-align: center; }
.pricing-head .sub { margin: 0 auto 36px; }
#pricing .plans { grid-template-rows: auto; align-items: stretch; }
#pricing .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 24px 22px 26px;
  position: relative; transition: border-color .15s, transform .15s; }
@supports not (grid-template-rows: subgrid) { #pricing .plan { display: flex; } }
#pricing .plan:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
#pricing .plan.best { background: linear-gradient(180deg, var(--accent-soft), var(--panel) 46%); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.plan-name h3 { font-size: 15px; font-weight: 600; color: var(--muted); }
.plan .tag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: var(--accent-fg); }
.plan .tag.soft { background: var(--accent-soft); color: var(--accent); }
#pricing .price { font-size: 40px; line-height: 1.1; margin: 14px 0 6px; letter-spacing: -.02em; }
#pricing .price small { font-size: 15px; margin-left: 3px; letter-spacing: 0; }
#pricing .plan .what { margin: 0 0 20px; }
#pricing .plan .btn { width: 100%; }
#pricing .plan .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.feats { list-style: none; margin: 22px 0 0 !important; padding: 20px 0 0 !important; border-top: 1px solid var(--line); }
.feats li { position: relative; padding-left: 26px; margin: 0 0 9px; font-size: 14px; line-height: 1.45; }
.feats li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 10px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.feats li.plus { padding-left: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.feats li.plus::before { content: none; }
.fine { text-align: center; color: var(--muted); font-size: 13px; max-width: 44em; margin: 24px auto 0; }

.pay { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--fg);
  padding: 26px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 24px 64px rgba(10, 12, 25, .28); }
.pay::backdrop { background: rgba(10, 12, 25, .5); backdrop-filter: blur(2px); }
.pay h2 { margin: 0 0 14px; font-size: 22px; }
.dialog-close { float: right; margin: -12px -12px 0 8px; }
.dialog-close button { width: 34px; height: 34px; border-radius: 50%; font-size: 15px; color: var(--muted); }
.dialog-close button:hover { background: var(--bg); text-decoration: none; }
.checkout { border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; }
.checkout-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.checkout-head strong { font-size: 17px; }
.checkout .price { font-size: 24px; margin: 0; }
.checkout ul { margin: 8px 0 10px; padding-left: 18px; color: var(--muted); font-size: 14px; }
.pay p { margin: 0 0 10px; }
.pay .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pay .row .btn { flex: 1; }
@media (max-width: 480px) { .pay { padding: 22px 20px; } .pay .row { flex-direction: column; } }
#payDone { text-align: center; padding-top: 8px; }
#payDone::before { content: "✓"; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 26px; font-weight: 700; }
#payDone p { color: var(--muted); margin-bottom: 20px; }
#payDone .btn { width: 100%; }