/* Wiki-AI — פריסה משותפת לכל עמודי המדריכים (28.9.2026).
   בעל-האתר: "הפריסה משתנה, יש פערים, רווחים, גלילות ארוכות... צריך חשיבה וארגון מחדש, לא טיפול נקודתי".
   נבחרה פריסת "רשימה שנפתחת": כל כרטיס (משימה, כלי או סוכן) הוא שורה אחת לכל הרוחב — <details class="card row">.
   סגורה: מספר, כותרת, משפט אחד, והכלי המומלץ או המחיר. פתוחה: שלוש עמודות, מתחת לשורה עצמה; שום שורה
   אחרת לא זזה ולא נמתחת. הקובץ נטען אחרי ה-<style> של כל עמוד, ולכן הכללים כאן גוברים עליו.
   הצבעים (--wp-*) מוגדרים בכל עמוד, כמו בשאר Wiki-AI. */

/* ---- רשימת השורות ---- */
.rows { display: grid; gap: 6px; }
.card.row { display: block; padding: 0; gap: 0; border: 1px solid var(--wp-borderLight); border-radius: 4px; background: var(--wp-card); }
.card.row[open] { border-color: var(--wp-link); }
.card.row:target { outline: 2px solid var(--wp-link); outline-offset: 2px; }
.card.row { scroll-margin-top: 12px; }

.rowhead {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center;
  padding: 10px 14px;
}
.rowhead::-webkit-details-marker { display: none; }
.rowhead:hover .cname { text-decoration: underline; }
.rowhead:focus-visible { outline: 2px solid var(--wp-link); outline-offset: -2px; }
.rowhead .num { width: 28px; height: 28px; font-size: 13px; }
.rowtitle { display: grid; gap: 1px; min-width: 0; }
.rowtitle .cname { margin: 0; font-size: 18px; line-height: 1.35; }
.rowteaser { font-size: 13.5px; color: var(--wp-inkSoft); line-height: 1.5; }
.rowside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; font-size: 14px; }
.rowtoggle { color: var(--wp-link); font-size: 13.5px; white-space: nowrap; }
.rowside:has(.rowpick) { flex-direction: column; align-items: flex-end; gap: 2px; }
.rowpick { display: inline-flex; align-items: center; gap: 6px; }
.rowalts { font-size: 12.5px; color: var(--wp-inkSoft); max-width: 34ch; text-align: end; }
.used-in h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--wp-inkSoft); font-family: 'Heebo', sans-serif; }
.used-in ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; font-size: 14px; }
.used-role { color: var(--wp-inkSoft); font-size: 12.5px; }
.rowtoggle::after { content: 'פתיחה ▾'; }
.card.row[open] .rowtoggle::after { content: 'סגירה ▴'; }

/* ---- השורה הפתוחה: שתי עמודות מאוזנות אוטומטית ----
   28.9.2026: חלוקה קבועה (כלים מימין, השאר משמאל) השאירה פערים בדפי המקצוע, שבהם האזהרות, המקור,
   הצעדים והפרומפט ארוכים בהרבה מהכלים (בעל-האתר: "במדריך למקצועות זה עדיין ככה — עם פערים").
   עכשיו התוכן זורם כמו בעיתון: הדפדפן מחלק אותו בין שתי העמודות כך שיסתיימו באותו גובה. גוש שלם
   (כלי, אזהרה, צעד, הפרומפט) לא נחתך באמצע עמודה. */
.rowbody {
  columns: 2 320px; column-gap: 32px; column-rule: 1px solid var(--wp-borderLight);
  padding: 14px; border-top: 1px solid var(--wp-borderLight);
}
.rowcol { display: block; }
.rowcol > * { margin: 0 0 12px; }
.rowcol .tool, .rowcol .decision, .rowcol .he-note, .rowcol .prompt, .rowcol .copy, .rowcol .anchor-note,
.rowcol li, .rowcol dl div, .rowcol .pills, .rowcol .fit { break-inside: avoid; }
.rowcol h4 { break-after: avoid; }
.rowcol .block { break-inside: auto; }
.rowcol .block h4 + * { break-before: avoid; }
.rowcol .fit { font-size: 15px; font-weight: 400; }
.rowcol .tools .tool:first-child { border-top: 0; padding-top: 0; }
/* שם הכלי, המחיר והעברית באותה שורה, וההסבר מתחת — עמודת הכלים קצרה יותר. */
.rowcol .tool { grid-template-columns: 52px 1fr; }
.rowcol .tbody { align-items: baseline; }
.rowcol .tbody .pill { white-space: nowrap; }
.rowcol dl { font-size: 14px; }
.rowcol dl div { grid-template-columns: 76px 1fr; margin-bottom: 6px; }
.rowcol .block h4, .rowwide .agent h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--wp-inkSoft); font-family: 'Heebo', sans-serif; }
.rowwide { padding: 0 14px 14px; }
.rowwide .agent { border-top: 1px solid var(--wp-borderLight); padding-top: 12px; }
.rowwide .agent dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 28px; }
.rowwide .agent dl div { display: block; }
.rowwide .agent dt { font-weight: 700; color: var(--wp-ink); margin-bottom: 2px; }
.card.row > .cfoot { margin: 0; padding: 8px 14px 10px; }
.card.row:not([open]) > .cfoot { display: none; }

@media (max-width: 720px) {
  .rowhead { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .rowside { grid-column: 2 / -1; justify-content: flex-start; align-items: flex-start; }
  .rowalts { text-align: start; max-width: none; }
  .rowtoggle { grid-column: 3; grid-row: 1; }
  .rowbody { columns: 1; }
}

/* ---- רוחב: צר רק לפסקאות קריאה ----
   תיבות, מסגרות ורשימות קצרות מיושרות לרוחב העמוד (הערת בעל-האתר על "3 דברים מהשבוע"). */
.frame, .scope, .keyrules, .checklist, .gnav, .filters, .howto, .anchors, .intro { max-width: none; }
.intro p, .howto p, .frame, .scope { line-height: 1.75; }

/* ---- ניווט בין מדריכי הבחירה (הערת בעל-האתר 28.9.2026) ---- */
.guides-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 0 0 14px; padding: 8px 12px; font-size: 14px;
  background: var(--wp-card); border: 1px solid var(--wp-borderLight); border-radius: 4px;
}
.guides-nav .gn-label { font-weight: 700; color: var(--wp-inkSoft); font-size: 13px; margin-inline-end: 4px; }
.guides-nav a { text-decoration: none; padding: 3px 8px; border: 1px solid var(--wp-borderLight); border-radius: 3px; background: var(--wp-sidebarBg); }
.guides-nav a:hover { text-decoration: underline; }
.guides-nav a[aria-current="page"] { color: var(--wp-ink); font-weight: 700; background: var(--wp-card); border-color: var(--wp-link); }
a.kind { text-decoration: none; }
a.kind:hover { text-decoration: underline; }