
.tl .chead{padding:var(--s-3) var(--s-4)}
.tl-hold{height:132px;margin:0 var(--s-4) var(--s-4);border-radius:var(--r-sm);background:var(--n-25)}
.tl-list{padding:0 var(--s-4) var(--s-4)}

.tl-grp{margin:var(--s-3) 0 2px;font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-semi);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint)}
.tl-grp:first-child{margin-top:0}
.tl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:center;
  padding:var(--s-2) 2px;border-bottom:1px solid var(--n-100)}
.tl-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-3);align-items:center;min-width:0;
  font-size:var(--fs-body);color:var(--ink)}
.tl-main b{font-family:var(--display);font-weight:var(--fw-semi);color:var(--navy);overflow-wrap:anywhere}
.tl-main small{display:block;font-size:var(--fs-meta);color:var(--faint)}
.tl-cv .pill{white-space:nowrap}
.tl-more{margin-top:var(--s-3)}

.tl-empty{margin:0;padding:var(--s-4);text-align:center;color:var(--mut);font-size:var(--fs-body);
  border:1px dashed var(--n-300);border-radius:var(--r-sm)}
.tl-empty b{display:block;font-family:var(--display);font-weight:var(--fw-semi);color:var(--navy);margin-bottom:2px}

.tl-form{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-2) var(--s-3);
  align-items:end;margin:0 var(--s-4) var(--s-3);padding:var(--s-3);border-radius:var(--r-sm);background:var(--n-50)}
.tl-form[hidden]{display:none}
.tl-form>*{min-width:0}
.tl-why{grid-column:1 / 4}
.tl-acts{display:flex;gap:var(--s-2);align-items:end}
.tl-acts button{min-height:40px}
.tl-err{grid-column:1 / -1;color:var(--status-alert-txt);font-size:var(--fs-meta)}
.tl-err:empty{display:none}

.tl-ill .i-hatch{fill:var(--n-0);opacity:.5}

@media (max-width:900px){
  .tl-main{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
  .tl-form{grid-template-columns:minmax(0,1fr)}
  .tl-why{grid-column:auto}
}
@media (max-width:640px){
  .tl .chead{padding:var(--s-3)}
  .tl-list{padding:0 var(--s-3) var(--s-3)}
  .tl-form{margin:0 var(--s-3) var(--s-3)}
  .tl-hold{margin:0 var(--s-3) var(--s-3)}
  .tl-grp,.tl-main small,.tl-cv .pill{font-size:12px}
  .tl-acts button{flex:1}
  .tl .chead{position:relative}
  .tl .lh-info{position:static}
  .tl .lh-pop{position:absolute;left:var(--s-3);right:var(--s-3);top:calc(100% - var(--s-2));width:auto;margin-top:0}
}
@media (pointer:coarse){
  .tl-row button,.tl-acts button,.tl-more,.tl .chead>button{min-height:44px}
  .tl-cv .pill,.tl-main small,.tl-grp{font-size:12px}
}
