/* A23K is a demoted legacy guardrail stylesheet. It loads before style.css.
   It must not own final visual decisions.
   If A23K conflicts with style.css or later explicit design decisions, A23K loses. */
/* A23K guardrail-only preview geometry contract marker. */

:root {
  --contract-header-height: clamp(3.1rem, 6vh, 4.25rem);
  --contract-rail-width: clamp(17rem, 22vw, 22rem);
  --contract-proof-width: clamp(16rem, 20vw, 22rem);
  --z-background: 0;
  --z-artifact: 10;
  --z-controls: 20;
  --z-header: 30;
  --z-badge: 40;
  --z-overlay: 50;
  --z-modal: 60;
}

body {
  --contract-card-shell-bg: linear-gradient(180deg, rgba(5, 10, 20, 0.88), rgba(6, 12, 24, 0.74));
  --contract-card-shell-border: rgba(122, 154, 203, 0.35);
  --contract-card-shell-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  --contract-focus-ring: 0 0 0 2px rgba(137, 191, 255, 0.28);
}

html,
body {
  overflow-x: hidden;
}

body[data-mode="edit"] {
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
}

/* Header/tool compactness only. */
.app-header {
  min-height: var(--contract-header-height);
  padding: 0.35rem clamp(0.55rem, 1.6vw, 1rem);
  align-items: center;
  gap: 0.55rem;
  top: 0;
}

.header-brand { max-width: 14rem; }
.header-logo { height: clamp(1.45rem, 3.2vh, 1.9rem); }
.logo-toggle-control { cursor: pointer; }

.logo-toggle-control > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.logo-toggle-control:has(input:not(:checked)) .header-logo {
  opacity: 0.38;
  filter: grayscale(1);
}

.mode-choice-header {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 0.35rem;
  scrollbar-width: thin;
}

.mode-choice-header legend { display: none; }

.mode-choice-header label,
.mode-choice-header .mode-toggle-button {
  width: auto;
  min-width: 0;
  max-width: max-content;
  min-height: 1.65rem;
  padding: 0.22rem 0.46rem;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(2, 8, 18, 0.72);
  flex: 0 0 auto;
  font-size: 0.65rem;
}

.mode-choice-header .mode-toggle-button {
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  line-height: 1;
}

.viewport-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 8, 18, 0.72);
}

.viewport-mode-toggle .mode-toggle-button {
  min-height: 1.8rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.72rem;
}

