/* Observation Broadcast result
   The submission form and loading states remain governed by the existing studio styles. */
@media (min-width: 901px) {
  .rv-page .studio.recorder:has(.observation-broadcast:not([hidden])) {
    display: block;
    padding: 0;
    background: #eee9dd;
  }
  .rv-page .studio.recorder:has(.observation-broadcast:not([hidden])) > .studio-brand,
  .rv-page .studio.recorder:has(.observation-broadcast:not([hidden])) > .studio-intro {
    display: none;
  }
}
.observation-broadcast {
  --broadcast-black: #080808;
  --broadcast-bone: #eee9dd;
  --broadcast-red: #ed231d;
  --broadcast-line: rgba(8,8,8,.2);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: clamp(190px, 15.5vw, 245px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: var(--broadcast-bone);
}
.observation-broadcast[hidden]{display:none}
.observation-broadcast .broadcast-rail {
  position: sticky;
  top: 0;
  height: 100svh;
  box-sizing: border-box;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  color: var(--broadcast-bone);
  background: var(--broadcast-black);
  overflow: hidden;
}
.broadcast-mark{width:52px;height:56px;object-fit:contain;object-position:left top}
.broadcast-rail-copy{margin:54px 0 24px;display:grid;gap:8px}
.broadcast-rail-copy span,.broadcast-recent article span{color:#eee9dd8f;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.broadcast-rail-copy strong{max-width:12ch;font:500 22px/1.04 "Roboto Condensed",sans-serif;text-transform:uppercase}
.broadcast-recent{display:grid;gap:0;overflow:auto;border-top:1px solid #eee9dd2f}
.broadcast-recent article{padding:18px 0;border-bottom:1px solid #eee9dd2f;display:grid;gap:8px}
.broadcast-recent article p,.broadcast-recent>p{margin:0;color:#eee9ddc7;font-size:11px;line-height:1.42}
.broadcast-rail>a{margin-top:auto;padding-top:22px;color:var(--broadcast-bone);display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;text-decoration:none}
.broadcast-social{margin-top:28px;padding-top:18px;border-top:1px solid #eee9dd2f;display:grid;gap:7px;color:#eee9dd9c;font-size:8px;letter-spacing:.16em}
.broadcast-main{min-width:0;padding:clamp(42px,5vw,78px) clamp(28px,4vw,72px) 56px;display:grid;grid-template-columns:minmax(250px,.58fr) minmax(600px,1.42fr);column-gap:clamp(28px,3.2vw,54px);align-items:start}
.broadcast-steps{grid-column:1/-1;margin-bottom:34px;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;gap:12px;align-items:center;color:#66625c;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.broadcast-steps i{height:1px;background:#08080833}.broadcast-steps strong{color:var(--broadcast-red)}
.broadcast-header{grid-column:1;grid-row:2;position:relative;max-width:520px;margin-bottom:28px}
.observation-broadcast .broadcast-header .section-label{margin:0 0 13px;color:#66625c;font-size:9px;letter-spacing:.19em}
.observation-broadcast .broadcast-header h2{margin:0;font:600 clamp(48px,4.4vw,70px)/.88 "Roboto Condensed",sans-serif;letter-spacing:-.055em;text-transform:uppercase}
.observation-broadcast .interpretation-status{margin:22px 0 0;max-width:54ch;color:#55514b;font-size:13px;line-height:1.55}
.broadcast-body{display:contents}
.observation-broadcast .interpretation-copy{grid-column:1;grid-row:3;min-width:0}
.observation-broadcast .result-original{margin:0;padding:19px 0;border-top:1px solid var(--broadcast-line);border-bottom:1px solid var(--broadcast-line)}
.observation-broadcast .result-original blockquote{font-size:clamp(19px,1.7vw,26px);line-height:1.13;text-transform:uppercase}
.observation-broadcast .lens-reason{margin:18px 0;padding:17px 0;border-top:0;border-bottom:1px solid var(--broadcast-line)}
.observation-broadcast .lens-reason p{font-size:14px;line-height:1.55}
.lens-choice{padding:2px 0 17px;border-bottom:1px solid var(--broadcast-line)}
.lens-choice>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.lens-choice>div>span{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.lens-choice small{max-width:28ch;color:#6c6861;font-size:9px;line-height:1.4;text-align:right}
.observation-broadcast .variant-picker{display:flex;gap:7px;margin:14px 0 0}
.observation-broadcast .variant-picker button{position:relative;min-height:38px;padding:0 13px;border-radius:999px;font-size:9px;background:transparent;box-shadow:none}
.observation-broadcast .variant-picker button.recommended::after{content:"AI";position:absolute;right:-3px;top:-8px;padding:3px 5px;border-radius:99px;background:var(--broadcast-red);color:white;font-size:6px;letter-spacing:.08em}
.observation-broadcast .interpretation-meta{margin-top:16px;font-size:9px;line-height:1.5}
.observation-broadcast .design-progress{margin:18px 0 0}
.observation-broadcast .interpretation-actions{position:relative;margin-top:24px;display:flex;gap:8px;align-items:center}
.observation-broadcast .interpretation-actions .solid,
.observation-broadcast .interpretation-actions .quiet{min-height:42px;padding:0 16px;font-size:9px}
.download-wrap{position:relative}
.download-menu{position:absolute;z-index:4;left:0;bottom:calc(100% + 9px);width:190px;padding:7px;border:1px solid #08080820;border-radius:15px;background:#fffefa;box-shadow:0 18px 45px #08080821}
.download-menu[hidden]{display:none}
.download-menu button{width:100%;padding:10px 12px;border:0;border-radius:10px;display:flex;justify-content:space-between;align-items:center;background:transparent;color:#080808;text-align:left;cursor:pointer}
.download-menu button:hover{background:#eee9dd}
.download-menu strong{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.download-menu span{color:#777169;font-size:9px}
.observation-broadcast #share-status{display:block;min-height:16px;margin-top:10px;color:#5e5a54;font-size:10px}
.observation-broadcast .interpretation-visuals{grid-column:2;grid-row:2/span 2;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.observation-broadcast .interpretation-visuals:has(.tee-concept[hidden]){grid-template-columns:minmax(0,460px);justify-content:end}
.observation-broadcast .tee-concept,.observation-broadcast .observation-card{box-sizing:border-box;width:100%;height:100%;aspect-ratio:auto;min-height:610px}
.observation-broadcast .tee-concept{padding:4.5%;background:#d8d5cc;border-color:#08080835}
.observation-broadcast .concept-head{font-size:8px;text-transform:none}
.observation-broadcast .tee-stage{min-height:390px}
.observation-broadcast .tee-concept>p{margin:0 0 9px;font:600 clamp(20px,1.7vw,28px)/1.04 "Roboto Condensed",sans-serif;text-transform:none}
.observation-broadcast .tee-concept>small{font-size:8px;line-height:1.42}
.observation-broadcast .concept-brand{margin-top:14px}
.observation-broadcast .observation-card{padding:7%;background:#e5e4dc}
.observation-broadcast .observation-card>div{font-size:8px;text-transform:none}
.observation-broadcast .observation-card blockquote{font-size:var(--card-type-size,clamp(30px,3vw,52px));text-transform:none}
.observation-broadcast .public-observation-number{color:var(--broadcast-red);font-weight:700}
.rv-page .studio.recorder:has(.observation-broadcast:not([hidden])) > .studio-close{z-index:105;right:18px;top:18px;width:38px;height:38px;border:1px solid #0808082b;background:#eee9dd;color:#080808;font-size:21px}
@media(max-width:1320px) and (min-width:901px){
  .broadcast-main{grid-template-columns:minmax(250px,.68fr) minmax(400px,1.32fr)}
  .observation-broadcast .interpretation-visuals{grid-template-columns:1fr}
  .observation-broadcast .tee-concept,.observation-broadcast .observation-card{min-height:560px}
}
@media(max-width:900px){
  .rv-page .studio.recorder:has(.observation-broadcast:not([hidden])){padding:0}
  .rv-page .studio.recorder:has(.observation-broadcast:not([hidden]))>.studio-brand,
  .rv-page .studio.recorder:has(.observation-broadcast:not([hidden]))>.studio-intro{display:none}
  .observation-broadcast{min-height:100svh;display:block}
  .observation-broadcast .broadcast-rail{position:relative;height:auto;min-height:0;padding:18px 58px 18px 20px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
  .broadcast-mark{width:34px;height:38px}
  .broadcast-rail-copy{margin:0}.broadcast-rail-copy strong{font-size:16px;max-width:none}.broadcast-rail-copy span{display:none}
  .broadcast-recent{display:none}
  .broadcast-rail>a{margin:0;padding:0;font-size:8px;gap:8px}
  .broadcast-social,.broadcast-steps{display:none}
  .broadcast-main{padding:34px 20px 54px;display:block}
  .broadcast-body{display:flex;flex-direction:column;gap:28px}
  .observation-broadcast .interpretation-visuals{order:1;width:100%;display:grid;grid-template-columns:1fr}
  .observation-broadcast .interpretation-copy{order:2;width:100%}
  .observation-broadcast .tee-concept,.observation-broadcast .observation-card{height:auto;min-height:0;aspect-ratio:4/5}
  .observation-broadcast .tee-stage{min-height:0}
  .observation-broadcast .broadcast-header h2{font-size:clamp(52px,17vw,78px)}
  .observation-broadcast .variant-picker{display:grid;grid-template-columns:1fr 1fr}
  .observation-broadcast .interpretation-actions{display:flex;flex-wrap:wrap}
  .observation-broadcast .interpretation-actions .solid{flex:1 1 100%}
  .download-wrap{flex:1}.download-wrap>#download-card{width:100%}
}
@media(max-width:520px){
  .broadcast-rail-copy strong{font-size:14px}
  .broadcast-rail>a{font-size:0}.broadcast-rail>a span{font-size:16px}
  .observation-broadcast .variant-picker{grid-template-columns:1fr}
  .lens-choice>div:first-child{display:grid}.lens-choice small{text-align:left}
}
@media(prefers-reduced-motion:reduce){.observation-broadcast *{scroll-behavior:auto}}

/* Observation lens waiting state */
@media(min-width:901px){
  .rv-page .studio.recorder:has(.lens-loading:not([hidden])){display:block;padding:0;background:#eee9dd}
  .rv-page .studio.recorder:has(.lens-loading:not([hidden]))>.studio-brand,
  .rv-page .studio.recorder:has(.lens-loading:not([hidden]))>.studio-intro{display:none}
}
.rv-page .studio.recorder .lens-loading{
  box-sizing:border-box;width:100%;max-width:none;min-height:100svh;padding:0;
  display:grid;grid-template-columns:clamp(210px,22vw,330px) minmax(0,1fr);
  background:#eee9dd;color:#080808
}
.rv-page .studio.recorder .lens-loading[hidden]{display:none!important}
.lens-loading-rail{box-sizing:border-box;min-height:100svh;padding:34px 30px 30px;display:flex;flex-direction:column;background:#080808;color:#eee9dd}
.lens-loading-rail>img{width:50px;height:54px;object-fit:contain;object-position:left top}
.lens-loading-rail>div{margin:auto 0;display:grid;gap:16px}
.lens-loading-rail span{color:#ed231d;font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.lens-loading-rail strong{max-width:9ch;font:500 clamp(31px,3vw,46px)/.93 "Roboto Condensed",sans-serif;text-transform:uppercase}
.lens-loading-rail p{max-width:28ch;margin:0;color:#eee9dd9c;font-size:12px;line-height:1.55}
.lens-loading-rail>small{color:#eee9dd80;font-size:8px;line-height:1.7;letter-spacing:.16em}
.lens-loading-main{box-sizing:border-box;min-width:0;min-height:100svh;padding:clamp(36px,5vw,72px) clamp(34px,7vw,112px) 40px;display:grid;grid-template-rows:auto 1fr auto}
.lens-loading-steps{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:14px;align-items:center;color:#706c65;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.lens-loading-steps i{height:1px;background:#08080832;overflow:hidden}
.lens-loading-steps i:first-of-type::after{content:"";display:block;width:36%;height:1px;background:#ed231d;animation:lens-route 1.8s ease-in-out infinite}
.lens-loading-steps strong{color:#ed231d}
.lens-loading-copy{align-self:center;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(280px,.7fr);column-gap:clamp(34px,7vw,100px);align-items:end}
.rv-page .studio.recorder .lens-loading-copy .section-label{grid-column:1;margin:0 0 15px;color:#656159;font-size:9px;letter-spacing:.19em}
.rv-page .studio.recorder .lens-loading-copy h2{grid-column:1;margin:0;font:600 clamp(58px,7vw,108px)/.84 "Roboto Condensed",sans-serif;letter-spacing:-.055em;text-transform:uppercase}
.rv-page .studio.recorder .lens-loading-copy>p:last-child{grid-column:2;margin:0 0 7px;max-width:39ch;color:#4f4c46;font-size:15px;line-height:1.6}
.lens-processing{align-self:center;margin-top:clamp(-50px,-4vw,-20px);display:grid;grid-template-columns:minmax(210px,.72fr) minmax(300px,1fr);gap:clamp(38px,6vw,90px);align-items:center}
.lens-processing-mark{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid #08080820;border-radius:50%}
.lens-processing-mark::before,.lens-processing-mark::after{content:"";position:absolute;border:1px solid #08080818;border-radius:50%}
.lens-processing-mark::before{inset:13%}.lens-processing-mark::after{inset:28%}
.lens-processing-mark img{position:relative;z-index:2;width:32%;height:34%;object-fit:contain;filter:invert(1)}
.lens-processing-mark i{position:absolute;z-index:3;width:10px;height:10px;border-radius:50%;background:#ed231d;box-shadow:0 0 0 7px #ed231d16}
.lens-processing-mark i:nth-of-type(1){top:11%;left:48%;animation:lens-dot 2.2s ease-in-out infinite}
.lens-processing-mark i:nth-of-type(2){right:15%;bottom:24%;animation:lens-dot 2.2s .5s ease-in-out infinite}
.lens-processing-mark i:nth-of-type(3){left:17%;bottom:22%;animation:lens-dot 2.2s 1s ease-in-out infinite}
.lens-processing ol{margin:0;padding:0;list-style:none;border-top:1px solid #08080825}
.lens-processing li{position:relative;padding:17px 0 17px 28px;border-bottom:1px solid #08080825;display:grid;gap:5px;color:#89857d}
.lens-processing li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;border:1px solid currentColor;border-radius:50%}
.lens-processing li span{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.lens-processing li small{font-size:11px;line-height:1.4}
.lens-processing li.is-complete{color:#4f4c46}.lens-processing li.is-complete::before{border-color:#080808;background:#080808}
.lens-processing li.is-active{color:#080808}.lens-processing li.is-active::before{border-color:#ed231d;background:#ed231d;box-shadow:0 0 0 6px #ed231d12;animation:concept-pulse 1.6s ease-in-out infinite}
.lens-loading-main>footer{padding-top:18px;border-top:1px solid #08080825;display:flex;justify-content:space-between;gap:20px;color:#6b675f;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
@keyframes lens-route{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
@keyframes lens-dot{50%{transform:scale(.55);opacity:.45}}
@media(max-width:900px){
  .rv-page .studio.recorder:has(.lens-loading:not([hidden])){padding:0}
  .rv-page .studio.recorder:has(.lens-loading:not([hidden]))>.studio-brand,
  .rv-page .studio.recorder:has(.lens-loading:not([hidden]))>.studio-intro{display:none}
  .rv-page .studio.recorder .lens-loading{display:block;min-height:100svh}
  .lens-loading-rail{min-height:0;padding:18px 58px 18px 20px;display:flex;flex-direction:row;align-items:center;gap:14px}
  .lens-loading-rail>img{width:34px;height:38px}.lens-loading-rail>div{margin:0}.lens-loading-rail span,.lens-loading-rail p,.lens-loading-rail>small{display:none}
  .lens-loading-rail strong{max-width:none;font-size:15px;line-height:1}
  .lens-loading-main{min-height:calc(100svh - 74px);padding:34px 20px 30px;display:flex;flex-direction:column;gap:40px}
  .lens-loading-copy{display:block}.rv-page .studio.recorder .lens-loading-copy h2{font-size:clamp(52px,17vw,76px)}
  .rv-page .studio.recorder .lens-loading-copy>p:last-child{margin-top:24px;font-size:14px}
  .lens-processing{margin:0;grid-template-columns:minmax(120px,.65fr) 1fr;gap:24px}
  .lens-loading-main>footer{margin-top:auto;display:grid}
}
@media(max-width:520px){
  .lens-loading-steps{gap:8px;font-size:7px}
  .lens-processing{grid-template-columns:1fr}.lens-processing-mark{width:min(58vw,220px);margin:auto}
}
@media(prefers-reduced-motion:reduce){.lens-processing-mark i,.lens-loading-steps i::after{animation:none}}

/* The dialog owns its scroll visually; native scrolling still works by wheel,
   keyboard and touch without adding a bright browser-coloured rail. */
.rv-page .studio.recorder:not([hidden]){scrollbar-width:none!important;scrollbar-color:auto!important;scrollbar-gutter:auto!important}
.rv-page .studio.recorder:not([hidden])::-webkit-scrollbar{width:0!important;height:0!important;background:transparent!important}
.rv-page .studio.recorder[hidden]{display:none!important}

/* A3-style maximum print field on the oversized tee. The artwork stays
   contained inside the torso while using the available chest area. */
.observation-broadcast .tee-stage>#concept-artwork{top:48%;width:44%;height:54%;object-fit:contain}
@media(max-width:760px){.observation-broadcast .tee-stage>#concept-artwork{width:46%;height:55%}}