/* פריסת ההדגמות (שולם 29.10): "כותרת ההמחשה לא נמצאת ביחד עם כפתורי הפעולה".
   נטען אחרי demos.css. קובץ נפרד כדי לא להתנגש בעבודה על demos.css ועל ההדגמות.
   נשען רק על המבנה של shell() ב-core.js: .kd-title, .kd-lead, .kd-stage, .kd-sayrow, .kd-controls, .kd-out, .kd-note */

/* נייד: נשאר אנכי, והכפתורים עולים להיות צמודים לציור. שורת ההסבר והתוצאה מתחתם */
.kb-demo.is-live{display:flex;flex-direction:column}
.kb-demo.is-live>*{order:2}
.kb-demo.is-live>.kd-title,.kb-demo.is-live>.kd-lead{order:0}
.kb-demo.is-live>.kd-stage{order:1}
.kb-demo.is-live>.kd-controls{order:1;margin-block-start:12px}
.kb-demo.is-live>.kd-note{order:3}

/* מחשב: לרוחב. בתחילת השורה (ימין) כותרת, הסבר, כפתורים ותוצאה; בצד השני הציור לכל הגובה.
   ההערה בתחתית, לרוחב כל הכרטיס, כדי שלא תאריך את הטור הצר.
   scale-zoom נשאר אנכי: הבמה שלו היא כבר שני טורים (בורר + לוח) ונשברת כשהיא צרה, והוא נכנס בגובה מסך גם בלי זה */
@media(min-width:900px){
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes]){display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,1.25fr);grid-template-rows:repeat(7,auto) 1fr auto;column-gap:26px;align-items:start}
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes])>*{grid-column:1;order:0;min-width:0}
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes])>.kd-stage{grid-column:2;grid-row:1/9;margin-block-start:0}
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes])>.kd-note{grid-column:1/-1;grid-row:9}
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes])>.kd-controls{margin-block-start:14px;gap:6px}
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes])>.kd-controls .kd-btn{flex:1 1 auto;padding-inline:12px;font-size:14.5px}
  .kb-demo.is-live:not([data-demo=scale-zoom]):not([data-demo=safe-try-codes]) .kd-sayrow .kd-out.kd-say{font-size:16px;min-height:0}
  /* היסטוגרמה של שמונה קודים (כספת) בבמה הצרה: התוויות לא נוגעות זו בזו */
  .kb-demo.is-live .kd-stage .kd-rbars{gap:2px}
  .kb-demo.is-live .kd-stage .kd-rbars-8 .kd-rbar-n{font-size:10.5px;letter-spacing:-.02em}
}

/* שלוש הדגמות שהיו גבוהות ממסך (qa 29.10.26: chain-pull 871, two-paths-cancel 892, polarizer-match כ-790; הפנוי כ-711).
   two-paths-cancel: טבלת הספירה יוצאת מהבמה לטור הצד (ב-JS היא כבר אחרי שורת התוצאה).
   polarizer-match: הגרף והמקרא יוצאים מהבמה לטור הצד, מתחת לכפתורים.
   chain-pull: הבמה רחבה יותר, כדי שכל חוליה תתפרס על פחות שורות.
   בשלושתן ההערה יורדת לטור הצד במקום שורה נפרדת לרוחב הכרטיס */
.kb-demo.is-live>.kd-tpc-tab{margin-block-start:12px}
.kd-tpc-tab .kd-tab{margin-block-start:4px}
@media(min-width:900px){
  .kb-demo.kb-demo.is-live:is([data-demo=chain-pull],[data-demo=two-paths-cancel],[data-demo=polarizer-match])>.kd-stage{grid-row:1/-1}
  .kb-demo.kb-demo.is-live:is([data-demo=chain-pull],[data-demo=two-paths-cancel],[data-demo=polarizer-match])>.kd-note{grid-column:1;grid-row:auto;margin-block-start:12px}
  .kb-demo.kb-demo.is-live[data-demo=chain-pull]{grid-template-columns:minmax(210px,.85fr) minmax(0,1.6fr);column-gap:22px}
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-grid{gap:20px 12px}
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-link{gap:1px;padding:6px 11px 7px}
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-does{line-height:1.38}
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-count{margin-block-start:2px}
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-state{line-height:1.3}
  /* החוליה האחרונה ברוחב מלא: השם ו"איפה" באותה שורה */
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-link:last-child{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .kb-demo.is-live[data-demo=chain-pull] .kd-cp-link:last-child .kd-cp-does,.kb-demo.is-live[data-demo=chain-pull] .kd-cp-link:last-child .kd-cp-state{flex-basis:100%}
  .kb-demo.is-live[data-demo=chain-pull]>.kd-note{font-size:14px}
  .kb-demo.kb-demo.is-live[data-demo=two-paths-cancel]{grid-template-columns:minmax(250px,1.05fr) minmax(0,1fr)}
  .kb-demo.is-live[data-demo=two-paths-cancel] .kd-tpc-tab .kd-tab{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .kb-demo.is-live[data-demo=two-paths-cancel] .kd-tpc-tab .kd-tab-r{padding-block:6px;font-size:14.5px}
  .kb-demo.is-live[data-demo=two-paths-cancel] .kd-tpc-tab .kd-tab-r:nth-child(n+3){grid-column:1/-1}
  .kb-demo.kb-demo.is-live[data-demo=polarizer-match]{grid-template-columns:minmax(250px,1.1fr) minmax(0,1fr)}
  .kb-demo.is-live[data-demo=polarizer-match]>.kd-pol-g{grid-template-columns:1fr;gap:6px;margin-block-start:12px}
  .kb-demo.is-live[data-demo=polarizer-match]>.kd-pol-g .kd-pol-graph{max-width:300px}
  .kb-demo.is-live[data-demo=polarizer-match]>.kd-pol-g .kd-legend{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13.5px}
}