/* ============================================================================
   שיטות מתמטיות בבינה מלאכותית — Course Graphic Language (shared stylesheet)
   "Clay" design system, extracted from the v22 narrative landing page.
   Used by: index.html (course hub), syllabus.html, and every project result page.
   Load with:  <link rel="stylesheet" href="/assets/course.css">  (adjust depth)
   ========================================================================== */

/* Alef (SIL OFL), the face of the lesson documents, served from the site itself (code/package.py writes the woff
   files). Until 27.10.2026 this line asked Google Fonts for "Aleph", a family that does not exist, so every page
   fell back to the system font. */
@font-face{font-family:"Alef";src:url("fonts/alef-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alef";src:url("fonts/alef-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --bg:#fff7ea; --bg2:#f2dec7; --paper:rgba(255,250,241,.90); --paper-solid:#fffaf1;
  /* ink */
  --ink:#2b2018; --muted:#765d4b;
  /* clay (primary) */
  --clay:#c9825f; --clay-dark:#9d5a42; --clay-light:#e9b28d;
  /* accents — one hue per role */
  --teal:#1d7270; --blue:#315f85; --gold:#d8a246; --green:#6c8c57; --rose:#b56b6b;
  /* depth */
  --shadow:0 24px 70px rgba(83,48,30,.16); --shadow-soft:0 12px 35px rgba(83,48,30,.12);
  --inset:inset 4px 4px 10px rgba(255,255,255,.35), inset -5px -5px 14px rgba(92,48,31,.10);
  /* geometry */
  --radius:30px; --max:1180px;
  /* asset (relative to /assets/course.css) */
  --fingerprint-tile:url("images/fingerprint_tile.webp");
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Alef",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink); overflow-x:hidden;
  background:
    radial-gradient(circle at 88% 4%,rgba(233,178,141,.52),transparent 34rem),
    radial-gradient(circle at 6% 18%,rgba(29,114,112,.11),transparent 28rem),
    linear-gradient(180deg,var(--bg) 0%,#f8ead8 48%,#fff7ea 100%);
}
body::before{ /* faint clay cross-hatch */
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; z-index:-1;
  background-image:
    linear-gradient(45deg,rgba(157,90,66,.07) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(157,90,66,.05) 25%,transparent 25%);
  background-size:34px 34px;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{letter-spacing:-.025em}
code{direction:ltr;unicode-bidi:embed}

/* ---------- scroll progress ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:5px;z-index:1000;transform-origin:right center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--teal),var(--clay),var(--gold))}

/* ---------- top bar + brand ---------- */
.topbar{position:sticky;top:0;z-index:999;backdrop-filter:blur(18px);
  background:rgba(255,247,234,.82);border-bottom:1px solid rgba(157,90,66,.14)}
.topbar-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap}
.brand-mark{width:38px;height:38px;flex:0 0 38px;background:url("images/clay/brand-96.png") center/contain no-repeat;
  filter:drop-shadow(0 6px 10px rgba(83,48,30,.18))}  /* the clay mark (גרפיקה/clay/brand.py) */
.nav{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:10px 12px;border-radius:999px;color:var(--muted);font-size:.93rem;white-space:nowrap;transition:.18s ease}
.nav a:hover,.nav a.active{background:rgba(201,130,95,.16);color:var(--ink)}

/* ---------- layout shells ---------- */
.hero,.section{max-width:var(--max);margin:0 auto;padding:56px 22px}
.section-head{margin:0 0 8px}
.section-sub{color:var(--muted);line-height:1.7;max-width:70ch;margin:0 0 8px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:46px;align-items:center;padding-top:68px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid rgba(201,130,95,.25);border-radius:999px;
  background:rgba(255,250,241,.65);color:var(--clay-dark);font-weight:700}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(29,114,112,.10)}
h1{font-size:clamp(2.35rem,6vw,5rem);line-height:.98;margin:20px 0 18px;letter-spacing:-.045em}
.lead{font-size:clamp(1.07rem,2vw,1.32rem);line-height:1.75;color:var(--muted);max-width:62ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-visual{position:relative}
.hero-card{border-radius:36px;padding:16px;transform:rotate(-1.5deg);
  background:linear-gradient(145deg,rgba(255,250,241,.88),rgba(244,220,197,.72));
  box-shadow:var(--shadow);border:1px solid rgba(157,90,66,.16)}
.hero-card img{border-radius:26px;box-shadow:inset 0 0 0 1px rgba(157,90,66,.18)}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:999px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-soft);transition:.18s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--clay),var(--clay-dark));color:#fffaf1}
.btn.secondary{background:rgba(255,250,241,.75);border:1px solid rgba(157,90,66,.18);color:var(--ink)}

