/* Prof Stream Endormie — shared UI extras
   Keep it minimal: only what theme.css doesn't cover.
*/

/* A "card" variant without shadow for nested blocks */
.card.flat{
  box-shadow: none;
}

/* Simple spacing utilities */
.stack{ display:grid; gap: 12px; }
.stack.sm{ gap: 8px; }

/* Checkbox row that stays readable */
.checkrow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.checkrow input[type="checkbox"]{ margin-top: 4px; }

/* Monospace textarea for generated code */
.textarea-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  min-height: 180px;
}

/* Small helper row */
.row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

/* Preview frame */
.preview-frame{
  border: 0;
  width: 100%;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Inline code blocks look consistent */
.codebox{
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow:auto;
}


/* Tool cards (homepage) */
.tool{ position: relative; }
.toolhead{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 10px;
}
.toolicon{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  font-size: 1.35rem;
  flex: 0 0 auto;
}
.features{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.features li{ margin: 6px 0; }

/* Pleasant interactions */
.card, .nav a, .btn{
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
.card:hover{
  transform: translateY(-2px);
}
.card:active{ transform: translateY(0); }
.btn:active{ transform: translateY(1px); }
.nav a:hover{ transform: translateY(-1px); }

/* Make long tool pages feel less dense */
.hero{ padding: 20px; }


/* Multi Twitch layout (3 vidéos + live dessous à gauche) */
.pse-multi-layout{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items:start;
}
.pse-multi-layout .block{ display:grid; gap: 12px; }
.pse-multi-layout iframe{
  width:100%;
  border:0;
  border-radius: var(--r-md);
  display:block;
}
@media (max-width: 980px){
  .pse-multi-layout{
    grid-template-columns: 1fr;
  }
}