/* v56 immersive transmission composer */
.composer-shell{
  display:grid;
  gap:18px;
}
.composer-panel{
  position:relative;
  border:1px solid rgba(184,154,88,.36);
  background:
    radial-gradient(circle at 20% 0%, rgba(218,197,141,.08), transparent 34%),
    linear-gradient(180deg, rgba(7,14,15,.94), rgba(3,7,8,.98));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 22px 70px rgba(0,0,0,.34);
  padding:28px;
  overflow:hidden;
}
.composer-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(218,197,141,.06), transparent 18%, transparent 82%, rgba(218,197,141,.04)),
    repeating-linear-gradient(90deg, rgba(218,197,141,.025) 0 1px, transparent 1px 120px);
  opacity:.45;
}
.composer-panel > *{position:relative;z-index:1}
.composer-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}
.composer-kicker{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:12px;
  margin:0 0 8px;
}
.composer-title{
  margin:0;
  font-family:Cinzel,serif;
  color:var(--gold2);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(26px,3vw,40px);
  line-height:1.05;
}
.composer-subtitle{
  margin:10px 0 0;
  max-width:720px;
  color:var(--muted);
  letter-spacing:.04em;
}
.composer-preview-toggle{
  flex:0 0 auto;
  border:1px solid rgba(218,197,141,.48);
  background:rgba(4,10,12,.74);
  color:var(--gold2);
  min-height:38px;
  padding:0 16px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font:700 11px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
}
.composer-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(190px,260px);
  gap:16px;
}
.composer-field{
  display:grid;
  gap:8px;
}
.composer-field label,
.composer-label{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:700;
}
.composer-input,
.composer-select,
.composer-editor{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(184,154,88,.32);
  background:rgba(1,5,6,.84);
  color:var(--text);
  outline:none;
  box-shadow:inset 0 0 22px rgba(0,0,0,.38);
}
.composer-input,
.composer-select{
  min-height:46px;
  padding:0 14px;
}
.composer-input:focus,
.composer-select:focus,
.composer-editor:focus{
  border-color:rgba(218,197,141,.72);
  box-shadow:0 0 0 1px rgba(218,197,141,.22), inset 0 0 24px rgba(0,0,0,.42);
}
.composer-title-count{
  justify-self:end;
  color:#756545;
  font-size:11px;
  letter-spacing:.12em;
}
.composer-editor-wrap{
  margin-top:18px;
  border:1px solid rgba(184,154,88,.24);
  background:rgba(2,7,8,.72);
}
.composer-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:10px;
  border-bottom:1px solid rgba(184,154,88,.18);
  background:linear-gradient(180deg,rgba(218,197,141,.055),rgba(0,0,0,.08));
}
.composer-tool{
  min-width:34px;
  min-height:30px;
  border:1px solid rgba(184,154,88,.32);
  background:rgba(4,10,12,.78);
  color:var(--gold2);
  cursor:pointer;
  font:700 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.08em;
}
.composer-tool:hover,
.composer-preview-toggle:hover,
.composer-action:hover{
  border-color:var(--gold2);
  color:#fff3c8;
  box-shadow:0 0 18px rgba(218,197,141,.11);
}
.composer-editor{
  display:block;
  min-height:320px;
  resize:vertical;
  padding:18px;
  line-height:1.72;
  border:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.35)),
    rgba(1,5,6,.72);
}
.composer-preview{
  min-height:320px;
  padding:18px;
  line-height:1.72;
  color:var(--text);
  background:rgba(1,5,6,.72);
}
.composer-preview blockquote,
.composer-preview .preview-quote{
  border-left:3px solid var(--gold);
  background:rgba(218,197,141,.08);
  margin:12px 0;
  padding:12px 14px;
  color:#e7ddbd;
}
.composer-preview pre,
.composer-preview code{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(184,154,88,.18);
  color:#d8d0b2;
}
.composer-preview pre{
  padding:12px;
  overflow:auto;
}
.composer-insert-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.composer-insert{
  border:1px solid rgba(184,154,88,.28);
  background:rgba(4,10,12,.7);
  color:var(--muted);
  padding:14px 10px;
  min-height:68px;
  display:grid;
  place-items:center;
  text-align:center;
  gap:4px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}
.composer-insert b{
  display:block;
  color:var(--gold2);
  font-size:18px;
  line-height:1;
}
.composer-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.composer-option{
  border:1px solid rgba(184,154,88,.2);
  background:rgba(218,197,141,.035);
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
}
.composer-option input{accent-color:#d9c37a}
.composer-guidelines{
  border:1px solid rgba(184,154,88,.26);
  background:linear-gradient(180deg,rgba(7,12,11,.86),rgba(3,7,8,.96));
  padding:18px;
}
.composer-guidelines h3{
  margin:0 0 12px;
  font-family:Cinzel,serif;
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:16px;
}
.composer-guidelines ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.7;
}
.composer-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:22px;
  border-top:1px solid rgba(184,154,88,.18);
  padding-top:18px;
}
.composer-draft-state{
  color:#756545;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
}
.composer-action-set{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.composer-action{
  min-height:42px;
  border:1px solid rgba(218,197,141,.48);
  background:rgba(4,10,12,.72);
  color:var(--gold2);
  padding:0 18px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font:700 11px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  text-decoration:none;
  display:inline-grid;
  place-items:center;
}
.composer-action.primary{
  background:linear-gradient(180deg,rgba(218,197,141,.95),rgba(139,108,45,.94));
  color:#060809;
  border-color:#e7d796;
  box-shadow:0 0 28px rgba(218,197,141,.13);
}
.composer-context{
  border-left:3px solid var(--gold);
  background:rgba(218,197,141,.075);
  color:#e7ddbd;
  padding:12px 14px;
  margin:0 0 14px;
}
.composer-hidden{display:none!important}
@media(max-width:900px){
  .composer-head,
  .composer-actions{align-items:stretch;flex-direction:column}
  .composer-grid{grid-template-columns:1fr}
  .composer-insert-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .composer-options{grid-template-columns:1fr}
  .composer-preview-toggle,.composer-action{width:100%}
}


/* v60 composer image previews */
.composer-preview .tm-image-embed{
  margin:16px 0;
  padding:10px;
  border:1px solid rgba(184,154,88,.26);
  background:rgba(1,5,6,.58);
  max-width:100%;
}
.composer-preview .tm-image-embed img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:520px;
  height:auto;
  margin:0 auto;
  border:1px solid rgba(218,197,141,.18);
  object-fit:contain;
}
.composer-preview .tm-image-embed figcaption{
  margin-top:8px;
  color:rgba(218,197,141,.66);
  text-align:center;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.composer-preview .tm-invalid-embed{
  display:inline-block;
  border:1px solid rgba(184,154,88,.26);
  background:rgba(218,197,141,.06);
  color:var(--gold2);
  padding:2px 8px;
}


/* v61 composer image container-fit fallback */
.composer-preview .tm-image-embed{
  box-sizing:border-box;
  width:min(100%, 720px);
  margin:18px auto;
  overflow:hidden;
}
.composer-preview .tm-image-embed-frame,
.composer-preview .tm-image-embed-link{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.composer-preview .tm-image-embed img{
  width:auto!important;
  max-width:100%!important;
  max-height:360px!important;
  height:auto!important;
  object-fit:contain;
}