/* A23K contract runtime layout enforcement. Loaded after style.css. */

:root {
  --contract-header-height: clamp(3.1rem, 6vh, 4.25rem);
  --contract-rail-width: clamp(17rem, 22vw, 22rem);
  --contract-proof-width: clamp(16rem, 20vw, 22rem);
}

body[data-mode="edit"] { overflow-x: hidden; }

.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,
.starter-controls .starter-toggle,
.starter-controls .starter-select {
  width: auto;
  min-width: 0;
  max-width: max-content;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(2, 8, 18, 0.72);
  flex: 0 0 auto;
}

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

.starter-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
}

.starter-controls .starter-select {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.starter-controls .starter-select select {
  width: auto;
  max-width: 8rem;
}

.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;
}

body[data-opacity-controls-enabled="false"] #card3VisualControls {
  display: none;
}

.app-shell {
  min-height: calc(100vh - var(--contract-header-height));
  padding: 0.65rem clamp(0.65rem, 1.6vw, 1.25rem) 1rem;
  gap: 0.75rem;
  align-items: stretch;
}

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

.authoring-layer { align-self: stretch; }
.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);
}

.preview-layer { min-width: 0; overflow: hidden; }
.preview-layer .artifact-card {
  min-height: calc(100vh - var(--contract-header-height) - 1.5rem);
  height: 100%;
  padding: clamp(0.75rem, 1.8vw, 1.25rem);
}

.artifact-content-stack { min-height: 100%; align-content: start; }
.record-preview { min-height: clamp(15rem, 34vh, 24rem); }
.record-disc { width: min(24rem, 44vw, 42vh); }
.proof-layer { align-self: start; }
.proof-layer .actions, #mintActions { grid-template-columns: 1fr; gap: 0.45rem; }

body[data-mode="preview"] .record-preview {
  min-height: clamp(13rem, 28vh, 20rem);
}

body[data-mode="preview"] .record-disc {
  width: min(16rem, 54vw, 28vh);
}

@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: sticky;
    top: calc(var(--contract-header-height) + 0.65rem);
    max-height: calc(100vh - var(--contract-header-height) - 1.3rem);
    overflow: auto;
  }
  .preview-layer {
    grid-area: preview;
    max-height: none;
  }
  .proof-layer {
    grid-area: proof;
    position: sticky;
    top: calc(var(--contract-header-height) + 0.65rem);
    max-height: calc(100vh - var(--contract-header-height) - 1.3rem);
    overflow: auto;
  }
}

@media (min-width: 1120px) {
  .app-shell {
    grid-template-columns: var(--contract-rail-width) minmax(30rem, 1fr) var(--contract-proof-width);
    grid-template-areas: "authoring preview proof";
  }
  .preview-layer .artifact-card { min-height: calc(100vh - var(--contract-header-height) - 1.3rem); }
}

@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;
  }
  .preview-layer .artifact-card { min-height: 70vh; }
}