/* mcpehub.org design tokens — extracted from production CSS */
:root {
  /* brand */
  --mh-green:        #00bd6e;
  --mh-green-dark:   #00b368;
  --mh-blue:         #378df1;
  --mh-red:          #ff5858;
  --mh-yellow:       #ffc132;

  /* surfaces */
  --mh-bg:           #fafafa;
  --mh-surface:      #ffffff;
  --mh-surface-soft: #e0f9f0;
  --mh-overlay:      rgba(0, 0, 0, 0.48);

  /* borders */
  --mh-border:        rgba(0, 0, 0, 0.12);
  --mh-border-strong: #e5e5e5;
  --mh-border-soft:   #f0f0f0;

  /* text on light */
  --mh-text:           rgba(0, 0, 0, 0.87);
  --mh-text-secondary: rgba(0, 0, 0, 0.54);
  --mh-text-disabled:  rgba(0, 0, 0, 0.38);

  /* radii */
  --mh-r-card:  10px;
  --mh-r-btn:   8px;
  --mh-r-input: 6px;
  --mh-r-chip:  16px;

  /* typography — system stack matches Apple SF the original site loads */
  --mh-font:        -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mh-font-medium: var(--mh-font);
  --mh-font-bold:   var(--mh-font);

  /* layout */
  --mh-container: 1132px;
  --mh-header-h:  48px;

  /* gaps */
  --mh-gap:    12px;
  --mh-gap-sm: 8px;
  --mh-gap-xs: 4px;
}

@media (min-width: 64em) {
  :root { --mh-header-h: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--mh-bg);
  color: var(--mh-text);
  font-family: var(--mh-font);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  overscroll-behavior: contain;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:disabled { cursor: default; opacity: .4; }

input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--mh-green); text-decoration: none; }

/* ── Header ──────────────────────────────────────────────────────────── */
.mh-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--mh-gap);
  height: var(--mh-header-h);
  padding: 0 12px;
  background: var(--mh-surface);
  border-bottom: 1px solid var(--mh-border);
}
.mh-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.mh-logo__icon {
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
}
.mh-logo__text {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 17px;
  letter-spacing: -0.2px;
  line-height: 1;
}
.mh-logo__mark { font-weight: 800; color: var(--mh-green); }
.mh-logo__sub  { font-weight: 800; color: var(--mh-text); }
/* on very small screens, hide the text — just logo */
@media (max-width: 360px) {
  .mh-logo__text { display: none; }
}
.mh-header__title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--mh-text);
}
.mh-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--mh-text-secondary);
  transition: background-color .15s;
}
.mh-iconbtn:hover  { background: rgba(0,0,0,.06); }
.mh-iconbtn:active { background: rgba(0,0,0,.12); }
.mh-iconbtn--sm    { width: 32px; height: 32px; }
.mh-iconbtn[aria-pressed="true"] { background: var(--mh-surface-soft); color: var(--mh-green); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--mh-r-btn);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2px;
  transition: background-color .15s, color .15s, border-color .15s;
  -webkit-user-select: none;
  user-select: none;
}
.mh-btn--primary {
  background: var(--mh-green);
  color: #fff;
}
.mh-btn--primary:active { background: var(--mh-green-dark); }
.mh-btn--ghost {
  background: var(--mh-surface);
  color: var(--mh-text);
  border: 1px solid var(--mh-border-strong);
}
.mh-btn--ghost:active { background: var(--mh-border-soft); }
.mh-btn--danger {
  background: var(--mh-red);
  color: #fff;
}
.mh-btn--danger:active { background: #e04848; }

/* ── Chips ───────────────────────────────────────────────────────────── */
.mh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--mh-r-chip);
  background: var(--mh-surface);
  border: 1px solid #dadce0;
  font-size: 12px;
  color: var(--mh-text);
  transition: background-color .15s, color .15s, border-color .15s;
}
.mh-chip[aria-pressed="true"] {
  background: var(--mh-blue);
  border-color: var(--mh-blue);
  color: #fff;
}
.mh-chip--ghost[aria-pressed="true"] {
  background: var(--mh-green);
  border-color: var(--mh-green);
  color: #fff;
}

/* ── Modal / bottom sheet ────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* On-screen keyboard height (set from JS via the VisualViewport API). The
     sheet sits at flex-end, so reserving space at the bottom lifts it above
     the keyboard on browsers that overlay it (iOS Safari). On Android Chrome
     interactive-widget=resizes-content shrinks the viewport instead, so the
     computed value is ~0 and this is a no-op — the two compose cleanly. */
  padding-bottom: var(--kb, 0px);
  transition: padding-bottom .18s ease-out;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--mh-overlay);
  animation: fadeIn .18s ease-out;
}
.modal__sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--mh-surface);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 8px 16px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
  animation: slideUp .22s cubic-bezier(.16,.84,.44,1);
}
.modal__sheet--tall { min-height: 60dvh; }

/* Fullscreen modal — covers the entire (iframe) viewport, used for the
   download gate so ads have maximum viewability and breathing room. */
.modal__sheet--fullscreen {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: 16px 18px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  animation: fadeIn .22s ease-out;
}
.modal__sheet--fullscreen .modal__handle { display: none; }
.modal__sheet--fullscreen > .export-state {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal__sheet--fullscreen > .export-state[hidden] { display: none; }
.modal__sheet--fullscreen .modal__actions {
  margin-top: auto;     /* pin actions to bottom of fullscreen sheet */
}
.modal__handle {
  width: 36px; height: 4px;
  margin: 4px auto 12px;
  border-radius: 2px;
  background: var(--mh-border);
}
.modal__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}
.modal__hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--mh-text-secondary);
}
.modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}
/* Pin the actions to the bottom of the sheet so primary buttons
   are always reachable even when the body content overflows. */
.modal__sheet > .modal__actions {
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  margin-top: 12px;
  background: var(--mh-surface);
  background-image: linear-gradient(to top, var(--mh-surface) 70%, rgba(255, 255, 255, 0));
  z-index: 2;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  z-index: 200;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 13px;
  border-radius: 8px;
  pointer-events: none;
  animation: toastIn .25s ease-out;
}
.toast[hidden] { display: none; }
@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}