/* Tinker Desk shell. Sheet Set chrome stays on this page.
   The iframe is the modeler's own UI — do not paint a paper sheet over the view. */

.tinker-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--sheet);
}

.tinker-work {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--sheet);
}

.tinker-work iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--sheet);
  box-shadow: none;
}

.tinker-help {
  position: fixed;
  z-index: 40;
  top: 60px;
  right: 16px;
  width: min(28rem, calc(100vw - 32px));
  max-height: calc(100dvh - 120px);
  overflow: auto;
  margin: 0;
  padding: 16px;
  background: var(--sheet);
  color: var(--navy);
  border: var(--rule);
  border-left: 2.5px solid var(--redline);
  border-radius: 0;
  box-shadow: none;
}

.tinker-help h2 {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tinker-help h3 {
  margin-top: 12px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 16px;
}

.tinker-help p {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.tinker-help button {
  margin-top: 16px;
  min-height: 32px;
  padding: 4px 12px;
  border: var(--rule);
  border-radius: 0;
  background: var(--field);
  color: var(--navy);
  font-family: var(--f-ui);
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

.tinker-page .footer-strip {
  flex-wrap: wrap;
}