/* TIER LOCKS inside free panels (js/wow/tierlock.js, wave 2 10/15): compact locked row + one-line pill. --tc = tier color (SECRET amber, TOP SECRET red) */
.tlk{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:6px 0;padding:9px 10px;text-align:left;border:1px solid color-mix(in srgb,var(--tc) 38%,transparent);border-left:3px solid var(--tc);
  background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--tc) 7%,transparent) 9px 10px),var(--panel,rgba(6,14,20,.8));color:var(--ink2);transition:background .15s,border-color .15s,transform .1s}
.tlk:hover{border-color:var(--tc);background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--tc) 12%,transparent) 9px 10px),var(--panel,rgba(6,14,20,.8))}
.tlk:active{transform:translateY(1px)}.tlk:focus-visible{outline:2px solid var(--cy2,#39d0ff);outline-offset:2px}
.tlk-i{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);color:var(--tc);background:color-mix(in srgb,var(--tc) 10%,transparent)}
.tlk-i svg{width:16px;height:16px}
.tlk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tlk-t em{font-style:normal;font:700 10px var(--hd);letter-spacing:.22em;color:var(--tc)}
.tlk-t b{font:600 12px var(--hd);letter-spacing:.12em;color:var(--ink-hi)}
.tlk-t small{font-size:11px;line-height:1.4;letter-spacing:.01em;color:var(--ink2);text-transform:none}
.tlk>u{flex:none;text-decoration:none;font:700 10px var(--hd);letter-spacing:.18em;color:#fff;padding:7px 9px;background:var(--red-fill,#b3122a);border:1px solid var(--red-fill,#b3122a)}
.tlk:hover>u{background:var(--red-fill2,#d0172f)}
.tlk-pill{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 9px;border:1px solid color-mix(in srgb,var(--tc) 60%,transparent);color:var(--tc);background:color-mix(in srgb,var(--tc) 9%,transparent);font:700 10px var(--hd);letter-spacing:.14em;white-space:nowrap}
.tlk-pill svg{width:13px;height:13px}.tlk-pill:hover{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 16%,transparent)}
.tlk-pill:focus-visible{outline:2px solid var(--cy2,#39d0ff);outline-offset:2px}
/* a feature button that is locked keeps its place but shows the lock */
.tlk-on{position:relative;opacity:.78}.tlk-on .tlk-b{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font:700 9px var(--hd);letter-spacing:.12em;color:var(--tc,#ffb347);vertical-align:middle}
.tlk-on .tlk-b svg{width:11px;height:11px}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .tlk{min-height:56px;padding:9px 9px}.tlk>u{padding:9px 8px}.tlk-pill{min-height:36px}
}
/* QA 10/15: layer cards the plan does not cover (ui-left cardHTML .lcard.lk): tier badge with the closed padlock, hatched header, faded switch. Tapping opens the teaser */
.lcard.lk .lkb{--tc:#ffb347;display:inline-flex;align-items:center;gap:5px;color:var(--tc);border-color:color-mix(in srgb,var(--tc) 60%,transparent);background:color-mix(in srgb,var(--tc) 9%,transparent);font-weight:700}
.lcard.lk .lkb::before{content:"";flex:none;width:9px;height:11px;background:currentColor;-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat}
.lcard.lk>header{background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,#ffb347 6%,transparent) 9px 10px)}
.lcard.lk .gi,.lcard.lk .nm,.lcard.lk .tg{opacity:.6}