/* Steps-local Story Deck module. Not a Workspace/Route Template component. */

/* Il Deck è un pannello-utility: tipografia UI sans, NON il serif editoriale
   ereditato dalle regole globali su h1-h4 (che stonava nella UI del pannello). */
#route-steps .steps-story-deck,
#route-steps .steps-story-deck :is(h1, h2, h3, h4, h5, p, strong, span, button, input, textarea, label){
  font-family:var(--font-ui, var(--font-sans));
}

#route-steps .steps-story-deck-trigger{
  gap:6px;
}

#route-steps .steps-story-deck-panel{
  display:grid;
  grid-template-columns:minmax(220px, 320px) minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr);
  gap:12px;
  flex:0 0 clamp(320px, 42dvh, 430px);
  height:clamp(320px, 42dvh, 430px);
  max-height:clamp(320px, 42dvh, 430px);
  min-height:0;
  margin:0 0 12px;
  padding:12px;
  border:1px solid var(--border, var(--ms-color-border, #29405f));
  border-radius:12px;
  background:var(--surface-panel, var(--ms-color-surface-primary, #161d33));
  color:var(--text, var(--ms-color-text-primary, #eef2ff));
  overflow:hidden;
}

#route-steps .steps-story-deck-panel[hidden]{
  display:none !important;
}

#route-steps .steps-tools-panel .steps-story-deck-panel{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  height:100%;
  max-height:none;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:hidden;
}

#route-steps .steps-story-deck-sidebar,
#route-steps .steps-story-deck-detail{
  min-width:0;
  min-height:0;
}

#route-steps .steps-story-deck-sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

#route-steps .steps-tools-panel .steps-story-deck-sidebar{
  flex:0 1 auto;
  min-height:0;
  overflow:hidden;
}

#route-steps .steps-story-deck-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex:0 0 auto;
}

#route-steps .steps-story-deck-title{
  margin:0;
  font-size:.9rem;
  line-height:1.2;
  font-weight:600;
}

#route-steps .steps-story-deck-subtitle{
  margin:3px 0 0;
  color:var(--muted, var(--text-secondary, #b8c7df));
  font-size:.82rem;
}

#route-steps .steps-story-deck-counters{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  flex:0 0 auto;
}

#route-steps .steps-story-deck-counter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:30px;
  padding:5px 8px;
  border:1px solid var(--border, var(--ms-color-border, #29405f));
  border-radius:8px;
  color:var(--muted, var(--text-secondary, #b8c7df));
  font-size:.78rem;
}

#route-steps .steps-story-deck-counter strong{
  color:var(--text, var(--ms-color-text-primary, #eef2ff));
  font-size:.82rem;
}

#route-steps .steps-story-deck-filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  flex:0 0 auto;
}

#route-steps .steps-tools-panel .steps-story-deck-filters{
  grid-template-columns:1fr;
}

#route-steps .steps-tools-panel .steps-story-deck-list{
  flex:1 1 auto;
  min-height:82px;
  max-height:clamp(100px, 20dvh, 190px);
}

#route-steps .steps-story-deck-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding-right:2px;
  scrollbar-gutter:stable;
}

