/* 1) Base: fluid spacing, robust viewport height, and safe-area support */
.responsive-box {
  /* Fluid outer spacing with safe-area support for notched devices */
  margin-block-start: clamp(16px, 3vh, 28px);
  margin-inline: max(env(safe-area-inset-left, 0px), clamp(16px, 6vw, 80px))
    max(env(safe-area-inset-right, 0px), clamp(16px, 6vw, 80px));
  margin-block-end: 0;

  /* Height: fallback to 100vh, then prefer dvh to avoid mobile browser UI jumps */
  min-height: min(calc(80vh - 100px), calc(100vh - 160px));
  min-height: min(calc(80dvh - 100px), calc(100dvh - 160px)); /* modern */

  display: flex;
  align-items: center;
  justify-content: center;

  /* Visuals */
  border: 1px solid color-mix(in oklab, #ccc, #000 10%);
  border-radius: 12px;

  /* Fluid inner padding */
  padding: clamp(12px, 2.5vw, 24px);

  /* Let children wrap nicely on small screens if there are multiple items */
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 16px);

  /* Optional: limit uncontrolled growth on huge screens */
  max-inline-size: min(1200px, 92vw);
  margin-inline: auto; /* center horizontally when max width kicks in */

  /* Optional: creates a query-able container for children */
  container-type: inline-size;
  container-name: responsiveBox;
}

/* 2) Progressive enhancement for dark mode */
@media (prefers-color-scheme: dark) {
  .responsive-box {
    border-color: color-mix(in oklab, #888, #fff 15%);
    background: color-mix(in oklab, #111, #222 50%);
  }
}

/* 3) Respect users who prefer less motion (if you animate inside later) */
@media (prefers-reduced-motion: reduce) {
  .responsive-box,
  .responsive-box * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* 4) Minimal breakpoints only where needed
   - Small screens: tighten margins/padding a bit.
   - Medium screens: moderate spacing.
   (The fluid clamp values already cover most cases, so these just fine-tune.) */
@media (max-width: 640px) {
  .responsive-box {
    margin-inline: max(env(safe-area-inset-left, 0px), 12px)
      max(env(safe-area-inset-right, 0px), 12px);
    padding: clamp(10px, 3.5vw, 14px);
    border-radius: 10px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .responsive-box {
    margin-inline: max(env(safe-area-inset-left, 0px), 24px)
      max(env(safe-area-inset-right, 0px), 24px);
    padding: clamp(12px, 2.2vw, 18px);
  }
}

/* 5) Optional: container query example for children inside the box
   This avoids page-wide breakpoints and adapts based on the box’s width. */
@container responsiveBox (max-width: 520px) {
  .responsive-box > * {
    inline-size: 100%;
  }
}

/* 6) Optional: high-contrast users */
@media (forced-colors: active) {
  .responsive-box {
    border: 1px solid CanvasText;
    background: Canvas;
  }
}

/* CommonPublishForm.module.css */

/* Spacing */
.CommonPublishForm-module__headingTop--ioUt9 {
  margin-top: 4px;
}

.CommonPublishForm-module__mt6--SpFE9 { margin-top: 6px; }
.CommonPublishForm-module__mt8--Yh_yM { margin-top: 12px; }
.CommonPublishForm-module__mt10--aSB6R { margin-top: 10px; }
.CommonPublishForm-module__mt15--k3Qyn { margin-top: 25px; }

/* Content area styling */
.CommonPublishForm-module__demoContent--sp7IO {
  margin-bottom: 16px;
}

/* Typography - code/JSON areas */
.CommonPublishForm-module__mono--i7WD9 {
  font-family: Consolas, monospace;
  font-size: 14px;
}

/* Error text */
.CommonPublishForm-module__errorText--UJ4cA {
  color: crimson;
  font-size: 12px;
}

/* Read-only response textarea styling */
.CommonPublishForm-module__responseArea--wImWe {
  background: #f4f4f4;
  padding: 1px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Optional: dim disabled textarea (visual hint) */
.CommonPublishForm-module__textareaDisabled--Wif7V {
  opacity: 0.75;
}

/* MethodAgnosticForm.module.css */

/* Spacing */
.SubscriberCommonForm-module__headingTop--kCgNh {
  margin-top: 4px;
}

.SubscriberCommonForm-module__mt6--Bz3NA { margin-top: 6px; }
.SubscriberCommonForm-module__mt8--svSyn { margin-top: 12px; }
.SubscriberCommonForm-module__mt10--NZmIz { margin-top: 10px; }
.SubscriberCommonForm-module__mt15--dOWXz { margin-top: 25px; }

/* Typography - code/JSON areas */
.SubscriberCommonForm-module__mono--P6ifP {
  font-family: Consolas, monospace;
  font-size: 14px;
}

/* Error text */
.SubscriberCommonForm-module__errorText--gZThs {
  color: crimson;
  font-size: 12px;
}

/* Read-only response textarea styling */
.SubscriberCommonForm-module__responseArea--mdw7X {
  background: #f4f4f4;
  padding: 1px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Optional: dim disabled textarea (visual hint) */
.SubscriberCommonForm-module__textareaDisabled--c4gQX {
  opacity: 0.75;
}


/* GetToken.module.css */

/* Spacing */
.GetToken-module__headingTop--hUYfD {
  margin-top: 10px;
}

.GetToken-module__mt20--vghVc {
  margin-top: 20px;
}

.GetToken-module__mt30--nPDPm {
  margin-top: 30px;
}

/* Optional: monospace for token areas if you want code-like look
.mono {
  font-family: Consolas, monospace;
  font-size: 14px;
}
*/