*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f4f6fa;color:#172033}header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#172033;color:#fff}header h1{font-size:1.2rem;margin:0}header p{margin:.2rem 0 0;font-size:.85rem}button,input,textarea,select{font:inherit}button{border:0;border-radius:.6rem;padding:.75rem 1rem;background:#244b7a;color:#fff;font-weight:700;cursor:pointer}button.secondary{background:#687386}button:disabled{opacity:.5}nav{display:grid;grid-template-columns:repeat(5,1fr);position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #ccd3dd}nav button{border-radius:0;background:#fff;color:#172033;padding:.8rem .25rem;font-size:.75rem}nav button.active{background:#dce8f7}main{max-width:860px;margin:auto;padding:1rem 1rem 6rem}.view{display:none}.view.active{display:block}.status-card,.card{background:#fff;border:1px solid #d7dce4;border-radius:.8rem;padding:1rem;margin-bottom:1rem;box-shadow:0 2px 8px #0000000d}.status-card{display:flex;flex-direction:column;gap:.25rem}.guide-step h2{margin-top:0}.checklist label{display:block;padding:.5rem;border-bottom:1px solid #eee}.guide-step textarea{width:100%;min-height:90px}.sticky-actions{position:fixed;bottom:0;left:0;right:0;display:flex;gap:.5rem;justify-content:center;padding:.7rem;background:#ffffffee;border-top:1px solid #ccd3dd;backdrop-filter:blur(5px)}.toolbar{display:flex;gap:.5rem}.toolbar input{flex:1;padding:.75rem;border:1px solid #aeb7c4;border-radius:.5rem}.verse{background:#fff;border-radius:.6rem;padding:.8rem;margin:.5rem 0;border-left:4px solid #244b7a}.verse small{display:block;font-weight:700;margin-bottom:.3rem}.verse button{margin-top:.5rem;padding:.45rem .7rem}.selected{outline:3px solid #79a4d3}textarea{display:block;width:100%;min-height:90px;margin:.35rem 0 1rem;padding:.6rem}fieldset{border:1px solid #ccd3dd;border-radius:.6rem;margin:1rem 0}.condition{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid #eee}.badge{font-weight:800}.warning{background:#fff1c7;padding:.8rem;border-radius:.5rem}.qr{display:block;max-width:320px;width:90%;margin:1rem auto;background:#fff;padding:1rem}code{display:block;word-break:break-all;background:#e8edf4;padding:.75rem;border-radius:.5rem}#toast{position:fixed;right:1rem;bottom:5rem;background:#172033;color:#fff;padding:.7rem 1rem;border-radius:.5rem;opacity:0;transition:.2s}#toast.show{opacity:1}@media(min-width:700px){nav button{font-size:.9rem}.sticky-actions{left:50%;transform:translateX(-50%);width:min(860px,100%)}}
.install-app-card {
  text-align: center;
}

.install-app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.install-app-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
}

/* MCE Witness mobile layout — version 9 */

/* Keep the top menu on one line and let the user swipe sideways. */
nav {
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  gap: 0;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

nav button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  padding: 14px 16px;
}

nav::-webkit-scrollbar {
  height: 5px;
}

/* Make the install area smaller on phones. */
.install-app-card {
  max-width: 420px;
  margin: 16px auto;
  padding: 14px;
}

.install-app-button {
  width: 100%;
  min-height: 0;
  padding: 12px;
  gap: 10px;
  flex-direction: column;
  font-size: 18px;
}

.install-app-logo {
  width: min(240px, 72vw);
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
}

/* Leave room above the fixed guide buttons. */
main {
  padding-bottom: calc(190px + env(safe-area-inset-bottom));
}

.view {
  padding-bottom: 24px;
}

/* Keep fixed guide controls usable without covering too much content. */
.guide-controls,
.bottom-controls,
.step-controls {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Phone-specific sizing. */
@media (max-width: 700px) {
  header {
    padding: 18px 20px;
  }

  header h1 {
    font-size: clamp(25px, 7vw, 36px);
  }

  nav button {
    padding: 13px 15px;
    font-size: 16px;
  }

  .install-app-card {
    width: auto;
    margin: 14px 12px;
  }

  .install-app-logo {
    width: min(210px, 66vw);
    max-height: 210px;
  }

  .install-app-button span {
    font-size: 18px;
    line-height: 1.2;
  }

  main {
    padding-bottom: calc(210px + env(safe-area-inset-bottom));
  }
}

/* Narrow phones. */
@media (max-width: 420px) {
  nav button {
    padding: 12px 13px;
    font-size: 15px;
  }

  .install-app-logo {
    width: min(180px, 62vw);
    max-height: 180px;
  }

  main {
    padding-bottom: calc(220px + env(safe-area-inset-bottom));
  }
}