#route-steps .steps-story-deck-card{
  appearance:none;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:42px;
  padding:8px;
  border:1px solid var(--border, var(--ms-color-border, #29405f));
  border-radius:8px;
  background:transparent;
  color:var(--text, var(--ms-color-text-primary, #eef2ff));
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}

#route-steps .steps-story-deck-card:hover{
  background:var(--state-hover-bg, rgba(120, 164, 255, .1));
  border-color:var(--border-strong, var(--ms-color-border-strong, #3b5478));
}

#route-steps .steps-story-deck-card.is-active{
  background:var(--state-selected-bg, rgba(120, 164, 255, .16));
  border-color:var(--state-selected-border, var(--accent-3, #78a4ff));
}

#route-steps .steps-story-deck-card-main{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:3px;
}

#route-steps .steps-story-deck-card-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.88rem;
  font-weight:650;
}

#route-steps .steps-story-deck-card-meta{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted, var(--text-secondary, #b8c7df));
  font-size:.76rem;
}

#route-steps .steps-story-deck-status{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 7px;
  border:1px solid var(--border, var(--ms-color-border, #29405f));
  border-radius:999px;
  color:var(--muted, var(--text-secondary, #b8c7df));
  font-size:.72rem;
  font-weight:650;
  white-space:nowrap;
}

#route-steps .steps-story-deck-status[data-status="available"]{
  color:var(--text, #eef2ff);
}

#route-steps .steps-story-deck-status[data-status="in_use"]{
  border-color:var(--state-selected-border, #78a4ff);
  color:var(--text, #eef2ff);
}

#route-steps .steps-story-deck-status[data-status="discarded"],
#route-steps .steps-story-deck-status[data-status="archived"]{
  opacity:.72;
}

#route-steps .steps-story-deck-detail{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:2px 2px 2px 0;
  scrollbar-gutter:stable;
}

#route-steps .steps-tools-panel .steps-story-deck-detail{
  flex:1 1 0;
  min-height:132px;
  max-height:none;
  padding-top:10px;
  border-top:1px solid var(--border, var(--ms-color-border, #29405f));
}

#route-steps .steps-story-deck-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

#route-steps .steps-story-deck-detail-head h3{
  margin:0;
  font-size:.95rem;
  font-weight:600;
  line-height:1.25;
}

#route-steps .steps-story-deck-detail-head p,
#route-steps .steps-story-deck-detail-meta{
  margin:4px 0 0;
  color:var(--muted, var(--text-secondary, #b8c7df));
  font-size:.82rem;
}

#route-steps .steps-story-deck-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#route-steps .steps-story-deck-questions{
  display:grid;
  gap:6px;
}

#route-steps .steps-story-deck-questions p{
  margin:0;
  padding:8px 10px;
  border-left:2px solid var(--state-selected-border, var(--accent-3, #78a4ff));
  color:var(--text, #eef2ff);
  background:color-mix(in srgb, var(--state-hover-bg, rgba(120, 164, 255, .1)) 70%, transparent);
  border-radius:8px;
  font-size:.86rem;
}

#route-steps .steps-story-deck-notes-field{
  display:grid;
  gap:6px;
}

#route-steps .steps-story-deck-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#route-steps .steps-story-deck-empty{
  flex:0 0 auto;
  padding:10px;
  border:1px dashed var(--border, #29405f);
  border-radius:8px;
}

@media (max-width: 640px) and (min-width: 421px){
  #route-steps .steps-story-deck-panel{
    grid-template-columns:minmax(180px, 240px) minmax(0, 1fr);
  }
}

@media (max-width: 860px){
  #route-steps .steps-tools-panel .steps-tools-panel-body{
    overflow-y:auto;
  }

  #route-steps .steps-tools-panel .steps-story-deck-panel{
    flex:0 0 auto;
    height:auto;
    min-height:620px;
    overflow:visible;
  }

  #route-steps .steps-tools-panel .steps-story-deck-sidebar{
    flex:0 0 auto;
    overflow:hidden;
  }

  #route-steps .steps-tools-panel .steps-story-deck-list{
    flex:0 0 auto;
    min-height:120px;
    max-height:160px;
  }

  #route-steps .steps-tools-panel .steps-story-deck-detail{
    flex:0 0 auto;
    min-height:220px;
  }
}

@media (max-width: 420px){
  #route-steps .steps-story-deck-panel{
    grid-template-columns:1fr;
    grid-template-rows:minmax(300px, .95fr) minmax(0, 1fr);
    flex-basis:clamp(520px, 74dvh, 700px);
    height:clamp(520px, 74dvh, 700px);
    max-height:clamp(520px, 74dvh, 700px);
  }
}

@media (max-width: 420px){
  #route-steps .steps-story-deck-panel{
    flex-basis:clamp(520px, 78dvh, 720px);
    height:clamp(520px, 78dvh, 720px);
    max-height:clamp(520px, 78dvh, 720px);
  }

  #route-steps .steps-story-deck-filters{
    grid-template-columns:1fr;
  }
}