/* Popup layout copied from https://slopstream.vercel.app, 2026-09-21. */
.shortcut-guide {
      width: min(430px, calc(100% - 44px));
      max-width: none;
      margin: auto;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--surface);
      box-shadow: 0 30px 90px rgb(0 0 0 / 0.48);
      color: var(--ink);
    }

.shortcut-guide {
      width: min(460px, calc(100% - 44px));
      max-height: calc(100dvh - 44px);
      overflow-y: auto;
    }

.shortcut-guide::backdrop {
      background: rgb(3 6 12 / 0.74);
      backdrop-filter: blur(7px);
    }

.shortcut-guide h2 {
      margin: 11px 0 0;
      color: var(--ink);
      font-size: 27px;
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

.shortcut-guide-intro {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

.shortcut-guide-install {
      width: 100%;
      min-height: 52px;
      margin-top: 22px;
      border: 0;
      border-radius: 14px;
      background: var(--blue);
      color: rgb(7 16 29);
      font-size: 15px;
      font-weight: 800;
    }

.shortcut-guide h2 { max-width: 330px; }

.shortcut-guide-intro { margin-top: 11px; }

.shortcut-steps {
      display: grid;
      gap: 10px;
      margin: 21px 0 0;
      padding: 0;
      list-style: none;
    }

.shortcut-step {
      min-height: 62px;
      display: grid;
      align-items: center;
      grid-template-columns: 34px minmax(0, 1fr) 32px;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgb(9 13 20 / 0.52);
      text-align: left;
    }

.shortcut-step-number {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border-radius: 50%;
      background: rgb(40 118 247 / 0.16);
      color: var(--blue-hi);
      font-size: 12px;
      font-weight: 800;
    }

.shortcut-step-icon {
      width: 25px;
      height: 25px;
      justify-self: center;
      fill: none;
      stroke: var(--muted);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.shortcut-step-copy strong,
.shortcut-step-copy span { display: block; }

.shortcut-step-copy strong {
      color: var(--ink);
      font-size: 14px;
      line-height: 1.25;
    }

.shortcut-step-copy span {
      margin-top: 3px;
      color: var(--faint);
      font-size: 12px;
      line-height: 1.35;
    }

.shortcut-guide-actions { margin-top: 15px; }

.shortcut-guide-install {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0;
      text-decoration: none;
    }

.shortcut-guide-dismiss {
      width: 100%;
      min-height: 44px;
      margin-top: 8px;
      color: var(--faint);
      font-size: 13px;
    }
@media(max-width:640px){
.shortcut-guide {
        inset: auto 0 0;
        width: 100%;
        margin: auto 0 0;
        padding: 23px 19px max(16px, env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 26px 26px 0 0;
      }
.shortcut-guide h2 { font-size: 25px; }
.shortcut-step { min-height: 59px; }
}

/* Match SlopStream's inherited type and button reset inside YapTap. */
.shortcut-guide{--faint:rgb(130 144 164);text-align:left}
.shortcut-guide h2{font-family:var(--font);font-weight:700}
.shortcut-guide-dismiss{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;font-weight:750;cursor:pointer;padding:1px 6px}
.shortcut-microphone{background:var(--muted);-webkit-mask:url('/assets/shortcut-microphone.png') center/contain no-repeat;mask:url('/assets/shortcut-microphone.png') center/contain no-repeat}
.shortcut-guide:focus{outline:none}.design-controls{display:none!important}

.shortcut-guide a:focus-visible,.shortcut-guide button:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.shortcut-guide-install:focus-visible{border-radius:14px}
.shortcut-guide-dismiss:focus-visible{border-radius:10px}

/* Initial dialog focus announces the heading without a button focus ring. */
#iphone-popup-title:focus{outline:none}