/* ── oco.css ─────────────────────────────────────────────
   Mobile-compatible base stylesheet.
   Text outline (white shadow on black text) is preserved
   for readability over variable video backgrounds.
   All scale transforms on interaction have been removed
   to prevent layout shifts on touch devices.
──────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────── */
body, td, th, p {
  font-family: 'Optima', 'Verdana', 'STSong', sans-serif;
  background-color: transparent;
  font-size: 14pt;
}

/* ── Fonts ────────────────────────────────────────────── */
@font-face {
  font-family: 'CormorantGaramond-Regular';
  src: url('CormorantGaramond-Regular.ttf');
}

.ItemText {
  font-size: 5vw;
  font-family: 'CormorantGaramond-Regular';
}

/* ── Labels ───────────────────────────────────────────── */
label {
  font-size: clamp(14px, 2vw, 18px);
  border: 0;
}

.label {
  font-size: clamp(12px, 1vw, 16px);
  border: 0;
}

#label {
  font-size: clamp(12px, 1vw, 16px);
  border: 0;
}

/* ── Inputs ───────────────────────────────────────────── */
input {
  color: #ffffff;
  font-family: Optima, sans-serif;
  /* 16px minimum prevents iOS Safari auto-zoom on focus */
  font-size: max(1rem, 16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 0.4rem 0.6rem;
  /* white text outline for readability over video */
  text-shadow:
    #fff 1px  0   0,
    #fff 0    1px 0,
    #fff -1px 0   0,
    #fff 0   -1px 0;
  /* no scale transform — avoid layout jumps on mobile tap */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

input:focus {
  background-color: rgba(255, 255, 255, 0.95);
  color: #000;
  text-shadow: none;
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 1px;
}

/* ── Buttons ──────────────────────────────────────────── */
button {
  font-size: clamp(14px, 4vw, 16pt);
  border: 0;
  background-color: transparent;
  padding: clamp(8px, 1.5vw, 14px) clamp(12px, 2vw, 20px);
  min-height: 44px;   /* Apple HIG minimum touch target */
  cursor: pointer;
  /* white text outline preserved */
  text-shadow:
    #fff 1px  0   0,
    #fff 0    1px 0,
    #fff -1px 0   0,
    #fff 0   -1px 0;
  /* colour-only transition — no scaling */
  transition: opacity 0.15s ease;
}

button:active {
  opacity: 0.65;
  transition: opacity 0s;
}

@media (hover: hover) {
  button:hover {
    opacity: 0.8;
  }
}

/* ── bid-help ─────────────────────────────────────────── */
#bid-help {
  border: 3px solid white;
  border-radius: 100vw;
  background-color: rgba(255, 255, 255, 0.3);
  text-shadow:
    #fff 1px  0   0,
    #fff 0    1px 0,
    #fff -1px 0   0,
    #fff 0   -1px 0;
  transition: background-color 0.2s ease;
}

#bid-help:active {
  background-color: rgba(255, 255, 255, 0.6);
}

/* ── outlineTextWhite ─────────────────────────────────── */
.outlineTextWhite {
  color: #ffffff;
  font-family: Optima, sans-serif;
  font-size: clamp(14px, 1.5vw, 20px);
  border: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.3);
  text-shadow:
    #fff 1px  0   0,
    #fff 0    1px 0,
    #fff -1px 0   0,
    #fff 0   -1px 0;
}

/* ── allUI overlay ────────────────────────────────────── */
#allUI {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

/* ── Utility: hidden / techtalk ───────────────────────── */
zh {
  display: none;
}

.techtalk {
  font-size: 6px;
  border: 0;
  display: none;
}

/* ── prescaled / normal demo blocks ──────────────────── */
#prescaled,
#normal {
  position: relative;
  left: 100px;
  background: #000;
  color: #fff;
  transition: transform 1s ease;
}

#prescaled {
  width: 200px;
  height: 200px;
  font-size: 32px;
}

#normal {
  width: 100px;
  height: 100px;
  font-size: 16px;
}

/* ── motiondial components ────────────────────────────── */
#motiondialactive {
  border-radius: 1vw;
  background-color: #4b2e83;
  text-decoration: none;
  text-shadow: none;
  display: inline-block;
  vertical-align: bottom;
}

#motiondialspace {
  border-radius: 1vw;
  background-color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  text-shadow: none;
  display: inline-block;
  vertical-align: bottom;
}

#motiondialdead {
  border-radius: 1vw;
  background-color: rgba(204, 204, 204, 0.8);
  text-decoration: none;
  text-shadow: none;
}

#singleBar {
  border-radius: 0;
  border: 1px solid white;
  height: 4vw;
  width: 120%;
  text-decoration: none;
  text-shadow: none;
  background-color: rgba(204, 204, 255, 0.73);
  background-image: repeating-linear-gradient(90deg, #000c 0 1vw, transparent 1vw 2vw);
}

#gantt {
  background-image: repeating-linear-gradient(90deg, #fff 0 1px, #7a00ff 1px 1vw);
}

.motiondialpress {
  border-radius: 1vw;
  background-color: #9999cc;
  text-decoration: none;
  text-shadow: none;
  padding: 1.5vw;
  transition: opacity 0.2s ease;
}

.motiondialpress:active {
  opacity: 0.7;
}

/* ── motiondial typography ────────────────────────────── */
motiondialpsmall {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1vw;
  color: #808080;
  text-decoration: none;
}

motiondialpsmallwhite {
  font-family: 'Avenir Next', Barlow, Helvetica, sans-serif;
  font-size: 1.5vw;
  color: #ffffff;
  text-decoration: none;
  padding: 5px;
}

motiondialpbigwhite {
  font-family: 'Avenir Next', Barlow, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  font-size: 15vw;
  font-weight: 800;
}

motiondialpmedwhite {
  font-family: 'Avenir Next', Barlow, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 7vw;
  font-weight: 800;
}

motiondialpbigblack {
  font-family: 'Avenir Next', Barlow, Helvetica, sans-serif;
  color: #000000;
  text-decoration: none;
  font-size: 15vw;
  font-weight: 800;
}

motiondiala {
  color: #ffffff;
  text-decoration: none;
}

motiondiala:active,
motiondiala:hover,
motiondiala:visited {
  color: #ffffff;
  text-decoration: none;
}

motiondialul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

motiondialSteps {
  font-family: Optima, Verdana, Arial, Helvetica, sans-serif;
  font-size: 2vw;
  color: white;
  text-decoration: none;
  border-radius: 20vw;
  background-color: #d4ba88;
  text-shadow: none;
  padding: 1.5vw;
}

motiondialpB {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 3vw;
  color: lightblue;
  text-decoration: none;
}

motiondialpT {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 7vw;
  color: #000000;
  text-decoration: none;
}

/* ── modelButtons ─────────────────────────────────────── */
.modelButtons {
  font-size: 16pt;
  color: #ccffff;
  width: 100%;
  text-decoration: none;
}

/* ── motiondialpath ───────────────────────────────────── */
motiondialpath {
  fill: transparent;
  stroke: black;
}