/* "הסבר ודוגמאות" accordion — rendered by assets/js/learn-accordion.js from a JSON file */
.lx { --lx-accent: #2563eb; --lx-accent-soft: #eff6ff; --lx-border: #dbeafe; --lx-text: #1f2937; --lx-muted: #6b7280; }

.lx-intro { font-size: 1.05rem; line-height: 1.8; color: var(--lx-text); margin: 0 0 1rem; }

.lx-toolbar { display: flex; justify-content: flex-start; gap: .5rem; margin-bottom: .75rem; }
.lx-toolbar button {
    font: inherit; font-size: .85rem; cursor: pointer; color: var(--lx-accent);
    background: #fff; border: 1px solid var(--lx-border); border-radius: 999px; padding: .25rem .9rem;
}
.lx-toolbar button:hover { background: var(--lx-accent-soft); }

.lx-item {
    border: 1px solid var(--lx-border); border-radius: 1rem; background: #fff; margin-bottom: .75rem; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.lx-item:hover { border-color: #93c5fd; transform: translateY(-1px); }
.lx-item[open], .lx-item.lx-opening { box-shadow: 0 8px 24px rgba(37, 99, 235, .14); border-color: #60a5fa; }
.lx-item.lx-closing { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); border-color: var(--lx-border); }

.lx-item > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .85rem;
    padding: 1rem 1.15rem; font-weight: 700; font-size: 1.1rem; color: #1e3a8a; user-select: none;
    background: linear-gradient(to left, #fff, #fff); transition: background .35s ease, color .35s ease;
}
.lx-item > summary::-webkit-details-marker { display: none; }
.lx-item > summary:hover { background: var(--lx-accent-soft); }
.lx-item[open] > summary, .lx-item.lx-opening > summary { background: linear-gradient(to left, #eff6ff, #dbeafe); }
.lx-item.lx-closing > summary { background: #fff; }
.lx-item > summary:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }

.lx-num {
    flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--lx-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
}
.lx-item[open] .lx-num, .lx-item.lx-opening .lx-num { transform: scale(1.12) rotate(-8deg); background: #1d4ed8; }
.lx-item.lx-closing .lx-num { transform: none; background: var(--lx-accent); }
.lx-title { flex: 1; }
.lx-chevron {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lx-accent-soft); position: relative;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
}
.lx-chevron::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: .5rem; height: .5rem;
    border-right: 2px solid #2563eb; border-bottom: 2px solid #2563eb; transform: translate(-50%, -70%) rotate(45deg);
}
.lx-item > summary:hover .lx-chevron { background: #bfdbfe; }
.lx-item[open] .lx-chevron, .lx-item.lx-opening .lx-chevron { transform: rotate(180deg); background: #bfdbfe; }
.lx-item.lx-closing .lx-chevron { transform: none; background: var(--lx-accent-soft); }

@media (prefers-reduced-motion: reduce) {
    .lx-item, .lx-item > summary, .lx-num, .lx-chevron { transition: none; }
}

.lx-body { padding: .25rem 1.25rem 1.25rem; border-top: 1px solid var(--lx-border); color: var(--lx-text); line-height: 1.85; font-size: 1.02rem; }
.lx-body > * { margin-top: 1rem; margin-bottom: 0; }
.lx-body p { margin: 1rem 0 0; }
.lx-body ul, .lx-body ol { padding-inline-start: 1.5rem; }
.lx-body ul { list-style: disc; }
.lx-body ol { list-style: decimal; }
.lx-body li { margin-top: .35rem; }
.lx-body strong { color: #111827; }

.lx-body code {
    direction: ltr; unicode-bidi: isolate; font-family: Consolas, "Courier New", monospace; font-size: .92em;
    background: #f1f5f9; color: #be185d; border-radius: .3rem; padding: .05rem .35rem;
}

/* code block (always LTR) */
.lx-code { direction: ltr; text-align: left; border-radius: .6rem; overflow: hidden; background: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.lx-code-head { display: flex; justify-content: space-between; align-items: center; background: #1e293b; color: #94a3b8; font-size: .78rem; padding: .35rem .75rem; font-family: sans-serif; }
.lx-code-head button { font: inherit; cursor: pointer; background: transparent; color: #cbd5e1; border: 1px solid #475569; border-radius: .3rem; padding: .05rem .5rem; }
.lx-code-head button:hover { background: #334155; }
.lx-code pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; color: #e2e8f0; font-family: Consolas, "Courier New", monospace; font-size: .92rem; line-height: 1.65; }
.lx-code pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* callouts */
.lx-note { border-radius: .6rem; padding: .75rem 1rem; border-inline-start: 4px solid; }
.lx-note.tip { background: #ecfdf5; border-color: #10b981; }
.lx-note.warn { background: #fffbeb; border-color: #f59e0b; }
.lx-note-label { font-weight: 700; margin-inline-end: .35rem; }

/* table */
.lx-table-wrap { overflow-x: auto; }
.lx-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lx-table th, .lx-table td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: start; vertical-align: top; }
.lx-table th { background: var(--lx-accent-soft); color: #1e3a8a; }

.lx-error { color: var(--lx-muted); font-size: .95rem; }