/* Prednáška 4 – tokeny a embeddingy. Len triedy s prefixom l4-. */
.l4-gap { margin-bottom: 16px; }
.l4-top { margin-top: 18px; }
.l4-wrap { white-space: normal; overflow-wrap: anywhere; }
.l4-fine { font-size: .8125rem !important; line-height: 1.5; color: var(--text-3) !important; }
.l4-more { display: inline-block; padding: 6px 2px; font-size: .8125rem; color: var(--text-3); }
.l4-scroll { overflow-x: auto; max-width: 100%; border-radius: var(--r-sm); }
.l4-pan svg { touch-action: pan-y; }
.l4-pan canvas { touch-action: pan-y; }

/* --- text v slučke generovania --- */
.l4-text { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; min-height: 110px; align-content: flex-start; border-radius: var(--r-sm); background: #090c13; border: 1px solid var(--line); }
.l4-w { padding: 3px 9px; border-radius: 7px; background: var(--surface-3); color: var(--text); font: 500 .9375rem/1.5 var(--font); }
.l4-w.ctx { box-shadow: inset 0 0 0 1px var(--blue); background: rgba(127, 168, 255, .12); }
.l4-w.new { background: rgba(242, 165, 65, .2); color: var(--accent-hi); box-shadow: inset 0 0 0 1px var(--accent); }
.l4-w.ctx.new { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 1px var(--blue); }
.l4-w.q { background: transparent; color: var(--green); border: 1px dashed rgba(90, 217, 154, .6); padding: 2px 9px; }

/* --- pruhy pravdepodobností --- */
.l4-bars { display: grid; gap: 6px; }
.l4-bar { display: grid; grid-template-columns: minmax(64px, 30%) minmax(40px, 1fr) 54px 34px; gap: 10px; align-items: center; width: 100%; padding: 5px 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; text-align: left; font-size: .875rem; color: var(--text-2); }
button.l4-bar { cursor: pointer; transition: background-color .2s, border-color .2s; }
button.l4-bar:hover { background: rgba(255, 255, 255, .04); border-color: var(--line-2); }
.l4-bar.static { grid-template-columns: minmax(64px, 34%) minmax(40px, 1fr) 46px; padding: 3px 0; }
.l4-bar.top .l4-bar-l { color: var(--accent-hi); font-weight: 600; }
.l4-bar.top .l4-bar-t i { background: var(--accent); }
.l4-bar-l { font-family: var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l4-bar-t { position: relative; height: 14px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.l4-bar-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--green); transition: width .25s var(--ease); }
.l4-bar-t i.cnt { top: auto; height: 4px; background: var(--accent); border-radius: 0; }
.l4-bar-v, .l4-bar-c { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); font-size: .8125rem; }
.l4-bar-c { color: var(--text-3); }

