/* thari-composer.css — P-D pasek rzucania Thari (pismo Thari, tokeny UI 2.0). */
#weave-panel.tc {
  display: none; position: fixed; left: 50%; bottom: 172px; transform: translateX(-50%);
  width: min(760px, 96vw); max-width: none; padding: var(--sw-s2) var(--sw-s3) var(--sw-s2);
  background: color-mix(in srgb, var(--sw-panel) 92%, transparent); border: 1px solid var(--sw-ash);
  border-top: 1px solid var(--sw-gold-dim); border-radius: var(--sw-radius); z-index: var(--sw-z-hub);
  font-family: var(--sw-font-body); color: var(--sw-bone); box-shadow: 0 8px 32px rgba(0,0,0,.55);
  max-height: calc(100vh - 190px); overflow: auto;
}
#weave-panel.tc.visible { display: block; }
#weave-panel.tc h4 { margin: 0 0 var(--sw-s1); font: 600 var(--sw-fs-small)/1.2 var(--sw-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sw-gold); cursor: move; }
#weave-panel.tc #weave-close-btn { float: right; background: none; border: 0; color: var(--sw-bone-dim); font: var(--sw-fs-small) var(--sw-font-mono); cursor: pointer; }
.tc-row { display: flex; align-items: center; gap: var(--sw-s2); }
.tc-sentence-row { min-height: 44px; padding: var(--sw-s1) var(--sw-s2); background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); }
.tc-sentence { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sw-s2); flex: 1; min-height: 32px; }
.tc-count { font: var(--sw-fs-small) var(--sw-font-mono); color: var(--sw-bone-faint); }
.tc-group { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.tc-pair { display: inline-flex; align-items: baseline; gap: 2px; }
.tc-group > .tc-role { font-size: 9px; letter-spacing: .06em; color: var(--sw-bone-faint); text-transform: uppercase; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tc-group.r-subject > .tc-role { color: var(--sw-luminaris); } .tc-group.r-verb > .tc-role { color: var(--sw-bone-dim); } .tc-group.r-aspect > .tc-role { color: var(--sw-shadow); }
.tc-join { color: var(--sw-bone-faint); margin: 0 2px; align-self: center; }
/* Ligatura: litery-fonemy (Cinzel, tymczasowo łacińskie) połączone kreską — docelowy font Thari z ligaturami OpenType podmienia ten blok. */
.tc-lig { display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 4px 3px; font: 600 18px/1 var(--sw-font-display); letter-spacing: .02em; color: var(--sw-bone); border-bottom: 2px solid currentColor; position: relative; }
.tc-lig::before, .tc-lig::after { content: ''; position: absolute; bottom: -4px; width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
.tc-lig::before { left: -2px; } .tc-lig::after { right: -2px; }
.tc-lig.f-lum { color: var(--sw-luminaris); } .tc-lig.f-ent { color: var(--sw-entropia); } .tc-lig.f-shadow { color: var(--sw-shadow); } .tc-lig.f-universal { color: var(--sw-gold); } .tc-lig.f-tech { color: #7fb7c9; }
.tc-lig.loose { gap: 5px; border-bottom-color: transparent; color: var(--sw-bone-dim); } .tc-lig.loose::before, .tc-lig.loose::after { display: none; }
.tc-lig.loose.st-partial { color: var(--sw-bone); } .tc-lig.loose.st-unknown { color: var(--sw-bone-dim); font-style: italic; } .tc-lig.loose.st-bad { color: var(--sw-danger, #c0392b); }
.tc-lig.sm { font-size: 14px; } .tc-lig.xs { font-size: 12px; padding: 1px 3px 2px; border-bottom-width: 1px; } .tc-lig.xs::before, .tc-lig.xs::after { width: 3px; height: 3px; bottom: -2px; }
.tc-lig.pick { cursor: pointer; border-radius: var(--sw-radius); } .tc-lig.pick:hover { background: var(--sw-gold-glow); }
.tc-caret { display: inline-block; width: 1px; height: 20px; background: var(--sw-gold); animation: tc-blink 1s steps(2) infinite; align-self: center; }
@keyframes tc-blink { to { opacity: 0; } }
.tc-hint { min-height: 16px; margin: 4px 0; font: var(--sw-fs-small) var(--sw-font-mono); color: var(--sw-bone-dim); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.tc-err { color: var(--sw-danger, #c0392b); } .tc-dim { color: var(--sw-bone-faint); }
.tc-alphabet { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin: var(--sw-s1) 0; }
.tc-key { height: 30px; padding: 0; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); font: 600 15px/1 var(--sw-font-display); cursor: pointer; transition: background var(--sw-t-fast, .12s), color var(--sw-t-fast, .12s); }
.tc-key.on:hover { background: var(--sw-gold-glow); border-color: var(--sw-gold-dim); color: var(--sw-gold); }
.tc-key.dim { color: var(--sw-bone-faint); } .tc-key.off { opacity: .22; cursor: default; }
.tc-ligatures { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 var(--sw-s1); font: var(--sw-fs-small) var(--sw-font-mono); }
.tc-fgroup { display: inline-flex; flex-wrap: wrap; gap: 4px; padding-right: 8px; border-right: 1px solid var(--sw-ash); } .tc-fgroup:last-child { border-right: 0; }
.tc-text-row input { flex: 1; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); font: var(--sw-fs-small) var(--sw-font-mono); padding: 4px 8px; }
.tc-text-row input:focus { outline: 0; border-color: var(--sw-gold-dim); }
.tc-text-row button, .tc-btn { background: transparent; border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone-dim); font: var(--sw-fs-small) var(--sw-font-mono); padding: 4px 8px; cursor: pointer; }
.tc-btn:hover, .tc-text-row button:hover { border-color: var(--sw-gold-dim); color: var(--sw-gold); }
.tc-preview { margin: var(--sw-s1) 0; font: var(--sw-fs-small) var(--sw-font-mono); color: var(--sw-bone-dim); min-height: 14px; } .tc-preview.warn { color: var(--sw-danger, #c0392b); }
.tc-actions { flex-wrap: wrap; }
.tc-cast { background: var(--sw-gold-glow); border: 1px solid var(--sw-gold); border-radius: var(--sw-radius); color: var(--sw-gold); font: 600 var(--sw-fs-small) var(--sw-font-display); letter-spacing: .14em; padding: 6px 16px; cursor: pointer; }
.tc-cast:disabled { opacity: .35; cursor: default; }
.tc-slots { display: flex; gap: 4px; margin-left: auto; }
.tc-slot { display: inline-flex; align-items: center; gap: 3px; min-width: 40px; height: 30px; padding: 0 6px; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); cursor: pointer; }
.tc-slot kbd { font: 10px var(--sw-font-mono); color: var(--sw-bone-faint); } .tc-slot.empty { opacity: .55; } .tc-slot:hover { border-color: var(--sw-gold-dim); } .tc-slot.more { color: var(--sw-bone-dim); font: var(--sw-fs-small) var(--sw-font-mono); }
.tc-library { margin-top: var(--sw-s1); border-top: 1px solid var(--sw-ash); max-height: 180px; overflow: auto; font: var(--sw-fs-small) var(--sw-font-mono); }
.tc-librow { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px dotted var(--sw-ash); } .tc-librow.empty { color: var(--sw-bone-faint); }
.tc-libact { margin-left: auto; display: flex; gap: 4px; } .tc-libact button { background: none; border: 1px solid var(--sw-ash); color: var(--sw-bone-dim); font: 10px var(--sw-font-mono); cursor: pointer; padding: 1px 5px; } .tc-libact button:hover { color: var(--sw-gold); border-color: var(--sw-gold-dim); }
.sw-hub-embed#weave-panel.tc { display: block !important; width: 100% !important; }
@media (max-width: 720px) { .tc-alphabet { grid-template-columns: repeat(12, 1fr); } .tc-lig { font-size: 16px; } }