/* ---------- generic cards ---------- */
.card{background:var(--paper);border:1px solid rgba(157,90,66,.15);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-soft)}
.card h3{margin:.1rem 0 .5rem;font-size:1.18rem}
.card p{margin:0;color:var(--muted);line-height:1.65}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* ---------- the representation→…→verification timeline ---------- */
.map-wrap{background:rgba(255,250,241,.5);border:1px solid rgba(157,90,66,.12);border-radius:34px;padding:18px;box-shadow:var(--shadow-soft)}
.timeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(82px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px}
.timeline-step{min-height:106px;border-radius:22px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s ease;
  background:linear-gradient(145deg,rgba(255,250,241,.88),rgba(244,220,197,.76));
  border:1px solid rgba(157,90,66,.15);
  box-shadow:inset 4px 4px 10px rgba(255,255,255,.35),inset -5px -5px 14px rgba(92,48,31,.08)}
.timeline-step:hover{transform:translateY(-3px)}
.timeline-step b{font-size:1.25rem;color:var(--clay-dark)}
.timeline-step span{font-size:.9rem;color:var(--muted);line-height:1.25}

/* ---------- unit cards ---------- */
.unit-list{display:grid;gap:28px;padding-top:20px}
.unit-card{position:relative;display:grid;grid-template-columns:minmax(220px,.40fr) minmax(0,1fr);gap:24px;overflow:hidden;scroll-margin-top:96px;
  background:rgba(255,250,241,.84);border:1px solid rgba(157,90,66,.16);border-radius:40px;padding:18px;box-shadow:var(--shadow)}
.unit-card::before{content:"";position:absolute;inset:auto -60px -120px auto;width:300px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,130,95,.12),transparent 65%)}
.unit-visual{position:sticky;top:95px;align-self:start}
.tile-frame{position:relative;border-radius:30px;padding:12px;
  background:linear-gradient(145deg,rgba(255,248,238,.9),rgba(233,178,141,.32));
  border:1px solid rgba(157,90,66,.14);box-shadow:var(--shadow-soft)}
.tile-frame img{width:100%;border-radius:22px;filter:drop-shadow(0 18px 22px rgba(66,40,24,.14))}
.unit-badge{position:absolute;top:18px;right:18px;min-width:56px;height:56px;padding:0 10px;display:grid;place-items:center;
  border-radius:18px;font-weight:800;font-size:1.05rem;color:#fff9ef;z-index:3;border:1px solid rgba(255,250,241,.30);
  background:linear-gradient(145deg,var(--clay),var(--clay-dark));
  box-shadow:inset 4px 4px 8px rgba(255,255,255,.22),inset -5px -5px 12px rgba(72,35,20,.20),0 14px 25px rgba(110,61,38,.24)}
.unit-content{padding:14px 8px 16px 4px;min-width:0}
.unit-kicker{display:flex;align-items:center;gap:10px;color:var(--clay-dark);font-weight:700;letter-spacing:.02em}
.unit-kicker span{font-size:.82rem;color:var(--teal);background:rgba(29,114,112,.10);border-radius:999px;padding:4px 9px}
.unit-content h2{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05;margin:10px 0}
.tagline{font-size:1.08rem;line-height:1.65;color:var(--muted);margin:0 0 18px}
.unit-core{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.unit-core div,.shared-note,.formula-strip{background:rgba(255,247,234,.74);border:1px solid rgba(157,90,66,.13);border-radius:22px;padding:16px}
.unit-core h3,.shared-note h3{font-size:.95rem;margin:0 0 7px;color:var(--clay-dark)}
.unit-core p,.shared-note p{margin:0;color:var(--muted);line-height:1.62}

/* ---------- formula pills + keyword chips ---------- */
.formula-strip{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;background:rgba(29,114,112,.07)}
.formula-strip code{background:#fffaf1;border:1px solid rgba(29,114,112,.16);border-radius:999px;padding:8px 11px;color:#244b49}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}
.chip-row span{border-radius:999px;background:rgba(201,130,95,.12);border:1px solid rgba(201,130,95,.18);padding:7px 10px;font-size:.9rem;color:var(--muted)}

/* ---------- fingerprint cards ---------- */
.examples-panel{display:grid;gap:16px;margin-top:16px}
.examples-title{display:flex;gap:12px;align-items:center;margin-top:10px}
.fp-stamp{width:48px;height:48px;flex:0 0 48px;border-radius:16px;background-image:var(--fingerprint-tile);background-size:cover;background-position:center;
  box-shadow:var(--shadow-soft);border:1px solid rgba(157,90,66,.18)}
.examples-title h3{margin:0;font-size:1.25rem}.examples-title p{margin:2px 0 0;color:var(--muted)}
.example-block{position:relative;border-radius:28px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,250,241,.94),rgba(251,240,227,.86));
  border:1px solid rgba(157,90,66,.17);box-shadow:var(--shadow-soft)}
