/* demo.css — רכיבי הממשק המשותפים לכל ניסויי הקורס (מעל course.css, השפה הגרפית של דף הנחיתה).
   כל דף ניסוי משתמש רק ברכיבים האלה, כדי שהמראה והמשוב יהיו זהים לאורך הקורס: לוח ציור, העלאת תמונה
   וחיתוך, גלריית דוגמאות, תצוגת תמונה, פסי ערכים, מד עם סף, ותוויות החלטה. */
.wrap{max-width:1120px;margin:0 auto;padding:8px 22px 70px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:10px}
@media(max-width:900px){.demo-grid{grid-template-columns:1fr}}
.card h3{margin-top:0;color:var(--clay-dark)}
.card h4{margin:14px 0 6px;color:var(--clay-dark);font-size:.95rem}
.hint{color:var(--muted);font-size:.86rem;margin:4px 0 8px}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.kv span{background:rgba(201,130,95,.14);color:var(--clay-dark);font-weight:700;border-radius:999px;padding:5px 12px;font-size:.84rem}
.kv span.alt{background:rgba(108,140,87,.16);color:#2f5e3a}
.kv span.muted{background:rgba(118,93,75,.12);color:var(--muted);font-weight:600}
/* לוח ציור (ספרות) ותמונת הקלט */
.pad{display:block;width:280px;height:280px;max-width:100%;border-radius:18px;background:#111;border:1px solid rgba(157,90,66,.3);box-shadow:var(--shadow-soft);touch-action:none;cursor:crosshair}
.pad-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.btn.small{padding:7px 14px;font-size:.88rem}
/* העלאת תמונה וחיתוך */
.drop{border:2px dashed rgba(157,90,66,.45);border-radius:18px;padding:14px;text-align:center;color:var(--muted);background:rgba(255,255,255,.35);cursor:pointer;transition:.15s}
.drop.over{background:rgba(201,130,95,.12);border-color:var(--clay)}
.drop input{display:none}
.cropper{display:block;width:256px;height:256px;border-radius:18px;background:#111;border:1px solid rgba(157,90,66,.3);box-shadow:var(--shadow-soft);touch-action:none;cursor:grab}
.cropper.empty{background:repeating-linear-gradient(45deg,#2a2622 0 8px,#1b1816 8px 16px)}
.slider{width:256px;max-width:100%;accent-color:var(--clay);display:block;margin-top:8px}
/* תמונות */
.pic{display:block;width:128px;height:128px;border-radius:14px;background:#000;border:1px solid rgba(157,90,66,.25);box-shadow:var(--shadow-soft);image-rendering:auto}
.pic.small{width:96px;height:96px}
.pic.px{image-rendering:pixelated}
.pics{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin:8px 0}
.pics figure{margin:0;text-align:center}
.pics figcaption{color:var(--muted);font-size:.82rem;margin-top:6px}
/* גלריות */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px;margin-top:8px}
.gallery img,.gallery canvas{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:#000;cursor:pointer;border:2px solid transparent;transition:.12s;display:block}
.gallery img:hover,.gallery canvas:hover{transform:translateY(-2px)}
.gallery .sel{border-color:var(--clay)}
.gallery figure{margin:0}
.gallery figcaption{font-size:.62rem;color:var(--muted);text-align:center;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* פסי ערכים ומדים */
.bars{margin-top:6px}
.bars .b{display:grid;grid-template-columns:52px 1fr 70px;gap:8px;align-items:center;margin:4px 0;font-size:.82rem}
.bars .b.hl .lbl{color:var(--clay-dark);font-weight:700}
.bars .track{height:9px;border-radius:999px;background:rgba(201,130,95,.16);position:relative;overflow:hidden}
.bars .track>i{position:absolute;top:0;bottom:0;right:0;display:block;background:linear-gradient(270deg,var(--clay),var(--clay-dark))}
.bars .b.hl .track>i{background:linear-gradient(270deg,#6c8c57,#2f5e3a)}
.bars .num{direction:ltr;text-align:left;font-family:Consolas,monospace;color:var(--muted);font-size:.78rem}
.bars .lbl img{width:28px;height:28px;border-radius:6px;vertical-align:middle;margin-inline-start:4px}
.gauge{margin:8px 0}
.gauge .g-lbl{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted)}
.gauge .g-track{height:12px;border-radius:999px;background:rgba(201,130,95,.16);position:relative;overflow:visible;margin-top:4px}
.gauge .g-track>i{position:absolute;top:0;bottom:0;right:0;border-radius:999px;background:linear-gradient(270deg,var(--clay),var(--clay-dark))}
.gauge .g-track>b{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);opacity:.7}
.gauge .g-track>b::after{content:attr(data-l);position:absolute;top:-16px;right:-10px;font-size:.7rem;color:var(--muted);font-weight:400}
/* תווית ההחלטה */
.verdict{display:flex;align-items:center;gap:14px;border-radius:18px;padding:12px 16px;margin:10px 0;font-weight:700;font-size:1.05rem;background:rgba(118,93,75,.10);color:var(--muted)}
.verdict.ok{background:rgba(108,140,87,.18);color:#2f5e3a}
.verdict.unknown{background:rgba(216,162,70,.2);color:#7a5a12}
.verdict.noface{background:rgba(181,107,107,.18);color:#7d3b3b}
.verdict img{width:56px;height:56px;border-radius:12px;background:#000}
.verdict small{display:block;font-weight:400;font-size:.82rem;opacity:.85}
.seg{display:inline-flex;border-radius:999px;background:rgba(201,130,95,.14);padding:3px;gap:3px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font:inherit;font-size:.86rem;color:var(--clay-dark);cursor:pointer}
.seg button.on{background:var(--clay);color:#fff}
.actgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;width:220px}
.actgrid i{display:block;aspect-ratio:1;border-radius:4px;background:rgba(201,130,95,.15)}
.docs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.footer-note{color:var(--muted);font-size:.84rem;margin-top:30px}
/* ריבוע "מי זה מי" (16 מקומות): מסגרת בצבע המחלקה שהאלגוריתם קבע, מתחת מי זה באמת */
.square{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:540px;margin-top:10px}
.slot{margin:0;position:relative;border-radius:14px;background:rgba(118,93,75,.07);overflow:hidden}
.slot.empty{aspect-ratio:1/1.3;border:2px dashed rgba(157,90,66,.3);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.1rem}
.slot img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:4px solid var(--c,#999);border-radius:14px;background:#000;box-sizing:border-box}
.slot figcaption{padding:3px 4px 5px;text-align:center;line-height:1.15}
.slot figcaption b{display:block;color:var(--c,#555);font-size:.8rem}
.slot figcaption span{display:block;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .rm{position:absolute;top:6px;left:6px;border:0;border-radius:50%;width:22px;height:22px;background:rgba(0,0,0,.55);color:#fff;font-size:.9rem;cursor:pointer;line-height:22px;padding:0;opacity:0;transition:.12s}
.slot:hover .rm{opacity:1}
.slider-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin:8px 0}
.slider-row label{display:flex;flex-direction:column;font-size:.84rem;color:var(--muted);gap:2px}
.slider-row label b{color:var(--clay-dark)}
.slider-row .slider{margin-top:2px;width:200px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.82rem;color:var(--clay-dark)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--c);vertical-align:-1px;margin-inline-end:5px}
.gallery figure.celeb figcaption{color:var(--clay-dark)}
/* בחירת אנשים לקבוצה (chips) ורשת הקיבוץ */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:6px}
.chip{margin:0;cursor:pointer;text-align:center;opacity:.5;transition:.12s;border-radius:12px;padding:4px}
.chip:hover{opacity:.85}
.chip.sel{opacity:1;background:rgba(108,140,87,.16)}
.chip img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#000;border:3px solid transparent}
.chip.sel img{border-color:#2f5e3a}
.chip figcaption{font-size:.68rem;color:var(--clay-dark);margin-top:3px;line-height:1.15}
.chip figcaption small{display:block;color:var(--muted);font-size:.62rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:10px}
.slot.sel img{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c)}
/* (27.10.2026) phones: a grid column may shrink below its content, and a wide table scrolls sideways inside its card
   instead of widening the page (the LSI page was 495 px wide and the PageRank page 468 px on a 375 px phone) */
.demo-grid>*,.card{min-width:0}
.card table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
canvas{max-width:100%}