/* Story editor layout refresh: compact controls, visible editor heading and visual timeline. */

/* Secondary admin tabs only use the width required by their labels. */
.cx-admin-subtabs{
  min-width:0;
  justify-content:flex-start;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.cx-admin-subtabs button,
.cx-admin-subtabs button:first-child,
.cx-admin-shell.cx-admin-has-module-tabs>.cx-admin-module-subtabs button{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  padding-inline:24px;
  white-space:nowrap;
}

/* Keep the absolutely-positioned story form below the tabs, inside its panel. */
#cxAdminStoryCharactersPanel{
  position:relative;
  isolation:isolate;
}
#cxAdminStoryCharactersPanel>.cx-admin-chapter-form{
  position:absolute;
  inset:0;
}
.cx-admin-chapter-form .cx-admin-editor-heading{
  min-height:58px;
  padding:8px 16px;
  display:flex!important;
}
.cx-admin-chapter-form .cx-admin-editor-heading>div:first-child{
  min-width:0;
  display:grid;
  gap:5px;
}
.cx-admin-chapter-form .cx-admin-editor-heading>div:first-child>span{
  overflow:hidden;
  color:#73cfe3;
  font-size:7px;
  letter-spacing:.14em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cx-admin-chapter-form .cx-admin-editor-heading h3{
  margin:0;
  overflow:hidden;
  font-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cx-admin-chapter-form .cx-admin-heading-actions{
  flex:0 0 auto;
  gap:7px;
}
.cx-admin-chapter-form .cx-admin-heading-save{
  height:36px;
  padding-inline:13px;
  font-size:7px;
}

/* Selected stories are text records: no duplicated cover artwork in edit mode. */
.cx-admin-chapter-list{
  min-height:68px;
}
.cx-admin-chapter-tab{
  flex:0 0 250px;
  width:250px;
  min-height:68px;
  height:auto;
  padding:10px 30px 10px 12px;
  display:block;
}
.cx-admin-chapter-tab-cover{
  display:none!important;
}
.cx-admin-chapter-tab-copy{
  min-width:0;
  padding:0;
  display:grid!important;
  gap:5px;
}
.cx-admin-chapter-tab-copy>small{
  margin:0;
  color:#65cfe4;
  font-size:6px;
  letter-spacing:.12em;
}
.cx-admin-chapter-tab-copy>strong{
  margin:0;
  display:block;
  overflow:hidden;
  font-size:10px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cx-admin-chapter-tab-copy>.cx-admin-chapter-mode{
  justify-self:start;
  margin:0;
}

/* Compact top work area. Nothing stretches simply because the viewport is wide. */
.cx-admin-chapter-form .cx-admin-editor-content{
  grid-template-columns:minmax(270px,330px) minmax(0,1fr);
  grid-template-areas:
    "library metadata"
    "notice notice"
    "heading heading"
    "timeline timeline"
    "dropzone dropzone"
    "pages pages"
    "status status";
  align-items:start;
  align-content:start;
  gap:10px 14px;
  padding:12px 16px 28px;
}
.cx-admin-chapter-library{grid-area:library}
.cx-admin-chapter-simple-notice{grid-area:notice}
.cx-admin-chapter-metadata{
  grid-area:metadata;
  justify-self:start;
  width:min(100%,1040px);
  min-height:0;
  padding:8px;
  grid-template-columns:minmax(250px,440px) 112px max-content max-content;
  grid-template-areas:
    "name mode visible delete"
    "actions access access access";
  align-items:end;
  gap:7px;
}
.cx-admin-chapter-metadata>label:first-child{grid-area:name}
.cx-admin-chapter-metadata>.cx-admin-chapter-interactive{
  grid-area:mode;
  display:grid;
  gap:5px;
  color:#789aa8;
  font:900 7px/1 Inter,sans-serif;
  letter-spacing:.11em;
}
.cx-admin-chapter-metadata>.cx-admin-chapter-interactive select{
  width:112px;
  height:36px;
  padding:0 8px;
  border:1px solid rgba(85,222,248,.22);
  color:#effcff;
  background:#051923;
  font:900 8px/1 Inter,sans-serif;
}
.cx-admin-chapter-metadata>.cx-admin-chapter-visible{grid-area:visible}
.cx-admin-chapter-metadata>button.danger{grid-area:delete}
.cx-admin-chapter-metadata>.cx-admin-chapter-toolbar-actions{
  grid-area:actions;
  justify-self:start;
  width:max-content;
  display:flex;
  gap:6px;
}
.cx-admin-chapter-metadata>#cxAdminChapterAccess{
  grid-area:access;
  justify-self:start;
  width:min(620px,100%);
  max-width:620px;
  margin:0;
}
.cx-admin-chapter-page-heading{grid-area:heading}
.cx-admin-story-timeline{grid-area:timeline}
.cx-admin-chapter-dropzone{grid-area:dropzone}
.cx-admin-chapter-pages{grid-area:pages}
.cx-admin-chapter-status{grid-area:status}

/* Full-width image timeline. Labels remain accessible, but not visually repeated. */
.cx-admin-story-timeline{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-height:86px;
  margin:0;
  padding:8px 12px 7px;
  display:flex;
  align-items:flex-end;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid rgba(85,222,248,.18);
  background:linear-gradient(90deg,rgba(4,24,34,.86),rgba(2,12,20,.7));
  scrollbar-width:thin;
}
.cx-admin-story-timeline button{
  font:inherit;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page{
  position:relative;
  flex:0 0 88px;
  width:88px;
  height:70px;
  padding:0 0 13px;
  display:block;
  border:0;
  color:#5c8290;
  background:transparent;
  cursor:pointer;
  grid-template-columns:none;
  gap:0;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page::before{display:none}
.cx-admin-story-timeline .cx-admin-story-timeline-page::after,
.cx-admin-story-timeline .cx-admin-story-timeline-narration::before,
.cx-admin-story-timeline .cx-admin-story-timeline-narration::after{
  position:absolute;
  z-index:-1;
  bottom:5px;
  height:1px;
  content:"";
  background:rgba(85,222,248,.28);
}
.cx-admin-story-timeline .cx-admin-story-timeline-page::after{left:50%;right:-5px}
.cx-admin-story-timeline .cx-admin-story-timeline-page img{
  width:84px;
  height:50px;
  display:block;
  box-sizing:border-box;
  object-fit:cover;
  border:1px solid rgba(85,222,248,.22);
  background:#01080d;
  filter:saturate(.72) brightness(.78);
  transition:border-color .16s,filter .16s,transform .16s;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page>i,
.cx-admin-story-timeline .cx-admin-story-timeline-narration>i{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:1px;
  width:9px;
  height:9px;
  box-sizing:border-box;
  border:2px solid #153f4d;
  border-radius:50%;
  background:#5c8290;
  transform:translateX(-50%);
  box-shadow:0 0 0 3px #03121a;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page:hover img,
.cx-admin-story-timeline .cx-admin-story-timeline-page:focus-visible img{
  border-color:#70e7fb;
  filter:saturate(1) brightness(1);
  transform:translateY(-2px);
}
.cx-admin-story-timeline .cx-admin-story-timeline-page:focus-visible,
.cx-admin-story-timeline .cx-admin-story-timeline-narration:focus-visible{outline:0}
.cx-admin-story-timeline .cx-admin-story-timeline-page.active{
  border:0;
  color:#67e6ff;
  background:transparent;
  box-shadow:none;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page.active img{
  border-color:#67e6ff;
  filter:saturate(1) brightness(1);
  box-shadow:0 0 14px rgba(85,222,248,.2);
}
.cx-admin-story-timeline .cx-admin-story-timeline-page.active>i{
  border-color:#aaf4ff;
  background:#40dfff;
  box-shadow:0 0 0 3px #03121a,0 0 12px #43e1ff;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration{
  position:relative;
  flex:0 0 28px;
  width:28px;
  height:28px;
  margin:0 2px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
  grid-template-columns:none;
  gap:0;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration::before{left:-7px;right:50%}
.cx-admin-story-timeline .cx-admin-story-timeline-narration::after{left:50%;right:-7px}
.cx-admin-story-timeline .cx-admin-story-timeline-narration>i{
  bottom:1px;
  width:11px;
  height:11px;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.is-complete>i{
  border-color:#6ff1c5;
  background:#29d69f;
  box-shadow:0 0 0 3px #03121a,0 0 10px rgba(41,214,159,.55);
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.is-missing>i{
  border-color:#ff8aa2;
  background:#e83e62;
  box-shadow:0 0 0 3px #03121a,0 0 9px rgba(232,62,98,.45);
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.active{
  border:0;
  color:inherit;
  background:transparent;
  box-shadow:none;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.active>i{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* The cover editor contains text only; its image already appears in the timeline. */
.cx-admin-story-cover.without-cover-preview{
  width:min(100%,1040px);
  display:block;
  border-color:rgba(255,109,166,.3);
}
.cx-admin-story-cover.without-cover-preview>.cx-admin-story-cover-right{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,42%);
  grid-template-areas:"marker marker" "fields narration";
  align-items:start;
}
.cx-admin-story-cover.without-cover-preview .cx-admin-story-sequence-marker{grid-area:marker}
.cx-admin-story-cover.without-cover-preview .cx-admin-story-cover-fields{
  grid-area:fields;
  grid-template-columns:1fr 1fr;
}
.cx-admin-story-cover.without-cover-preview .cx-admin-story-transition{
  grid-area:narration;
  align-self:stretch;
  margin:10px 10px 10px 0;
}

@media(max-width:1180px){
  .cx-admin-chapter-form .cx-admin-editor-content{
    grid-template-columns:1fr;
    grid-template-areas:
      "library"
      "metadata"
      "notice"
      "heading"
      "timeline"
      "dropzone"
      "pages"
      "status";
  }
  .cx-admin-chapter-metadata{width:min(100%,1040px)}
}

@media(max-width:760px){
  .cx-admin-subtabs button{flex:0 0 auto;min-width:0;padding-inline:14px}
  .cx-admin-chapter-form .cx-admin-editor-heading{align-items:flex-start;flex-wrap:wrap}
  .cx-admin-chapter-form .cx-admin-heading-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .cx-admin-chapter-metadata{
    grid-template-columns:minmax(0,1fr) 112px;
    grid-template-areas:
      "name name"
      "mode visible"
      "actions actions"
      "access access"
      "delete delete";
  }
  .cx-admin-chapter-metadata>.cx-admin-chapter-toolbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cx-admin-story-cover.without-cover-preview>.cx-admin-story-cover-right{
    grid-template-columns:1fr;
    grid-template-areas:"marker" "fields" "narration";
  }
  .cx-admin-story-cover.without-cover-preview .cx-admin-story-cover-fields{grid-template-columns:1fr}
  .cx-admin-story-cover.without-cover-preview .cx-admin-story-transition{margin:0 10px 10px}
}