.example-block::before{content:"";position:absolute;left:18px;top:18px;width:90px;height:130px;border-radius:18px;opacity:.10;pointer-events:none;
  background-image:var(--fingerprint-tile);background-size:cover;background-position:center}
.fingerprint-card{position:relative;padding:18px 18px 14px;z-index:1}
.fingerprint-card h4{margin:0 0 12px;font-size:1.24rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.fingerprint-card h4::before{content:"";width:28px;height:28px;flex:0 0 28px;border-radius:9px;background-image:var(--fingerprint-tile);background-size:cover;background-position:center;box-shadow:0 4px 10px rgba(83,48,30,.12)}
.fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fp-item{padding:10px 12px;border-radius:16px;background:rgba(255,247,234,.78);border:1px solid rgba(157,90,66,.10)}
.fp-item b{display:block;color:var(--clay-dark);font-size:.83rem;margin-bottom:3px}
.fp-item span{display:block;color:var(--muted);line-height:1.55;font-size:.98rem}

/* ---------- collapsible "class demo" ---------- */
details{border:0}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;color:var(--teal);padding:14px 18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"–";width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(29,114,112,.10);font-size:1.2rem}
details:not([open]) summary::after{content:"+"}
.example-explain{border-top:1px solid rgba(157,90,66,.13);background:rgba(255,247,234,.62);padding:0 18px 18px}
.example-explain p{margin:0;color:var(--muted);line-height:1.7}

/* ---------- side rail (unit legend) ---------- */
.side-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:450;width:184px;max-height:calc(100vh - 150px);overflow:auto;padding:10px;
  border-radius:26px;background:rgba(255,250,241,.78);backdrop-filter:blur(16px);border:1px solid rgba(157,90,66,.16);box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;gap:6px}
.side-rail::-webkit-scrollbar{width:0;height:0}
.side-rail-title{font-size:.78rem;font-weight:800;color:var(--clay-dark);padding:4px 8px 8px;text-align:right}
.side-rail a{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:8px;padding:6px;border-radius:16px;color:var(--muted);border:1px solid transparent;transition:.18s ease}
.side-rail a strong{height:34px;min-width:34px;padding:0 4px;display:grid;place-items:center;border-radius:12px;color:var(--clay-dark);font-size:.82rem;
  background:linear-gradient(145deg,rgba(255,250,241,.95),rgba(233,178,141,.30));box-shadow:inset 2px 2px 6px rgba(255,255,255,.45),inset -3px -3px 8px rgba(92,48,31,.08)}