/* --- tokeny ako čipy --- */
.l4-toks { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; border-radius: var(--r-sm); background: #090c13; border: 1px solid var(--line); min-height: 56px; align-content: flex-start; }
.l4-tk { padding: 2px 7px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font: 500 .875rem/1.5 var(--font-mono); white-space: pre; }
.l4-tk.mg { background: rgba(127, 168, 255, .16); color: var(--text); }
.l4-tk.new { background: rgba(242, 165, 65, .24); color: var(--accent-hi); box-shadow: inset 0 0 0 1px var(--accent); }
.l4-toks.big { max-height: 340px; overflow-y: auto; }
button.l4-tk { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 7px 2px; border: 1px solid transparent; cursor: pointer; color: var(--text); }
button.l4-tk small { font-size: .6875rem; line-height: 1.2; color: var(--text-3); }
.l4-tk.c0 { background: rgba(127, 168, 255, .17); }
.l4-tk.c1 { background: rgba(95, 212, 208, .15); }
.l4-tk.c2 { background: rgba(183, 155, 255, .17); }
.l4-tk.c3 { background: rgba(90, 217, 154, .13); }
.l4-tk.c4 { background: rgba(242, 165, 65, .14); }
.l4-tk.raw { color: var(--red); background: rgba(255, 122, 122, .1); border-style: dashed; border-color: rgba(255, 122, 122, .45); }
.l4-tk.raw span { font-size: .75rem; }
.l4-tk.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.l4-merges { max-height: 260px; overflow-y: auto; display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: #090c13; border: 1px solid var(--line); counter-reset: m; font-size: .875rem; color: var(--text-2); }
.l4-merges li { counter-increment: m; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.l4-merges li::before { content: counter(m) "."; min-width: 2.2em; color: var(--text-3); font: .75rem var(--font-mono); }
.l4-merges li.empty::before { content: none; }
.l4-merges small { color: var(--text-3); font-family: var(--font-mono); }

/* --- tokenizér --- */
.l4-ta { display: block; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #090c13; color: var(--text); font: 1rem/1.5 var(--font); resize: vertical; min-height: 84px; }
.l4-ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242, 165, 65, .18); }
.l4-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; margin: 10px 0 16px; }
.l4-stats .stat { flex-direction: column; align-items: flex-start; gap: 4px; }
.lab .l4-toks + .readout { margin-top: 10px; }
.l4-idrow { margin-top: 14px; display: grid; gap: 8px; font-size: .875rem; color: var(--text-2); }
.l4-idrow label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.l4-num { width: 100px; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: #090c13; color: var(--text); font: 1rem var(--font-mono); }
.l4-num:focus { outline: none; border-color: var(--accent); }
.l4-idout { font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; overflow-wrap: anywhere; }
.l4-idout b { color: var(--text); }

/* --- tabuľky vektorov --- */
.l4-mx, .l4-vt { border-collapse: separate; border-spacing: 2px; font: .8125rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.l4-mx th, .l4-vt th { padding: 4px 8px; color: var(--text-3); font-weight: 500; text-align: left; white-space: nowrap; font-family: var(--font); }
.l4-vt th.n { text-align: right; font-family: var(--font-mono); font-weight: 600; }
.l4-mx td, .l4-vt td { padding: 5px 8px; border-radius: 5px; text-align: right; color: var(--text); white-space: nowrap; min-width: 52px; }
.l4-mx th .chip { height: 30px; padding: 0 10px; font-size: .8125rem; }
.l4-mx .rl { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.l4-mx tr.oh td { background: var(--surface-3); color: var(--text-3); text-align: center; }
.l4-mx tr.oh td.one { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.l4-mx td.off { opacity: .32; }
.l4-mx td.col { box-shadow: inset 0 0 0 1px rgba(242, 165, 65, .7); }
.l4-mx .res { border-left: 0; }
.l4-mx th.res { color: var(--accent-hi); text-align: right; padding-left: 16px; }
.l4-mx td.res { position: relative; }
.l4-mx tr:not(.oh) td.res::before { content: ""; }
.l4-vt.wide td { min-width: 50px; }
.l4-vt td.dots { background: none; color: var(--text-3); text-align: center; }
.l4-vt tr.sum th { color: var(--green); font-weight: 600; }
.l4-vt tr.sum td { box-shadow: inset 0 0 0 1px rgba(90, 217, 154, .55); }

/* --- aritmetika --- */
.l4-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font: 600 1.125rem var(--font-mono); color: var(--text-2); }
.l4-sel { height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: #090c13; color: var(--text); font: .9375rem var(--font); max-width: 44vw; }
.l4-sel:focus { outline: none; border-color: var(--accent); }
.l4-ans { padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #090c13; font: 600 1.0625rem/1.5 var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.l4-ans b { font-size: 1.25rem; }

/* --- mriežka viditeľnosti --- */
.l4-grid { display: inline-grid; gap: 3px; align-items: end; padding: 4px; }
.l4-gc { width: 26px; height: 26px; border-radius: 5px; background: var(--surface-3); }
.l4-gc.on { background: var(--violet); opacity: .55; }
.l4-gc.on.sel { opacity: 1; }
.l4-gc.sel:not(.on) { box-shadow: inset 0 0 0 1px rgba(242, 165, 65, .6); }
.l4-gc.h { height: auto; min-height: 26px; max-height: 80px; background: none; writing-mode: vertical-rl; transform: rotate(180deg); font: .75rem/26px var(--font-mono); color: var(--text-2); text-align: left; padding: 4px 0; white-space: nowrap; }
.l4-gc.h.dec, .l4-gr.dec { color: var(--teal); }
.l4-gc.h.enc, .l4-gr.enc { color: var(--blue); }
.l4-gr { height: 26px; padding: 0 8px 0 4px; border: 0; border-radius: 5px; background: none; font: .75rem var(--font-mono); text-align: right; cursor: pointer; white-space: nowrap; }
.l4-gr:hover { background: rgba(255, 255, 255, .05); }
.l4-gr.sel { color: var(--accent-hi); background: rgba(242, 165, 65, .14); font-weight: 700; }

/* --- softmax --- */
.l4-prompt { margin-bottom: 14px; font: 500 1.125rem/1.4 var(--font-display) !important; color: var(--text) !important; }
.l4-prompt b { color: var(--green); }
.l4-sm { display: grid; grid-template-columns: 78px minmax(90px, 1fr) 46px minmax(90px, 1.4fr) 56px 40px; gap: 12px; align-items: center; padding: 3px 0; font-size: .875rem; }
.l4-sm.head { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding-bottom: 6px; }
.l4-sm-n { font-family: var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l4-sm-l { font-family: var(--font-mono); color: var(--blue); text-align: right; font-size: .8125rem; }
.l4-sm-p { font-family: var(--font-mono); color: var(--text); text-align: right; font-size: .8125rem; }
.l4-sm-c { font-family: var(--font-mono); color: var(--accent-hi); text-align: right; font-size: .75rem; }
.l4-sm .l4-bar-t { height: 16px; }
.l4-sm.best .l4-sm-n { color: var(--green); font-weight: 600; }
.l4-sm.cut { opacity: .38; }
.l4-sm.pick .l4-sm-n { color: var(--accent-hi); }

/* --- statické schémy v texte --- */
.l4-fig { padding: 18px; }
.l4-fig svg { width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
.l4-fig svg text { font-size: 15px; }
.fig .l4-fig svg text.mono { font-family: var(--font-mono); font-size: 13.5px !important; }
.l4-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; padding: 20px; }
.l4-flow li:nth-child(3n)::after { content: none; }
.l4-flow li { position: relative; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: .8125rem !important; line-height: 1.4 !important; color: var(--text-2) !important; }
.l4-flow li b { display: block; margin-bottom: 2px; font: 600 .9375rem/1.3 var(--font-display); color: var(--text); }
.l4-flow li::after { content: "→"; position: absolute; right: -21px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 1rem; }
.l4-flow li:last-child::after { content: none; }
.l4-flow li.in { border-color: rgba(127, 168, 255, .45); }
.l4-flow li.mid { border-style: dashed; border-color: rgba(183, 155, 255, .55); background: rgba(183, 155, 255, .07); }
.l4-flow li.out { border-color: rgba(90, 217, 154, .45); }
.l4-flow li small { display: block; margin-top: 4px; color: var(--text-3); font-family: var(--font-mono); }

@media (max-width: 1180px) {
  .l4-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .l4-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l4-bar { grid-template-columns: minmax(56px, 32%) minmax(30px, 1fr) 50px 30px; gap: 8px; }
  .l4-sm { grid-template-columns: 70px minmax(0, 1fr) 44px 50px; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .l4-sm > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .l4-sm > :nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .l4-sm > :nth-child(3) { grid-column: 4; grid-row: 1; }
  .l4-sm > :nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
  .l4-sm > :nth-child(5) { grid-column: 3; grid-row: 2; }
  .l4-sm > :nth-child(6) { grid-column: 4; grid-row: 2; }
  .l4-sm.head { display: none; }
  .l4-fig { padding: 10px; }
  .l4-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
  .l4-flow li::after, .l4-flow li:nth-child(3n)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -20px; transform: translateX(-50%); }
  .l4-flow li:last-child::after { content: none; }
}