:root{
    /* פלטה: זית · חלודה · טרקוטה · משמש · קרם */
    --ink:#4E4A26;
    --ink-2:#6B6438;
    --ink-3:#756D42;
    --bone:#FAEEDA;
    --bone-2:#F5D9B5;
    --raised:#FEF7EC;
    --apricot:#E5AC7A;
    --line:#DDBE93;
    --line-soft:#EBD6B8;
    --moss:#55642B;
    --moss-soft:#A69C6E;
    --ember:#8A4029;
    --ember-soft:#C5624A;
    --brine:#8C5B41;
    --stamp-bg:rgba(78,74,38,.07);
    --shadow:0 1px 0 rgba(78,74,38,.05), 0 8px 22px -18px rgba(78,74,38,.45);

    --font-display:-apple-system,BlinkMacSystemFont,"SF Hebrew","Segoe UI",system-ui,"Arial Hebrew",Arial,sans-serif;
    --font-text:-apple-system,BlinkMacSystemFont,"SF Hebrew","Segoe UI",system-ui,"Arial Hebrew",Arial,sans-serif;
    --font-util:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    --step--1:.78rem;
    --step-0:1rem;
    --step-1:1.15rem;
    --step-2:1.42rem;
    --step-3:1.85rem;
    --step-4:2.6rem;
    color-scheme:light;
  }

  *{box-sizing:border-box}
  body{margin:0}
  .page{
    direction:rtl;
    background:var(--bone);
    color:var(--ink);
    font-family:var(--font-text);
    font-size:var(--step-0);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  .wrap{max-width:1000px;margin:0 auto;padding:0 20px}

  /* ---------- wordmark ---------- */
  .mark{display:flex;flex-direction:column;gap:.28em;width:max-content;line-height:1}
  .mark .bar{display:block;height:.19em;background:currentColor;border-radius:1px}
  .mark .word{
    direction:ltr;display:flex;align-items:center;gap:.12em;
    font-family:var(--font-display);font-weight:900;
    letter-spacing:-.02em;transform:scaleY(1.06);
  }
  .mark .dot{width:.42em;height:.42em;background:currentColor;border-radius:46% 54% 52% 48%/50% 46% 54% 50%;display:inline-block}
  .mark--lg{font-size:clamp(38px,9vw,72px)}

  /* לוגו שהועלה. יחס הגובה-רוחב של לוגו מסעדה בלתי צפוי — לכן
     מגבילים גובה ונותנים לרוחב להסתדר, ולא להפך. */
  .mark--img{display:block;width:auto}
  .mark--img img{display:block;max-width:100%;height:auto;object-fit:contain}
  .masthead .mark--img img{max-height:clamp(72px,15vw,140px)}
  .sidebar .mark--img img{max-height:38px}
  .topbar  .mark--img img{max-height:28px}
  footer   .mark--img img{max-height:34px;margin:0 auto}

  .brand-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  /* בלי לוגו — טקסט גדול, בגודל שמתאים לכל מקום */
  .mark-text{font-family:var(--font-display);font-weight:900;letter-spacing:-.025em;line-height:1.05}
  .masthead .mark-text{font-size:clamp(30px,6vw,56px)}
  .sidebar  .mark-text{font-size:20px}
  .topbar   .mark-text{font-size:17px}
  footer    .mark-text{font-size:18px}
  .mk-in{outline:none;min-width:2ch;display:inline-block;
    box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--moss) 55%,transparent)}
  .mk-in:focus{box-shadow:inset 0 -3px 0 var(--moss)}
  .mk-in:empty::before{content:attr(data-ph);opacity:.3}
  .mk-actions{display:flex;gap:6px}
  .logo-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .mark--sm{font-size:19px}

  /* ---------- masthead ---------- */
  .masthead{
    background:#FFFFFF;color:var(--ink);
    border-bottom:5px solid var(--apricot);
    padding:clamp(36px,7vw,72px) 0 clamp(30px,5vw,48px);
  }
  .masthead .wrap{display:flex;flex-direction:column;gap:clamp(22px,4vw,34px)}
  .masthead-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
  .masthead h1{
    font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;
    font-size:var(--step-4);margin:0;text-wrap:balance;line-height:1.05;
  }
  .masthead .kicker{
    font-family:var(--font-util);font-size:var(--step--1);letter-spacing:.16em;
    text-transform:uppercase;color:var(--ember);margin:0 0 .5em;
  }

  .masthead .lede{
    max-width:58ch;color:var(--ink-2);margin:0;font-size:var(--step-1);line-height:1.6;
  }
  .stats{display:flex;gap:28px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
  .stat{display:flex;flex-direction:column;gap:2px;padding-top:12px}
  .stat b{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .stat span{font-family:var(--font-util);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

  /* ---------- intro ---------- */
  .intro{padding:clamp(30px,5vw,52px) 0;border-bottom:1px solid var(--line)}
  .intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,48px);align-items:start}
  .intro h2{
    font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
    font-size:var(--step-2);margin:0;text-wrap:balance;
  }
  .intro p{margin:0 0 1em;color:var(--ink-2);max-width:62ch}
  .intro p:last-child{margin-bottom:0}

  /* ---------- control bar ---------- */
  .controls{
    position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--bone) 92%,transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .controls-inner{display:flex;flex-direction:column;gap:12px;padding:12px 20px 14px;max-width:1000px;margin:0 auto}
  .controls-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .search{
    flex:1 1 220px;min-width:180px;display:flex;align-items:center;gap:8px;
    background:var(--raised);border:1px solid var(--line);border-radius:3px;padding:7px 11px;
  }
  .search input{
    border:0;background:transparent;color:var(--ink);font-family:var(--font-text);
    font-size:var(--step-0);width:100%;outline:none;
  }
  .search svg{flex:none;opacity:.5}
  .filter-label{
    font-family:var(--font-util);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink-3);flex:none;
  }
  .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .chip{
    font-family:var(--font-text);font-size:var(--step--1);
    border:1px solid var(--line);background:transparent;color:var(--ink-2);
    border-radius:2px;padding:4px 10px;cursor:pointer;line-height:1.4;
    transition:background .13s ease,color .13s ease,border-color .13s ease;
  }
  .chip:hover{border-color:var(--ink-3)}
  .chip[aria-pressed="true"]{
    background:var(--ember);border-color:var(--ember);color:var(--raised);
  }
  .chip--vegan[aria-pressed="true"]{background:var(--moss);border-color:var(--moss)}
  .chip--ghost{border-style:dashed;color:var(--ink-3)}
  .count{
    font-family:var(--font-util);font-size:11px;letter-spacing:.1em;color:var(--ink-3);
    font-variant-numeric:tabular-nums;margin-inline-start:auto;
  }
  .count b{color:var(--ink);font-weight:700}
  button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
    outline:2px solid var(--moss);outline-offset:2px;
  }

  /* ---------- courses ---------- */
  main{padding-bottom:80px}
  .course{padding-top:clamp(30px,5vw,48px)}
  .course-head{
    display:flex;align-items:baseline;gap:12px;
    padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid var(--ink);
  }
  .course-head h2{
    font-family:var(--font-display);font-weight:900;letter-spacing:-.025em;
    font-size:var(--step-3);margin:0;line-height:1;
  }
  .course-head .n{
    font-family:var(--font-util);font-size:11px;letter-spacing:.14em;color:var(--ink-3);
    margin-inline-start:auto;font-variant-numeric:tabular-nums;
  }
  .dishes{display:flex;flex-direction:column;gap:10px}

  /* ---------- dish ---------- */
  .dish{
    background:var(--raised);border:1px solid var(--line-soft);border-radius:3px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  .dish[hidden]{display:none}
  .dish > summary{
    list-style:none;cursor:pointer;padding:14px 16px;display:flex;gap:14px;align-items:flex-start;
  }
  .dish > summary::-webkit-details-marker{display:none}
  .dish > summary:hover .dish-name{color:var(--moss)}
  .dish-num{
    flex:none;font-family:var(--font-util);font-size:11px;font-variant-numeric:tabular-nums;
    color:var(--ink-3);border:1px solid var(--line);border-radius:2px;
    width:26px;height:26px;display:grid;place-items:center;margin-top:2px;
  }
  .dish-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
  .dish-name{
    font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;
    font-size:var(--step-1);line-height:1.3;transition:color .13s ease;
  }
  .dish-sub{color:var(--ink-3);font-size:var(--step--1);line-height:1.5}
  .tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:2px}
  .tag{
    font-family:var(--font-util);font-size:10.5px;letter-spacing:.05em;font-weight:700;
    padding:2px 7px;border-radius:2px;border:1px solid transparent;white-space:nowrap;
  }
  .tag--alg{background:var(--stamp-bg);color:var(--ink-2);border-color:var(--line-soft)}
  .tag--alg.is-off{
    background:transparent;color:var(--ink-2);border-style:dashed;border-color:var(--line);
  }
  /* אין צבע לפי "חומרת" הרגישות. אלרגיה לאגוזים ורגישות ללקטוז
     נראות אותו דבר — לסועד שמולך הרגישות שלו היא הקריטית, ודירוג
     ויזואלי בינן לבין עצמן רק מזמין את המלצר לזלזל באחת מהן.
     ההבדל היחיד שנשאר הוא בין "מכיל" ל"מתאים ל", כי אלה שני
     דברים שונים ולא שתי דרגות. */
  .tag--vegan{color:var(--moss);border-color:color-mix(in srgb,var(--moss) 45%,transparent);background:color-mix(in srgb,var(--moss) 9%,transparent)}
  .tag--unknown{color:var(--ink-3);border-color:var(--line);border-style:dotted}
  .chev{flex:none;margin-top:6px;opacity:.4;transition:transform .18s ease}
  .dish[open] .chev{transform:rotate(180deg)}

  .swap-note{
    margin:0 16px 12px;padding:8px 11px;border-radius:2px;
    background:color-mix(in srgb,var(--moss) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--moss) 35%,transparent);
    font-size:var(--step--1);color:var(--ink-2);
  }
  .swap-note b{color:var(--moss)}

  .dish-body{padding:0 16px 18px;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line-soft);margin-top:2px;padding-top:16px}
  .block h4{
    font-family:var(--font-display);font-size:var(--step-1);font-weight:800;
    letter-spacing:-.015em;color:var(--ink);margin:0 0 8px;
  }
  .block p{margin:0 0 .7em;max-width:68ch;color:var(--ink-2)}
  .block p:last-child{margin-bottom:0}
  .block--story{
    border-inline-start:2px solid var(--moss);padding-inline-start:14px;
  }
  .block--story p{color:var(--ink)}
  .comp{display:flex;flex-direction:column;gap:8px}
  .comp-item{font-size:var(--step--1);color:var(--ink-2);max-width:70ch}
  .comp-item b{color:var(--ink);font-weight:700}
  .alg-detail{display:flex;flex-direction:column;gap:4px}
  .alg-detail div{font-size:var(--step--1);color:var(--ink-2)}
  .alg-detail .k{font-weight:700;color:var(--ink)}
  .service{
    background:var(--stamp-bg);border-radius:2px;padding:10px 12px;
    font-size:var(--step--1);color:var(--ink-2);
  }
  .service b{color:var(--ember)}
  .termlinks{display:flex;gap:6px;flex-wrap:wrap}
  .termlink{
    font-family:var(--font-util);font-size:11px;background:transparent;cursor:pointer;
    border:1px solid var(--line);border-radius:2px;padding:3px 8px;color:var(--ink-2);
  }
  .termlink:hover{border-color:var(--moss);color:var(--moss)}

  .empty{
    text-align:center;padding:60px 20px;color:var(--ink-3);
  }
  .empty[hidden]{display:none}
  .ns-note{margin:0;padding:9px 11px;border-radius:2px;font-size:var(--step--1);
    background:color-mix(in srgb,var(--ember) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--ember) 35%,transparent);color:var(--ink-2)}
  noscript .controls-row,html.no-js .chips{opacity:.5}

  /* ---------- glossary ---------- */
  .glossary{background:var(--bone-2);border-top:1px solid var(--line);margin-top:60px;padding:clamp(36px,6vw,64px) 0}
  .gloss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
  .term{background:transparent;border:1px solid var(--line);border-radius:3px;
    padding:14px 16px;scroll-margin-top:120px;transition:background .5s ease}
  .term.flash{background:color-mix(in srgb,var(--moss) 14%,transparent)}
  .term h4{
    font-family:var(--font-display);font-weight:800;font-size:var(--step-0);margin:0 0 4px;letter-spacing:-.01em;
  }
  .term h4 em{font-style:normal;font-family:var(--font-util);font-size:10px;letter-spacing:.12em;color:var(--ink-3);margin-inline-start:6px}
  .term p{margin:0;font-size:var(--step--1);color:var(--ink-2);line-height:1.55}
  .sup{background:transparent;border:1px solid var(--line);border-radius:3px;
    padding:16px;scroll-margin-top:120px}
  .sup h4{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);margin:0 0 4px;letter-spacing:-.015em}
  .sup .where{font-family:var(--font-util);font-size:10.5px;letter-spacing:.1em;color:var(--moss);text-transform:uppercase;margin:0 0 8px}
  .sup p{margin:0;font-size:var(--step--1);color:var(--ink-2);line-height:1.6}
  .sup.flash{background:color-mix(in srgb,var(--moss) 14%,transparent)}

  /* ---------- עריכה בתוך הכרטיס ---------- */
  .term,.sup{position:relative}
  /* תמיד גלויים, ובצד שמאל — הצד הריק בכרטיס בעברית */
  .gloss-ops{position:absolute;top:8px;left:8px;display:flex;gap:3px}
  .gloss-ops .op{min-width:24px;height:24px;padding:0 5px;font-size:11px;
    background:transparent;border-color:var(--line);opacity:.5}
  .gloss-ops .op:hover{opacity:1;background:color-mix(in srgb,#FFFFFF 50%,transparent)}
  .term.is-editing .gloss-ops,.sup.is-editing .gloss-ops{display:none}
  /* מקום לכפתורים, שלא ידרסו את הטקסט */
  .term h4,.sup h4{padding-inline-end:56px}

  /* השדות הם האלמנטים עצמם. אין החלפה לטופס, ולכן אין קפיצה
     ואין שינוי טיפוגרפיה — רק סימון עדין שאפשר להקליד. */
  .is-editing{outline:2px solid var(--moss);outline-offset:-2px}
  .gl-in{outline:none;border-radius:2px;
    box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--moss) 45%,transparent);
    background:color-mix(in srgb,#FFFFFF 55%,transparent);
    padding:1px 3px;margin:0 -3px;min-width:2ch;display:inline-block}
  p.gl-in{display:block;margin:0 -3px 6px;min-height:1.6em}
  .gl-in:focus{background:#FFFFFF;
    box-shadow:inset 0 -2px 0 var(--moss)}
  .gl-in.bad{box-shadow:inset 0 -2px 0 var(--ember);
    background:color-mix(in srgb,var(--ember) 6%,#FFFFFF)}
  .gl-in:empty::before{content:attr(data-ph);color:var(--ink-3);opacity:.6}

  .gl-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
  .gl-note{font-size:11px}
  .is-new{outline:2px dashed var(--moss);outline-offset:-2px}

  footer{padding:30px 0 50px;color:var(--ink-3);font-size:var(--step--1);text-align:center}
  footer .mark{margin:0 auto 14px}

  .filter-toggle{
    display:none;align-items:center;gap:7px;flex:none;
    font-family:var(--font-text);font-size:var(--step--1);
    background:var(--raised);border:1px solid var(--line);border-radius:3px;
    padding:7px 11px;cursor:pointer;color:var(--ink-2);
  }
  .filter-toggle:hover{border-color:var(--ink-3);color:var(--ink)}
  .filter-toggle svg{transition:transform .18s ease}
  .filter-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .filter-toggle .ft-n{
    display:none;place-items:center;font-family:var(--font-util);font-size:10.5px;
    min-width:17px;height:17px;padding:0 5px;border-radius:9px;
    background:var(--ember);color:#FFFFFF;
  }
  .filter-toggle .ft-n.on{display:grid}

  /* ---------- תרגול מושגים ---------- */
  .card{
    background:var(--raised);border:1px solid var(--line);border-radius:4px;
    padding:clamp(18px,3vw,28px);margin-top:20px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:16px;
  }
  .card-term{
    font-family:var(--font-display);font-weight:900;letter-spacing:-.025em;
    font-size:var(--step-3);line-height:1.1;margin:0;
  }
  .card-ask{margin:0;color:var(--ink-3);font-size:var(--step--1)}
  .card textarea{
    width:100%;min-height:96px;resize:vertical;font-family:var(--font-text);
    font-size:var(--step-0);line-height:1.6;color:var(--ink);
    background:#FFFFFF;border:1px solid var(--line);border-radius:3px;padding:11px 13px;
  }
  .card textarea:focus{outline:2px solid var(--moss);outline-offset:1px}
  .card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .needs{display:flex;flex-direction:column;gap:5px}
  .need{
    display:flex;gap:8px;align-items:baseline;font-size:var(--step--1);
    padding:5px 10px;border-radius:2px;
  }
  .need--hit{background:color-mix(in srgb,var(--moss) 12%,transparent);color:var(--ink-2)}
  .need--miss{background:color-mix(in srgb,var(--ember) 9%,transparent);color:var(--ink-2)}
  .need i{font-style:normal;font-family:var(--font-util);font-size:11px;flex:none}
  .need--hit i{color:var(--moss)}
  .need--miss i{color:var(--ember)}
  .card-def{
    border-inline-start:3px solid var(--moss);padding:2px 14px;
    color:var(--ink-2);font-size:var(--step--1);line-height:1.65;
  }
  .card-def b{display:block;font-family:var(--font-util);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:5px}
  .self{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
    border-top:1px solid var(--line-soft);padding-top:14px}
  .self span{font-size:var(--step--1);color:var(--ink-3);margin-inline-end:4px}
  .btn--miss{background:transparent;border-color:var(--ember);color:var(--ember)}
  .btn--miss:hover{background:color-mix(in srgb,var(--ember) 10%,transparent);color:var(--ember)}
  .done{text-align:center;padding:22px 10px;display:flex;flex-direction:column;gap:14px;align-items:center}
  .done b{font-family:var(--font-display);font-size:var(--step-3);font-weight:900;letter-spacing:-.02em}
  .done p{margin:0;color:var(--ink-2);max-width:46ch}

  /* ---------- מעטפת וסרגל צד ---------- */
  .shell{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:start}
  .sidebar{
    position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px;
    padding:26px 20px;background:#FFFFFF;border-inline-end:1px solid var(--line);
  }
  .side-mark{font-size:20px}
  .side-nav{display:flex;flex-direction:column;gap:4px}
  .side-btn{
    font-family:var(--font-display);font-weight:700;font-size:var(--step-0);
    text-align:start;background:transparent;border:0;border-radius:3px;
    padding:9px 11px;cursor:pointer;color:var(--ink-2);transition:background .13s ease,color .13s ease;
  }
  .side-btn:hover{background:var(--stamp-bg);color:var(--ink)}
  .side-btn.is-on{background:var(--moss);color:#FFFFFF}
  /* אזור החשבון נדחף לתחתית הסרגל */
  .acct{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:14px}

  /* פס עליון והמבורגר — מופיעים רק בנייד */
  .topbar{display:none}
  .scrim{display:none}
  .nav-toggle{
    background:transparent;border:1px solid var(--line);border-radius:3px;cursor:pointer;
    width:36px;height:32px;display:grid;place-content:center;gap:4px;padding:0;
  }
  .nav-toggle span{display:block;width:16px;height:1.8px;background:var(--ink);border-radius:1px;
    transition:transform .18s ease,opacity .18s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

  .side-foot{
    margin-top:auto;font-family:var(--font-util);font-size:10.5px;line-height:1.8;
    letter-spacing:.08em;color:var(--ink-3);margin-bottom:0;
  }
  .view[hidden]{display:none}

  /* ---------- מבחן ---------- */
  .quiz-head{background:#FFFFFF;border-bottom:5px solid var(--apricot);padding:clamp(30px,5vw,56px) 0}
  .quiz-head h2{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;font-size:var(--step-4);margin:0 0 .25em;line-height:1.05;text-wrap:balance}
  .quiz-head .kicker{font-family:var(--font-util);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin:0 0 .5em}
  .quiz-head .lede{max-width:56ch;color:var(--ink-2);margin:0;font-size:var(--step-1);line-height:1.6}
  .quiz-bar{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0;
    position:sticky;top:0;z-index:10;
    background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .btn{font-family:var(--font-text);font-size:var(--step--1);border:1px solid var(--line);
    background:var(--raised);color:var(--ink-2);border-radius:3px;padding:7px 14px;cursor:pointer}
  .btn:hover{border-color:var(--ink-3);color:var(--ink)}
  .btn--go{background:var(--moss);border-color:var(--moss);color:#FFFFFF;font-weight:700}
  .btn--go:hover{background:#46521F;border-color:#46521F;color:#FFFFFF}
  .score{margin:18px 0 0;padding:15px 18px;border-radius:3px;background:var(--raised);border:1px solid var(--line)}
  .score[hidden]{display:none}
  .score b{font-family:var(--font-display);font-size:var(--step-3);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .quiz{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
  .q{background:var(--raised);border:1px solid var(--line-soft);border-radius:3px;padding:15px 17px;box-shadow:var(--shadow)}
  .q-text{margin:0 0 11px;display:flex;gap:10px;align-items:baseline}
  .q-n{font-family:var(--font-util);font-size:11px;color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums}
  .q-body{flex:1 1 auto;font-weight:700;line-height:1.5}
  .q-mark{flex:none;font-family:var(--font-util);font-size:11px;letter-spacing:.06em;white-space:nowrap}
  .q.is-right .q-mark{color:var(--moss)}
  .q.is-wrong .q-mark{color:var(--ember)}
  .q-opts{display:flex;flex-direction:column;gap:4px}
  .opt{display:flex;gap:9px;align-items:flex-start;padding:6px 9px;border-radius:2px;
    cursor:pointer;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
  .opt:hover{background:var(--stamp-bg)}
  .opt input{margin-top:.3em;accent-color:var(--moss);flex:none}
  .q-fb{margin:11px 0 0;padding:8px 11px;border-radius:2px;font-size:var(--step--1);display:none}
  .q.is-right{border-color:color-mix(in srgb,var(--moss) 45%,transparent)}
  .q.is-wrong{border-color:color-mix(in srgb,var(--ember) 45%,transparent)}
  .q.is-right .q-fb{display:block;background:color-mix(in srgb,var(--moss) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--moss) 36%,transparent);color:var(--ink-2)}
  .q.is-wrong .q-fb{display:block;background:color-mix(in srgb,var(--ember) 9%,transparent);
    border:1px solid color-mix(in srgb,var(--ember) 36%,transparent);color:var(--ink-2)}

  @media (max-width:900px){
    .filter-toggle{display:inline-flex}
    .filters-row{display:none}
    .filters-row.is-open{display:flex}
    .count{width:100%;margin-inline-start:0}
    .shell{grid-template-columns:1fr}
    .topbar{
      display:flex;align-items:center;justify-content:space-between;
      position:sticky;top:0;z-index:45;height:50px;padding:0 14px;
      background:#FFFFFF;border-bottom:1px solid var(--line);
    }
    .topbar .mark{font-size:16px}

    /* מגירה שנכנסת מימין. right ולא inline-end — תחת RTL ה"סוף"
       הוא צד שמאל, וההמבורגר יושב מימין. */
    .sidebar{
      position:fixed;top:0;right:0;bottom:0;height:100dvh;z-index:50;
      width:min(280px,82vw);transform:translateX(100%);
      transition:transform .22s ease;overflow-y:auto;
      border-inline-end:0;border-inline-start:1px solid var(--line);
      box-shadow:-14px 0 34px -22px rgba(78,74,38,.5);
    }
    .sidebar.is-open{transform:none}
    .scrim{display:block;position:fixed;inset:0;z-index:48;
      background:color-mix(in srgb,var(--ink) 34%,transparent)}
    .scrim[hidden]{display:none}
    body.no-scroll{overflow:hidden}

    .controls{top:50px}
    .quiz-bar{top:50px}
  }

  @media (max-width:720px){
    .intro-grid{grid-template-columns:1fr}
    .controls-inner{padding:10px 16px 12px}
    .wrap{padding:0 16px}
    .count{width:100%;margin-inline-start:0}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important}
  }

  /* ---------- מסכי כניסה ---------- */
  .gate{max-width:520px;margin:0 auto;padding:60px 20px}
  .gate .mark{margin-bottom:30px}
  .gate h1{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;
    font-size:var(--step-3);margin:0 0 .3em;text-wrap:balance}
  .gate p{color:var(--ink-2);margin:0 0 1em;max-width:60ch}
  .gate .card{background:var(--raised);border:1px solid var(--line);border-radius:4px;
    padding:22px;box-shadow:var(--shadow)}
  .gate .fld{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
  .gate .fld label{font-family:var(--font-util);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3)}
  .gate input{font-family:var(--font-text);font-size:1rem;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:3px;padding:10px 12px;width:100%}
  .gate input:focus{outline:2px solid var(--moss);outline-offset:1px}
  .gate pre{background:#fff;border:1px solid var(--line);border-radius:3px;padding:13px;
    overflow-x:auto;font-family:var(--font-util);font-size:12px;line-height:1.6;
    direction:ltr;text-align:left;margin:0 0 10px}
  .gate .msg{padding:11px 14px;border-radius:3px;font-size:var(--step--1);margin-bottom:14px;display:none}
  .gate .msg.on{display:block}
  .gate .msg.err{background:rgba(138,64,41,.09);border:1px solid rgba(138,64,41,.35)}
  .gate .msg.ok{background:rgba(58,100,38,.10);border:1px solid rgba(58,100,38,.35)}
  .hide{display:none !important}
  .side-user{font-family:var(--font-util);font-size:10px;line-height:1.7;
    letter-spacing:.06em;color:var(--ink-3);margin-top:auto}
  .side-user button{font-family:var(--font-util);font-size:10px;background:none;border:0;
    padding:0;color:var(--ember);cursor:pointer;text-decoration:underline}
  /* ---------- חלון הצוות ---------- */
  .sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
    background:color-mix(in srgb,var(--ink) 38%,transparent);overflow-y:auto}
  .sheet[hidden]{display:none}
  .sheet-box{background:var(--bone);border:1px solid var(--line);border-radius:5px;
    width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;
    box-shadow:0 24px 60px -30px rgba(78,74,38,.8);direction:rtl}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 18px;border-bottom:1px solid var(--line)}
  .sheet-head h2{font-family:var(--font-display);font-weight:900;font-size:var(--step-2);margin:0}
  .sheet-body{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}

  .team-add{display:flex;flex-direction:column;gap:11px;
    background:var(--raised);border:1px solid var(--line-soft);border-radius:4px;padding:14px}
  .team-add input,.team-add select{font-family:var(--font-text);font-size:var(--step--1);
    color:var(--ink);background:#FFFFFF;border:1px solid var(--line);border-radius:3px;
    padding:8px 10px;width:100%}
  .team-add input:focus,.team-add select:focus{outline:2px solid var(--moss);outline-offset:1px}

  .team-list{display:flex;flex-direction:column;gap:6px}
  .team-row{display:flex;align-items:center;gap:10px;
    border:1px solid var(--line-soft);border-radius:3px;padding:9px 11px}
  .team-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
  .team-who b{font-size:var(--step--1);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .team-who small{font-family:var(--font-util);font-size:9.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-3)}
  .team-del{flex:none;opacity:.45;background:transparent}
  .team-del:hover{opacity:1}
  .team-lock{flex:none;font-family:var(--font-util);font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3)}
  .team-empty{color:var(--ink-3);font-size:var(--step--1);margin:0}
  .team-row.is-editing{border-color:var(--moss);padding:12px}
  .team-edit-form{display:flex;flex-direction:column;gap:10px;width:100%}
  .team-edit-form input,.team-edit-form select{font-family:var(--font-text);
    font-size:var(--step--1);color:var(--ink);background:#FFFFFF;
    border:1px solid var(--line);border-radius:3px;padding:7px 10px;width:100%}
  .team-edit-form input:focus,.team-edit-form select:focus{outline:2px solid var(--moss);outline-offset:1px}
  .team-edit-form select:disabled{opacity:.55;cursor:not-allowed}
  .team-edit-form .hint{font-size:10.5px;color:var(--ink-3);line-height:1.4}
  .team-edit{flex:none;opacity:.45;background:transparent}
  .team-edit:hover{opacity:1}

  /* ---------- בחירת מסעדה ---------- */
  .pick-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .pick{display:flex;align-items:center;gap:12px;cursor:pointer;text-align:start;
    background:var(--raised);border:1px solid var(--line);border-radius:4px;
    padding:12px 14px;color:inherit;font-family:inherit;
    transition:border-color .13s ease,background .13s ease}
  .pick:hover{border-color:var(--moss);background:#FFFFFF}
  .pick img{max-height:34px;max-width:110px;width:auto;object-fit:contain;flex:none}
  .pick-mark{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);
    color:var(--bone);display:grid;place-items:center;
    font-family:var(--font-display);font-weight:700;font-size:15px}
  .pick-name{display:flex;flex-direction:column;font-weight:700}
  .pick-name small{font-family:var(--font-util);font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-3);font-weight:400}

  /* ---------- אזור החשבון ---------- */
  .acct{position:relative}
  .acct-btn{
    width:100%;display:flex;align-items:center;gap:9px;cursor:pointer;
    background:transparent;border:1px solid transparent;border-radius:4px;
    padding:7px 8px;text-align:start;color:inherit;font-family:inherit;
    transition:background .13s ease,border-color .13s ease;
  }
  .acct-btn:hover{background:var(--stamp-bg);border-color:var(--line-soft)}
  .acct-btn[aria-expanded="true"]{background:var(--stamp-bg);border-color:var(--line)}
  .avatar{
    flex:none;width:30px;height:30px;border-radius:50%;
    background:var(--ink);color:var(--bone);
    display:grid;place-items:center;
    font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1;
  }
  .acct-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
  .acct-who b{font-size:11px;font-weight:600;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acct-who small{font-family:var(--font-util);font-size:9.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-3)}
  .acct-chev{flex:none;color:var(--ink-3);transition:transform .18s ease}
  .acct-btn[aria-expanded="true"] .acct-chev{transform:rotate(180deg)}

  /* התפריט נפתח כלפי מעלה, כי הכפתור יושב בתחתית הסרגל */
  .acct-menu{
    position:absolute;bottom:calc(100% + 6px);inset-inline:0;z-index:30;
    background:#FFFFFF;border:1px solid var(--line);border-radius:4px;
    padding:4px;display:flex;flex-direction:column;
    box-shadow:0 10px 30px -14px rgba(78,74,38,.55);
  }
  .acct-menu[hidden]{display:none}
  .acct-menu button{
    text-align:start;background:transparent;border:0;border-radius:3px;cursor:pointer;
    font-family:var(--font-text);font-size:var(--step--1);color:var(--ink-2);padding:8px 10px;
  }
  .acct-menu button:hover{background:var(--bone);color:var(--ink)}
  .acct-menu .is-out{color:var(--ember)}
  .acct-menu .is-out:hover{background:color-mix(in srgb,var(--ember) 8%,transparent)}

  .acct .pw{display:none;flex-direction:column;gap:7px;margin-top:10px;
    border-top:1px solid var(--line-soft);padding-top:11px}
  .acct .pw.on{display:flex}
  .acct .pw.done .pw-wrap,.acct .pw.done .controls-row{display:none}
  .acct input{font-family:var(--font-text);font-size:var(--step--1);color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:3px;padding:7px 10px;width:100%}
  .acct input:focus{outline:2px solid var(--moss);outline-offset:1px}
  .acct .note{font-size:10.5px;line-height:1.45}
  .acct .note{font-size:var(--step--1);color:var(--ink-3)}
  .acct .note.good{color:var(--moss)}
  .acct .note.bad{color:var(--ember)}
  .loading{padding:80px 20px;text-align:center;color:var(--ink-3);
    font-family:var(--font-util);font-size:12px;letter-spacing:.12em}

  .btn--sm{padding:5px 11px;font-size:11px}
  /* "שכחתי סיסמה" הוא לא פעולה שווה בחשיבותה להתחברות */
  .pw-wrap{position:relative;display:flex;align-items:center}
  /* השדה כתוב משמאל לימין, ולכן הכפתור בצד ימין הפיזי — אחרת הוא
     יושב בדיוק על תחילת הטקסט */
  .pw-wrap input{padding-right:38px !important;width:100%}
  .eye{position:absolute;right:5px;background:transparent;border:0;cursor:pointer;
    padding:6px;display:grid;place-items:center;color:var(--ink-3);
    transition:color .13s ease}
  .eye svg{width:18px;height:18px;display:block}
  .eye:hover{color:var(--ink)}
  .eye.on{color:var(--moss)}
  /* פתוחה כברירת מחדל; כשהסיסמה גלויה מציגים את הצורה החצויה */
  .eye .e-shut{display:none}
  .eye.on .e-open{display:none}
  .eye.on .e-shut{display:block}
  .match{font-size:11px;line-height:1.5;min-height:1.2em;display:block}
  .match.good{color:var(--moss)}
  .match.bad{color:var(--ember)}

  .btn--link{background:transparent;border-color:transparent;color:var(--ink-3);
    text-decoration:underline;text-underline-offset:3px}
  .btn--link:hover{color:var(--ink);background:transparent}

  /* ---------- עריכה על הכרטיס ---------- */
  /* הכלים יושבים בתוך ה-summary, ולכן הם קיימים רק כשהגוף הוא עורך */
  .ops{flex:none;display:flex;gap:5px;align-items:center;margin-top:1px}
  .op{
    font-family:var(--font-util);font-size:11px;line-height:1;cursor:pointer;
    background:#FFFFFF;border:1px solid var(--line);border-radius:2px;
    color:var(--ink-2);padding:6px 8px;min-width:28px;height:28px;
    display:grid;place-items:center;transition:background .12s ease,color .12s ease;
  }
  .op:hover{background:var(--bone-2);color:var(--ink)}
  .op--edit{padding:6px 11px}
  .op--drag{cursor:grab;font-size:13px;letter-spacing:-1px}
  .op--drag:active{cursor:grabbing}
  /* גרירה במחשב, חצים בנייד — אף פעם לא שניהם */
  body.coarse .op--drag{display:none}
  body:not(.coarse) .op--mv{display:none}

  .dish.dragging{opacity:.45}
  .dish.just-saved,.dish.just-moved{
    border-color:var(--moss);box-shadow:0 0 0 2px color-mix(in srgb,var(--moss) 22%,transparent);
  }
  .dish.just-moved{animation:fade-ring 1.4s ease forwards}
  @keyframes fade-ring{to{box-shadow:var(--shadow);border-color:var(--line-soft)}}

  /* מנה מוסתרת: נראית לעורך בלבד, דהויה, ותמיד בתחתית הקטגוריה */
  .dish.is-off{opacity:.62;border-style:dashed}
  .dish.is-off:hover{opacity:.85}
  .tag--off{color:var(--brine);border-color:var(--brine);
    background:color-mix(in srgb,var(--brine) 10%,transparent)}

  .add-dish{margin-inline-start:auto;align-self:center}
  .add-gloss{margin-inline-start:12px;align-self:center}
  .add-gloss.hide{display:none}
  .gloss-form{background:var(--raised);border:1px solid var(--line);border-radius:4px;
    padding:clamp(16px,3vw,22px);margin-top:16px;box-shadow:var(--shadow)}

  .dish-form{border-top:1px solid var(--line-soft);padding:0 clamp(12px,2vw,16px) 16px}
  .dish--new{border-color:var(--moss);border-style:dashed}
  .dish--new .dish-name{color:var(--moss)}

  .form{background:transparent;border:0;border-radius:0;
    padding:0;margin-top:14px;display:flex;flex-direction:column;gap:15px}
  .form h3{font-family:var(--font-display);font-weight:900;font-size:var(--step-2);
    letter-spacing:-.02em;margin:0}
  .form h4{font-family:var(--font-display);font-size:var(--step-2);font-weight:800;
    letter-spacing:-.015em;color:var(--ink);margin:10px 0 0;
    padding-bottom:6px;border-bottom:1px solid var(--line-soft)}

  /* "מוצג לצוות" יושב לצד הכותרת — זו ההחלטה הראשונה על מנה, לא האחרונה */
  .form-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .form-head h3{flex:1 1 auto}
  .pub-switch{display:flex;gap:7px;align-items:center;cursor:pointer;flex:none;
    font-size:var(--step--1);border:1px solid var(--line);border-radius:3px;
    padding:7px 11px;background:#FFFFFF}
  .pub-switch input{accent-color:var(--moss)}
  .pub-switch:has(input:not(:checked)){color:var(--brine);border-color:var(--brine);
    background:color-mix(in srgb,var(--brine) 7%,#FFFFFF)}

  .lbl-note{text-transform:none;letter-spacing:0;font-family:var(--font-text);
    font-size:11px;color:var(--ink-3)}
  .fld{display:flex;flex-direction:column;gap:5px}
  .fld > label{font-family:var(--font-util);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3)}
  .fld input[type=text],.fld input[type=number],.fld textarea,.fld select{
    font-family:var(--font-text);font-size:var(--step-0);color:var(--ink);background:#FFFFFF;
    border:1px solid var(--line);border-radius:3px;padding:9px 11px;width:100%}
  .fld textarea{min-height:76px;resize:vertical;line-height:1.6}
  .fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--moss);outline-offset:1px}
  .fld ::placeholder{color:var(--ink-3);opacity:.65}
  .fld.bad input,.fld.bad textarea,.fld.bad select{border-color:var(--ember);
    background:color-mix(in srgb,var(--ember) 5%,#FFFFFF)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .checks{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:var(--step--1)}
  .checks label{display:flex;gap:6px;align-items:center;cursor:pointer}
  .checks input{accent-color:var(--moss)}

  /* ---------- תיבת פירוט מנה ---------- */
  .rich{border:1px solid var(--line);border-radius:3px;background:#FFFFFF;overflow:hidden}
  .rt-bar{display:flex;gap:3px;align-items:center;flex-wrap:wrap;
    padding:6px 7px;background:var(--bone);border-bottom:1px solid var(--line-soft)}
  .rt{background:transparent;border:1px solid transparent;border-radius:2px;cursor:pointer;
    color:var(--ink-2);min-width:29px;height:27px;display:grid;place-items:center;
    font-family:var(--font-text);font-size:14px;line-height:1;padding:0 7px}
  .rt:hover{background:#FFFFFF;border-color:var(--line)}
  .rt:active{background:var(--bone-2)}
  .rt-sep{width:1px;height:17px;background:var(--line);margin:0 4px}
  /* שלושת כפתורי הגודל נבדלים בגודל האות שעליהם */
  .rt[data-cmd="sz-lg"]{font-size:18px;font-weight:700}
  .rt[data-cmd="sz-md"]{font-size:14px}
  .rt[data-cmd="sz-sm"]{font-size:11px}

  .rt-area{padding:13px 14px;min-height:190px;line-height:1.5;
    font-family:var(--font-text);font-size:.88rem;color:var(--ink);overflow-wrap:break-word}
  .rt-area:focus{outline:2px solid var(--moss);outline-offset:-2px}
  .rt-area p{margin:0}
  .rt-area:empty::before{content:"מרכיבים, אופן הכנה, סיפור — מה שהצוות צריך לדעת על המנה";
    color:var(--ink-3);font-size:var(--step--1)}

  /* שלושה גדלים קבועים. כל כפתור מגדיר מידה מוחלטת משלו —
     שום דבר לא יחסי, ולכן לחיצה חוזרת לא משנה כלום.
     ב-rem ולא ב-em, אחרת גדול בתוך גדול היה מכפיל את עצמו. */
  .sz-sm{font-size:.70rem}   /* ~11px */
  .sz-md{font-size:.88rem}   /* ~14px */
  .sz-lg{font-size:1.13rem}  /* ~18px */
  .detail{line-height:1.5;font-size:.88rem;color:var(--ink-2)}
  .detail b{color:var(--ink)}
  .detail p{margin:0}

  /* ---------- בורר המושגים ---------- */
  .tp{border:1px solid var(--line);border-radius:3px;padding:10px 11px;background:#FFFFFF;
    display:flex;flex-direction:column;gap:9px}
  .tp-chosen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:24px}
  .tp-none{font-size:11px;color:var(--ink-3)}
  .tp-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--step--1);
    background:color-mix(in srgb,var(--moss) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--moss) 45%,transparent);
    border-radius:2px;padding:3px 4px 3px 8px;color:var(--ink)}
  .tp-chip button{background:transparent;border:0;cursor:pointer;color:var(--ink-3);
    font-size:11px;line-height:1;padding:2px 3px}
  .tp-chip button:hover{color:var(--ember)}
  .tp input{font-family:var(--font-text);font-size:var(--step--1);color:var(--ink);
    background:#FFFFFF;border:1px solid var(--line);border-radius:3px;padding:7px 10px;width:100%}
  .tp input:focus{outline:2px solid var(--moss);outline-offset:1px}
  .tp-list{display:flex;gap:5px;flex-wrap:wrap}
  .tp-list[hidden]{display:none}
  .tp-hit{font-family:var(--font-text);font-size:var(--step--1);cursor:pointer;
    background:var(--bone);border:1px solid var(--line);border-radius:2px;
    padding:4px 9px;color:var(--ink-2)}
  .tp-hit:hover{background:var(--bone-2);color:var(--ink)}
  .tp-sug{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
  .tp-lbl{font-family:var(--font-util);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--moss);margin-inline-end:3px}
  .tp-hit--sug{border-style:dashed;border-color:color-mix(in srgb,var(--moss) 55%,transparent);
    color:var(--moss);background:transparent}
  .tp-hit--sug:hover{background:color-mix(in srgb,var(--moss) 10%,transparent)}

  .lab-rows{display:flex;flex-direction:column;gap:7px}
  .lab-row{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;
    padding:9px 11px;border:1px solid var(--line-soft);border-radius:3px;background:#FFFFFF}
  .lab-row > b{font-size:var(--step--1);padding-top:8px;
    display:flex;align-items:center;gap:6px;justify-content:space-between}
  .lab-del{background:transparent;border:0;cursor:pointer;padding:2px 3px;
    font-size:12px;line-height:1;opacity:.3;filter:grayscale(1);transition:opacity .12s ease}
  .lab-del:hover{opacity:1;filter:none}
  .intro h2{display:flex;align-items:center;gap:12px}
  .intro-edit{flex:none;font-size:11px}
  .lab-ctl{display:flex;flex-direction:column;gap:6px}
  .lab-ctl select,.lab-ctl input{font-size:var(--step--1);padding:6px 9px}
  .lab-row.diet{border-color:color-mix(in srgb,var(--moss) 40%,transparent);
    background:color-mix(in srgb,var(--moss) 4%,#FFFFFF)}

  .new-lab{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
    border:1px dashed var(--line);border-radius:3px;padding:10px 11px}
  .new-lab input{flex:1 1 190px;min-width:0;font-family:var(--font-text);
    font-size:var(--step--1);color:var(--ink);background:#FFFFFF;
    border:1px solid var(--line);border-radius:3px;padding:7px 10px}
  .new-lab select{font-size:var(--step--1);padding:7px 9px;flex:none;
    border:1px solid var(--line);border-radius:3px;background:#FFFFFF;color:var(--ink)}

  .form-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
    border-top:1px solid var(--line-soft);padding-top:14px}
  /* מחיקה יושבת רחוק משמירה, כדי שלא ייגעו בה בטעות */
  .btn--del{margin-inline-start:auto;color:var(--ember);border-color:var(--ember);
    background:color-mix(in srgb,var(--ember) 7%,transparent)}
  .btn--del:hover{background:color-mix(in srgb,var(--ember) 14%,transparent)}
  .form-note{font-size:var(--step--1);color:var(--ink-3)}
  .form-note.bad{color:var(--ember)}
  .form-note.good{color:var(--moss)}

  @media (max-width:720px){
    .grid2{grid-template-columns:1fr}
    .lab-row{grid-template-columns:1fr;gap:6px}
    .lab-row > b{padding-top:0}
    /* בנייד הכלים יורדים מתחת לשם, אחרת אין מקום לשם המנה */
    .dish > summary{flex-wrap:wrap}
    .ops{width:100%;justify-content:flex-end;margin-top:8px}
    .course-head{flex-wrap:wrap}
    .add-dish{margin-inline-start:0}
  }