.side-rail a span{font-size:.84rem;line-height:1.2}
.side-rail a:hover,.side-rail a.active{background:rgba(201,130,95,.14);border-color:rgba(201,130,95,.22);transform:translateX(3px);color:var(--ink)}
.side-rail a.active strong{background:linear-gradient(145deg,var(--clay),var(--clay-dark));color:#fff8ee}

/* ============================================================================
   ADDITIONS for the management hub + project result pages
   ========================================================================== */

/* status pills — project / paper readiness */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:.82rem;font-weight:700;border:1px solid transparent}
.pill::before{content:"";width:8px;height:8px;border-radius:50%}
.pill.ready{color:#2f5e3a;background:rgba(108,140,87,.16);border-color:rgba(108,140,87,.30)} .pill.ready::before{background:var(--green)}
.pill.wip{color:#8a5a18;background:rgba(216,162,70,.16);border-color:rgba(216,162,70,.32)} .pill.wip::before{background:var(--gold)}
.pill.planned{color:#7a4a37;background:rgba(201,130,95,.14);border-color:rgba(201,130,95,.26)} .pill.planned::before{background:var(--clay)}
.pill.paper{color:#2a4a63;background:rgba(49,95,133,.13);border-color:rgba(49,95,133,.26)} .pill.paper::before{background:var(--blue)}

/* hub: a card per course example linking out to its assets */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.hub-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid rgba(157,90,66,.16);border-radius:26px;padding:18px;box-shadow:var(--shadow-soft);transition:.18s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-card .num{font-weight:800;color:var(--clay-dark)}
.hub-card h3{margin:0;font-size:1.12rem;line-height:1.25}
.hub-card .desc{margin:0;color:var(--muted);line-height:1.55;font-size:.96rem;flex:1}
.hub-card .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hub-card .links a{font-size:.85rem;font-weight:700;color:var(--teal);border:1px solid rgba(29,114,112,.22);border-radius:999px;padding:5px 10px;transition:.18s ease}
.hub-card .links a:hover{background:rgba(29,114,112,.10)}
.hub-card .links a.disabled{color:var(--muted);border-color:rgba(157,90,66,.16);opacity:.6;pointer-events:none}
.hub-card .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* breadcrumb / back link for inner pages */
.crumb{max-width:var(--max);margin:0 auto;padding:18px 22px 0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem}
.crumb a{color:var(--teal);font-weight:700}
.backlink{display:inline-flex;align-items:center;gap:6px}

/* result page: a "metric" readout strip (accuracy, baseline, loss…) */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.metric{background:var(--paper);border:1px solid rgba(157,90,66,.15);border-radius:20px;padding:16px;box-shadow:var(--inset)}
.metric b{display:block;font-size:1.8rem;color:var(--clay-dark);line-height:1.1}
.metric span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}

/* prose blocks (syllabus body) */
.prose{max-width:80ch;line-height:1.8;color:var(--ink)}
.prose p{color:var(--muted)}
.prose .arrow{color:var(--clay-dark);font-weight:700;letter-spacing:.04em}
.callout{border-radius:22px;padding:16px 18px;margin:16px 0;background:rgba(29,114,112,.07);border:1px solid rgba(29,114,112,.16)}
.callout.warn{background:rgba(181,107,107,.09);border-color:rgba(181,107,107,.22)}
.callout h4{margin:0 0 6px;color:var(--clay-dark)}
.callout p{margin:0;color:var(--muted);line-height:1.65}

/* ---------- clay illustrations (גרפיקה/clay, rendered in Blender from the experiments' own data) ---------- */
.exp-thumb{display:block;margin:-6px -8px 4px;border-radius:18px;overflow:hidden;aspect-ratio:2000/1150;
  background:#c9a77e;box-shadow:inset 0 0 0 1px rgba(157,90,66,.14)}
.exp-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.exp-card:hover .exp-thumb img{transform:scale(1.03)}
.exp-hero{margin:14px 0 18px;border-radius:26px;overflow:hidden;background:#c9a77e;box-shadow:var(--shadow-soft);
  border:1px solid rgba(157,90,66,.16)}
/* wide screens: the illustration stands beside the introduction (on the left, the text flows on the right), so the
   demo itself stays near the top of the page; narrow screens: above the title */
@media (min-width:980px){
  .exp-hero{float:left;width:min(47%,520px);margin:10px 0 16px 28px}
  .exp-hero figcaption{font-size:.84rem;line-height:1.55;padding:10px 14px 12px}
  .wrap > .docs ~ *{clear:both}   /* everything after the intro starts below the illustration */
}
.exp-hero img{width:100%;height:auto;aspect-ratio:2000/1150;display:block}
.exp-hero figcaption{background:var(--paper-solid);color:var(--muted);font-size:.92rem;line-height:1.65;padding:12px 18px 14px}
.exp-hero figcaption b{color:var(--clay-dark)}

/* footer + utilities */
.footer{max-width:var(--max);margin:0 auto;padding:34px 22px 56px;color:var(--muted);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(157,90,66,.14)}
.hidden{display:none!important}
.reveal{opacity:0;transform:translateY(18px);transition:.5s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1380px){.side-rail{width:58px;left:10px;padding:8px}.side-rail-title,.side-rail a span{display:none}.side-rail a{grid-template-columns:1fr;padding:4px}}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:45px}.hero-card{transform:none}
  .grid-3,.unit-card,.unit-core,.fp-grid{grid-template-columns:1fr}
  .unit-visual{position:relative;top:auto}.side-rail{display:none}
  .unit-badge{top:14px;right:14px;min-width:50px;height:50px;border-radius:16px}
}
@media (max-width:640px){.topbar-inner{padding:10px 14px}.brand span{display:none}.hero,.section{padding-inline:14px}.unit-card{border-radius:28px;padding:12px}}


/* ============================================================================
   (27.10.2026) review against the frontend-design skill: restraint, readable Hebrew, focus, motion
   ========================================================================== */
/* Hebrew is never tracked: negative letter-spacing crowds the letters, positive spacing breaks the words apart */
h1,h2,h3,h4,.unit-kicker,.exp-card .unit,.eyebrow,.side-rail-title{letter-spacing:normal}
/* decoration that carried no information: the cross-hatch, the glow behind each unit, the tilted hero card, and the
   fingerprint stamps (a GPT image) */
body::before,.unit-card::before{display:none}
.hero-card{transform:none}
.fp-stamp,.example-block::before{display:none}
.fingerprint-card h4::before{display:none}
.examples-title{gap:0}
/* the line above a title is a plain citation (paper · year), not a pill with a dot */
.eyebrow{display:block;padding:0;border:0;background:none;color:var(--clay-dark);font-weight:700;font-size:.95rem}
.eyebrow::before{display:none}
/* content is visible from the start; motion only answers the reader (hover, the lightbox) */
.reveal{opacity:1;transform:none}
/* keyboard focus, everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover,.hub-card:hover,.timeline-step:hover,.exp-card:hover .exp-thumb img,.side-rail a:hover{transform:none}
}