.viewport-mode-toggle .mode-toggle-button.is-active {
  background: linear-gradient(135deg, #1fc8ff, #7a5cff);
  border-color: transparent;
  color: #fff;
}

/* Form/tool density. These rules do not control the artifact crop. */
.authoring-layer > .layer-label,
.authoring-layer > #authoringTitle,
.authoring-layer > .panel-copy,
.proof-layer > .layer-label,
.proof-layer > .panel-copy,
.preview-actions > .hint,
.actions > .hint,
.authoring-card .hint,
.media-group-title {
  display: none;
}

.app-shell {
  min-height: calc(100vh - var(--contract-header-height));
  padding: 0.65rem clamp(0.65rem, 1.6vw, 1.25rem) max(5rem, env(safe-area-inset-bottom, 0px) + 3.5rem);
  gap: 0.75rem;
  align-items: start;
}

.panel {
  border-radius: 0.9rem;
  padding: 0.75rem;
}

.authoring-layer { align-self: start; }
.authoring-layer form { gap: 0.55rem; }

.authoring-card {
  padding: 0.6rem;
  gap: 0.5rem;
  border-radius: 0.72rem;
}

.authoring-card h3 { font-size: 0.86rem; }
.card-title-inline { font-size: 0.8rem; }
label { gap: 0.22rem; font-size: 0.78rem; }
.field-row { display: grid; gap: 0.45rem; }

@media (min-width: 900px) {
  .field-row-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

input,
textarea,
select,
button {
  padding: 0.52rem 0.62rem;
  border-radius: 0.55rem;
}

fieldset {
  padding: 0.55rem;
  border-radius: 0.7rem;
}

.authoring-layer input:not([type="checkbox"]):not([type="radio"]),
.authoring-layer textarea,
.authoring-layer select {
  width: min(100%, 16rem);
  max-width: 100%;
}

.authoring-layer input[type="file"] { width: min(100%, 14rem); }
.authoring-layer input[type="range"] { width: min(100%, 15rem); }
.authoring-layer textarea { min-height: 5rem; }

.authoring-layer .actions > button,
.authoring-layer button {
  width: auto;
  max-width: 10rem;
  justify-self: start;
}

.plus-choice-grid { grid-template-columns: minmax(0, 1fr); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--contract-focus-ring);
}

/* In-flow application columns. This controls tool placement, not artifact crop. */
@media (min-width: 760px) {
  .app-header { display: flex; }

  .app-shell {
    display: grid;
    grid-template-columns: var(--contract-rail-width) minmax(0, 1fr);
    grid-template-areas:
      "authoring preview"
      "authoring proof";
  }

  .authoring-layer {
    grid-area: authoring;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .preview-layer {
    grid-area: preview;
  }

  .proof-layer {
    grid-area: proof;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (min-width: 1120px) {
  .app-shell {
    grid-template-columns: var(--contract-rail-width) minmax(0, 1fr) var(--contract-proof-width);
    grid-template-areas: "authoring preview proof";
  }
}

@media (max-width: 759px) {
  .app-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .panel {
    max-height: none;
    overflow: visible;
  }

  .viewport-mode-toggle {
    width: 100%;
    justify-content: center;
  }
}

/* Artifact-surface guardrails: narrow safety only (no geometry ownership). */
.preview-layer {
  min-width: 0;
  overflow: visible;
}



/* Proof panel single-authority guard: prevent sticky/overlay conflicts from other style layers. */
body[data-mode="edit"] .proof-layer {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  z-index: 1;
  pointer-events: auto;
}
body[data-mode="edit"] .proof-layer::before,
body[data-mode="edit"] .proof-layer::after {
  content: none;
  display: none;
}

/* Card 5 non-interference guard: A23K must not outrank active authoring inputs. */
body[data-mode="edit"] .authoring-layer,
body[data-mode="edit"] #card5MintFields,
body[data-mode="edit"] #card5MintFields :is(input, textarea, select, button, label) {
  position: relative;
  z-index: 4;
}

.artifact-content-stack {
  min-height: 100%;
  align-content: start;
}

/* Preview reachability only; no forced portrait frame. */
body[data-mode="preview"] {
  min-height: 100svh;
  overflow-y: auto;
}

body[data-mode="preview"] .preview-layer {
  position: relative;
  inset: auto;
  min-height: 100svh;
  overflow: visible;
  display: block;
  padding-bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px));
}


body[data-mode="preview"] .artifact-content-stack {
  min-height: 100%;
  align-content: start;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}

.preview-return {
  left: 50%;
  transform: translateX(-50%);
}

body[data-mode="preview"] .preview-return {
  display: grid;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(4.5rem, 16vh, 8.5rem);
  width: min(92vw, 38rem);
  margin: 0 auto;
  z-index: 10030;
  pointer-events: auto;
}

/* Edit-mode control elevation:
   Raise Preview/Finalize action row ~20-25% from viewport bottom so
   it remains intentionally reachable and not blocked by overlay shells. */
body[data-mode="edit"] .preview-return {
  display: grid;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(18vh, 22vh, 25vh);
  z-index: var(--z-controls);
  pointer-events: auto;
}


.preview-return,
#toggleModeBtn,
#previewExitToEditBtn,
#previewGoFinalBtn,
#finalizeMainBtn,
[data-action="preview"],
[data-action="finalize"],
[data-action="back-to-edit"] {
  position: relative;
  z-index: var(--z-controls);
  pointer-events: auto;
}


/* =========================================================
   Seal-choice modal boundary
   ---------------------------------------------------------
   A23K is not allowed to own #sealChoiceOverlay geometry,
   purchase-button stacking, or hit-testing. Those decisions belong
   to style.css and the seal-choice runtime. A23K may only keep a
   hidden seal-choice overlay inert so it cannot block editor/preview
   clicks when closed.
   ========================================================= */
#sealChoiceOverlay[hidden],
.seal-choice-overlay[hidden] {
  pointer-events: none !important;
}

.app-overlay:not(.is-open),
.summary-overlay:not(.is-open),
.modal-backdrop:not(.is-open),
.proof-overlay:not(.is-open),
.helper-overlay:not(.is-open),
.comfort-panel:not(.is-open),
.summary-card:not(.is-open),
.debug-card:not(.is-open) {
  pointer-events: none;
}

.app-overlay.is-open,
.summary-overlay.is-open,
.modal-backdrop.is-open,
.proof-overlay.is-open,
.helper-overlay.is-open {
  pointer-events: auto;
  z-index: var(--z-overlay);
}

.modal.is-open,
[role="dialog"].is-open {
  z-index: var(--z-modal);
}


/* Edit-mode single-authority boundary: keep non-system overlay shells inactive unless a controller opens one explicitly. */
body[data-mode="edit"] :is(.app-overlay,.summary-overlay,.modal-backdrop,.proof-overlay,.helper-overlay,.comfort-panel):not(.is-open) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* =========================================================
   Overlay/card retirement boundary
   ---------------------------------------------------------
   Helper overlays, summary cards, debug cards, proof cards,
   and comfort panels are advisory only unless explicitly
   opened by a controller-owned modal state.

   They must not silently block:
   - Preview
   - Back to Edit
   - Finalize
   - Card 5 machine-created fields
   - Card 5 visibility
   - artifact export/finalization state

   Closed, hidden, inactive, or dismissed overlays/cards must
   not catch pointer events and must not sit above primary
   controls.
   ========================================================= */

.comfort-panel,
.summary-card,
.debug-card,
.proof-card,
.helper-card {
  max-width: min(100%, 38rem);
}

/* Top-toolbar visibility mirrors only. */
body[data-hero-enabled="false"] #card4HeroSection { display: none; }
body[data-audio-enabled="false"] #card2AudioUploads { display: none; }
body[data-opacity-controls-enabled="false"] #card3VisualControls { display: none; }
body[data-creator-mode="pure"] #plusChoices { display: none; }
body[data-creator-mode="plus"] #plusChoices { display: block; }

/* =========================================================
   Card 5 retirement boundary
   ---------------------------------------------------------
   A23K contract layout must not own Card 5.

   A23K may not control:
   - Card 5 visibility
   - Card 5 faceplate geometry
   - Card 5 final details
   - metadata display
   - Details/debug behavior
   - premium styling
   - label typography
   - authored Card 5 field layout
   - machine-created Card 5 values

   Card 5 is owned by the Card 5 runtime/controller and its
   own styling layer. A23K may only protect global reachability,
   clipping, and app-shell layout.
   ========================================================= */

/* Background Video / Surface Background authority:
   Background Video means fixed full-page back page media.
   It is not artifact-stage media, not postcard/card media, and not vinyl media.

   The authoring/editor panel and SpinStream visual composition sit above it.
   They must not clip, size, crop, contain, or re-parent it.

   This authority must persist across Edit, Preview, Final export, and minted final page.
   A23K may guard against clipping/reachability regressions, but it must not convert
   Background Video into a smaller framed artifact/card/postcard surface.
*/

/* Viewport Bottom Sentinel contract:
   #viewportBottomSentinel proves the bottom of the full page/back page view
   remains visible/reachable across Edit, Preview, Final export, and minted final page.

   It must not be placed inside artifact/card/postcard/stage/vinyl containers.
   It must not be clipped by authoring panels or preview wrappers.
   It may be visually dimmed later, but tests must still be able to locate it
   unless a later contract explicitly retires it.
*/


body[data-mode="preview"] .preview-return {
  justify-self: center;
  margin-inline: auto;
}


/* Safety-only badge reachability guard.
   A23K does not own final badge styling; this only preserves pointer reachability when proof exists. */
#mintedStatusBadge {
  pointer-events: auto;
}